この記事の例は、参照のために2つのカウントダウン効果を共有しています。特定のコンテンツは次のとおりです
複製画像:
1。カウントダウン効果
<!doctype html> <html> <head> <meta charset = "utf-8"/> <title> countdown </countdown </title> <link rel = "href =" href = "css/common.css" Type = "text/css" charset = "utf-8"/> <style = "text/cs">パディング:0;} .dtime {マージン:10px;} .dtime span {color:#c30;} </style> </head> <body> <div div = "a1"> </div> <div div div "> </div> <div id =" a3 "> </div> <div" a4 "> </div> </</</</</</</</</</div> tbdtimecountdown(args){// countdown function var ele = document.getelementbyid(args.id); var alltime = arg.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、 "day"]; arr [1] = [s、 "hour"]; arr [2] = [f、 "minute"]; arr [3] = [m、 "Second End"]; 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> second"; args.end();} s = yt(60) s = ce(0);関数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]; }; s; } else {return ce(arr、i+1); }; }; }; }; }; }; }; }; // Countdown End // Effect 1 // 86402 3602 62 TBDTIMECOUNTDOWN({ID: "a1"、// Countdownコンテナすべてを含むすべての時間:3、//合計カウントダウン秒End:function(){// Countdown End、0の時間は//アラート( ") // effect 2 tbdtimecountdown({id: "a2"、// contas countdown container ertime:62、//合計カウントダウン秒end:function(){// countdown end、time 0は関数が呼ばれる関数}、}); //効果3 tbdtimecountdown({id: "a3"、//カウントダウンコンテナを含むすべての時間:3602、//合計カウントダウン秒end:function(){// countdown end、時間0は}、}、}); //効果4 tbdtimecountdown({id: "a4"、//カウントダウンコンテナを含むすべての時間:86402、/合計カウントダウン秒エンド:function(){//カウントダウンの終了、時間0は}、}、}); //効果4 tbdtimecountdown({id: "a4"、//カウントダウンコンテナを含むすべての時間:86402、/合計カウントダウン秒エンド:function(){//カウントダウンの終了、時間0は}、}、}); //効果4 tbdtimecountdown({id: "a4"、//カウントダウンコンテナを含むすべての時間:86402、/合計カウントダウン秒エンド:function(){//カウントダウンの終了、時間0は}、}、}); //効果4 tbdtimecountdown({id: "a5"、//カウントダウンコンテナを含むすべての時間:154789、//合計カウントダウン秒末端:function(){//カウントダウンの終了、時間0は}、}、}); </script> </html>2。CountDown2.HTML
<!doctype html> <html> <head> <meta charset = "utf-8"/> <title> countdown </countdown </title> <link rel = "href =" href = "css/common.css" Type = "text/css" charset = "utf-8"/> <style = "text/cs">パディング:0;} .dtime {マージン:10px;} .dtime span {color:#c30;} </style> </head> <body> <div div = "a1" altime = "3"> </div> <div> <div div div div div div div div div div div div div div> alltime = "48605"> </div> <div id = "a5" altime = "123456"> </div> </body> <script>関数tbdtimecountdown(args){// countdown function 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、 "day"]; arr [1] = [s、 "hour"]; arr [2] = [f、 "minute"]; arr [3] = [m、 "Second End"]; var s = ce(arr、0); ELE.INNERHTML = S; var Dong; dong = setInterval(function(){alltime- = 1; ele.setattribute(args.alltime、alltime); if(allime <= 0){clearInterval(dong); ele.innerhtml = "<span> 0 </span>秒"; YT = 24*60) arr [3] = "second end"];関数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]; }; s; } else {return ce(arr、i+1); }; }; }; }; }; }; }; // Countdown End // Effect 1 // 86402 3602 62 TBDTIMECOUNTDOWN({ID: "A1"、// CountDown Container AllTime: "AllTime"、// Total Countdown seconds end:function(){// Countdown End、時間0は呼ばれたfunctionアラートです( ")。 // effect 2 tbdtimecountdown({id: "a2"、// countdown containerを含むすべての時間://合計カウントダウンseconds end:function(){// countdown end、time 0はcalk function}、}); //効果3 tbdtimecountdown({id: "a3"、// countdown container alt time: "alltime"、//合計カウントダウン秒end:function(){// countdown end、time 0はfunction chalk}、}); //効果4 tbdtimecountdown({id: "a4"、// countdown container alt time: "alltime"、//合計カウントダウン秒end:function(){// countdown end、時間0は}、}、}); //効果4 tbdtimecountdown({id: "a5"、// countdown container alt time: "alltime"、//合計カウントダウン秒end:function(){// countdown end、time 0はfunction chalk}、}); </script> </html>詳細な調査のために、特別なトピック「JSカウントダウン機能の概要」を参照できます。
上記はこの記事に関するものであり、誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。