Los ejemplos en este artículo comparten dos efectos de cuenta regresiva para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
1. Efecto de cuenta regresiva
<! Doctype html> <html> <adheh> <meta charset = "utf-8"/> <title> cuenta con cuenta </title> <link rel = "stylesheet" href = "css/comunes.css" type = "text/css" charset = "utf-8"/> <style type = "text/css"> *{margin: 0; Padding: 0;} .dtime {margin: 10px;} .dtime span {color:#c30;} </ystye> </head> <body> <body <bi id = "a1"> </div> <divi Id = "a2"> </shiv> <d iD = "a3"> </div> <div it = "a4"> </div> <viD = "a5"> function tbdtimeCountDown (args) {// cuenta cuenta de cuenta var ele = document.getElementById (args.id); Var AllTime = args.alltime; var arr = []; var t = Math.floor (AllTime/(24*60*60)); var yt = Alltime%(24*60*60); var s = math.floor (yt/(60*60)); var ys = yt%(60*60); var f = math.floor (ys/(60)); var yf = ys%(60); var m = yf; arr [0] = [t, "día"]; arr [1] = [s, "hora"]; arr [2] = [f, "minuto"]; arr [3] = [m, "segundo extremo"]; var s = ce (arr, 0); ele.innerhtml = s; var dong; dong = setInterval (function () {AllTime- = 1; if (AllTime <= 0) {ClearInterval (dong); ele.innerhtml = "<span> 0 </span> segundo"; args.end ();} más {t = Math.floor (AllTime/(24*60*60)); Yt = Alltime (24*60); S = Math.floor (YT/(60*60); s = Ce (arr, 0); función ce (arr, sta) {var i = sta; if (i <arr.length) {if (arr [i] [0]! = 0) {var s = ""; for (var j = i; j <arr.length; j ++) {s+= "<span>"+arr [j] [0]+"</span>"+arr [j] [1]; }; regreso s; } else {return ce (arr, i+1); }; }; }; }; }; }; }; }; // Countdown End // Effect 1 // 86402 3602 62 tbdtimeCountDown ({id: "a1", // contiene contenedor de cuentadown todo el tiempo: 3, // total de cuenta de cuentas de recuento total: function () {// enddown end, el tiempo de 0 es la función llamada // alerta ("El contador de contadores termina!");}); // Effect 2 tbdtimeCountDown ({id: "a2", // contiene contenedor de cuenta cuenta con cuenta de todo el tiempo: 62, // Total Countdown Seconds end: function () {// Countdown End, el tiempo 0 es la función llamada},}); // Effect 3 tbdtimeCountDown ({id: "a3", // contiene contenedor de cuenta cuenta con el contenedor de todo el tiempo: 3602, // Total Countdown Seconds end: function () {// Countdown End, el tiempo 0 es la función llamada},}); // Effect 4 tbdtimeCountDown ({id: "a4", // contiene contenedor de cuenta cuenta con el recuento // Effect 4 tbdtimeCountDown ({id: "a4", // contiene contenedor de cuenta cuenta con el recuento // Effect 4 tbdtimeCountDown ({id: "a4", // contiene contenedor de cuenta cuenta con el recuento // Effect 4 tbdtimeCountDown ({id: "a5", // contiene contenedor de cuenta cuenta con cuenta de todo el tiempo: 154789, // Total Countdown Seconds end: function () {// El final de cuenta regresiva, el tiempo 0 es la función llamada},}); </script> </html>2. Countdown 2.html
<! Doctype html> <html> <adheh> <meta charset = "utf-8"/> <title> cuenta con cuenta </title> <link rel = "stylesheet" href = "css/comunes.css" type = "text/css" charset = "utf-8"/> <style type = "text/css"> *{margin: 0; relleno: 0;} .dtime {margin: 10px;} .dtime span {color:#c30;} </style> </body> <body> <div ID = "a1" Alltime = "3"> </div> <div it = "a2" alltime = "62"> </div> <div io AllTime = "48605"> </div> <div id = "a5" alltime = "123456"> </div> </body> <script> function tbdtimeCountDown (args) {// función de cuenta de cuenta var ele = document.getElementById (args.id); var AllTime = Number (ele.getAttribute (args.alltime)); var arr = []; var t = Math.floor (AllTime/(24*60*60)); var yt = Alltime%(24*60*60); var s = math.floor (yt/(60*60)); var ys = yt%(60*60); var f = math.floor (ys/(60)); var yf = ys%(60); var m = yf; arr [0] = [t, "día"]; arr [1] = [s, "hora"]; arr [2] = [f, "minuto"]; arr [3] = [m, "segundo extremo"]; var s = ce (arr, 0); ele.innerhtml = s; var dong; dong = setInterval (function () {AllTime- = 1; ele.setTribute (args.AllTime, AllTime); if (AllTime <= 0) {ClearInterval (Dong); ele.innerhtml = "<Span> 0 </span> Seconds"; args.end ();} else {t = Math.floor (todos los tiempos/(24*60*60)); YT = Alltime%(24*60*60); arr [3] = [M, "Segundo extremo"]; función ce (arr, sta) {var i = sta; if (i <arr.length) {if (arr [i] [0]! = 0) {var s = ""; for (var j = i; j <arr.length; j ++) {s+= "<span>"+arr [j] [0]+"</span>"+arr [j] [1]; }; regreso s; } else {return ce (arr, i+1); }; }; }; }; }; }; }; // Countdown End // Effect 1 // 86402 3602 62 tbdtimeCountDown ({id: "a1", // contiene el contenedor de recuento y el contenedor Alltime: "AllTime", // Total Countdown Seconds End: functer () {// contando end, el tiempo 0 es la alerta de funciones llamada ("El final del contado se ejecutará!");},}); // Effect 2 tbdtimeCountDown ({id: "a2", // contiene el contenedor de cuenta regresiva Alltime: "Alltime", // Total Countdown Seconds End: function () {// Countdown End, el tiempo 0 es la función llamada},}); // Effect 3 tbdtimeCountDown ({id: "a3", // contiene contenedor de cuenta cuenta con el contenedor Alltime: "AllTime", // Total Countdown Seconds End: function () {// Countdown End, el tiempo 0 es la función llamada},}); // Effect 4 tbdtimeCountDown ({id: "a4", // contiene contenedor de recuento de contenedores Alltime: "AllTime", // Total Countdown Seconds end: function () {// Countdown End, el tiempo 0 es la función llamada},}); // Effect 4 tbdtimeCountDown ({id: "a5", // contiene contenedor de cuenta cuenta con el contenedor Alltime: "AllTime", // Total Countdown Seconds End: function () {// Countdown End, el tiempo 0 es la función llamada},}); </script> </html>Puede consultar el tema especial "JS Countdown Function Resumen" para un estudio en profundidad.
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de JavaScript.