Les exemples de cet article partagent deux effets de compte à rebours pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
1. Effet de compte à rebours
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> Compte à rebours </ title> <link rel = "Stylesheet" href = "css / commun.css" type = "text / css" charset = "utf-8" /> <style type = "text / css"> * {margin: 0; Padding: 0;} .dtime {marge: 10px;} .dtime Span {Color: # C30;} </ Style> </ Head> <Body> <div id = "A1"> </div> <div id = "A2"> </div> <div id = "A3"> </v> <div id = "A4"> </v> </v> <div Id = "A5"> <div> </ body> </v> </v> fonction tbdtimeCountDown (args) {// function comptdown 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, "jour"]; arr [1] = [s, "hour"]; arr [2] = [f, "minute"]; arr [3] = [m, "deuxième extrémité"]; 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> seconde"; args.end ();} else {t = math.floor (Alltime / (24 * 60 * 60); yt = alltime% (24 * 60 60); S = Math.floor (yt / 60 *); S = ce (arr, 0); ele.innerhtml = s; fonction ce (arr, sta) {var i = sta; if (i <arr.length) {if (arr [i] [0]! = 0) {var s = ""; pour (var j = i; j <arr.length; j ++) {s + = "<span>" + arr [j] [0] + "</span>" + arr [j] [1]; }; retour s; } else {return ce (arr, i + 1); }; }; }; }; }; }; }; }; // Comptes de compte // Effet 1 // 86402 3602 62 TBDtimeCountDown ({id: "a1", // Contient le conteneur de compte-coude: 3, // Total Countdown Seconds End: function () {// Countdown End, le temps de 0 est la fonction appelée // alert ("les extrémités du compte!");},}); // Effet 2 tbdtimeCountDown ({id: "a2", // Contient le conteneur à rebours de tous les temps: 62, // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 3 tbdtimeCountDown ({id: "a3", // Contient le conteneur à comptimateur Alltime: 3602, // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 4 tbdtimeCountDown ({id: "a4", // Contient le conteneur à rebours de tous les temps: 86402, / Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 4 tbdtimeCountDown ({id: "a4", // Contient le conteneur à rebours de tous les temps: 86402, / Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 4 tbdtimeCountDown ({id: "a4", // Contient le conteneur à rebours de tous les temps: 86402, / Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 4 tbdtimeCountDown ({id: "a5", // Contient le conteneur à comptimateur Alltime: 154789, // Total Countdown Seconds End: function () {// Le compte à rebours, le temps 0 est la fonction appelée},}); </cript> </html>2. Compte à rebours 2.html
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> Compte à rebours </ title> <link rel = "Stylesheet" href = "css / commun.css" type = "text / css" charset = "utf-8" /> <style type = "text / css"> * {margin: 0; padding: 0;} .dtime {marge: 10px;} .dtime span {couleur: # c30;} </ style> </ad> <body> <div id = "a1" Alltime = "3"> </v> <div id = "a2" Alltime = "62"> </v> <div id = "A3" Alltime = "3605"> </v> Alltime = "48605"> </ div> <div id = "a5" Alltime = "123456"> </div> </body> <script> fonction tbdtimeCountDown (args) {// comptdown function var ele = document.getElementById (args.id); var Alltime = nombre (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, "jour"]; arr [1] = [s, "hour"]; arr [2] = [f, "minute"]; arr [3] = [m, "deuxième extrémité"]; var s = ce (arr, 0); ele.innerhtml = s; var dong; dong = setInterval (function () {Alltime- = 1; ele.setAttribute (args.alltime, alltime); if (Alltime <= 0) {clearInterval (dong); ele.innerhtml = "<span> 0 </span> seconds"; args.end ();} else {t = math.floor (alltime / (24 * 60); yt = tous les temps (24 * 60); arr [3] = [m, "deuxième extrémité"]; fonction ce (arr, sta) {var i = sta; if (i <arr.length) {if (arr [i] [0]! = 0) {var s = ""; pour (var j = i; j <arr.length; j ++) {s + = "<span>" + arr [j] [0] + "</span>" + arr [j] [1]; }; retour s; } else {return ce (arr, i + 1); }; }; }; }; }; }; }; // Countdown End // Effect 1 // 86402 3602 62 tbdtimeCountDown ({id: "a1", // contient le conteneur de compte à rebours Alltime: "Alltime", // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est l'alerte de fonction appelée fonction ("l'extrémité du compte sera exécutée!");},}); // Effet 2 tbdtimeCountDown ({id: "a2", // contient le conteneur à rebours de tous les temps: "Alltime", // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 3 tbdtimeCountDown ({id: "a3", // Contient le conteneur à comptimateur Alltime: "Alltime", // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 4 tbdtimeCountDown ({id: "a4", // Contient le conteneur à comptimateur Alltime: "Alltime", // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); // Effet 4 tbdtimeCountDown ({id: "a5", // Contient le conteneur à comptimateur Alltime: "Alltime", // Total Countdown Seconds End: function () {// Countdown end, le temps 0 est la fonction appelée},}); </cript> </html>Vous pouvez vous référer au sujet spécial "JS Countdown Fonction Résumé" pour une étude approfondie.
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.