이 기사의 예제는 참조에 대해 두 가지 카운트 다운 효과를 공유합니다. 특정 내용은 다음과 같습니다
생식 이미지 :
1. 카운트 다운 효과
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> countdown </titledown </titledown </title> <link rel = "stylesheet"href = "css/common.css"type = "text/css"charset = "utf-8"/> <스타일 타입 = "text/css"> *{margin : 0; 패딩 : 0;} .dtime {margin : 10px;} .dtime span {color :#c30;} </style> </head> <body> <div id = "a1"> </div> <div id = "a2"> </div> <div id = "a3"> </div> <a4 "> </div> <a5"> </div> </div> <cript> 함수 tbdtimeCountdown (Args) {// countdown 함수 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, "day"]; ARR [1] = [S, "Hour"]; arr [2] = [f, "minute"]; ARR [3] = [M, "Second End"]; var s = ce (arr, 0); ele.innerhtml = s; var 동; dong = setInterval (function () {alltime- = 1; if (alltime <= 0) {clearinterval (dong); ele.innerhtml = "<span> 0 </span> secon s = ys = ys. (60); S = CE (ARR, 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, total countdown seconds end : function () {// countdown end, 0의 시간은 // alert ( "countdown end!");}); // 효과 2 TBDTIMECOUNTDOWN ({id : "a2", // 카운트 다운 컨테이너를 모두 포함합니다. // 효과 3 tbdtimeCountdown ({id : "a3", // 카운트 다운 컨테이너를 모두 포함합니다 : 3602, // Total Countdown Seconds End : function () {// countdown end, time 0은},}); // 효과 4 tbdtimeCountdown ({id : "a4", // 카운트 다운 컨테이너를 모두 포함합니다 : 86402,/Total Countdown Seconds End : function () {// countdown end, time 0은},}); // 효과 4 tbdtimeCountdown ({id : "a4", // 카운트 다운 컨테이너를 모두 포함합니다 : 86402,/Total Countdown Seconds End : function () {// countdown end, time 0은},}); // 효과 4 tbdtimeCountdown ({id : "a4", // 카운트 다운 컨테이너를 모두 포함합니다 : 86402,/Total Countdown Seconds End : function () {// countdown end, time 0은},}); // 효과 4 tbdtimeCountdown ({id : "a5", // 카운트 다운 컨테이너를 모두 포함합니다 : 154789, // Total Countdown Seconds End : function () {Countdown end, time 0은},}); </script> </html>2. 카운트 다운 2.html
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> countdown </titledown </titledown </title> <link rel = "stylesheet"href = "css/common.css"type = "text/css"charset = "utf-8"/> <스타일 타입 = "text/css"> *{margin : 0; 패딩 : 0;} .dtime {margin : 10px;} .dtime span {color :#c30;} </style> </style> </head> <div id = "a1"alltime = "3"> </div> <div id = "a2"alltime = "62"> </div> <div id = "a3"alltime = "3605"> Alltime = "48605"> </div> <div id = "a5"alltime = "123456"> </div> </body> <cript> 함수 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 = setInterval (function () {alltime- = 1; ele.setAttribute (args.alltime, allime); if (alltime <= 0) {clearinterval (dong); ele.innerhtml = "<span> 0 </span seconds"; args.end ();} else {t = math.floor (24*60 60))) yt = ys = yt. ARR [M, "2 차"; 함수 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); }; }; }; }; }; }; }; // 카운트 다운 엔드 // 효과 1 // 86402 3602 62 tbdtimeCountdown ({id : "a1", // countdown 컨테이너를 모두 포함합니다. // 효과 2 tbdtimeCountdown ({id : "a2", // countdown 컨테이너를 모두 포함합니다. // 효과 3 tbdtimeCountdown ({id : "a3", // 카운트 다운 컨테이너를 모두 포함합니다. // 효과 4 tbdtimeCountdown ({id : "a4", // 카운트 다운 컨테이너를 모두 포함합니다. // 효과 4 TBDTIMECOUNTDOWN ({id : "a5", // 카운트 다운 컨테이너를 모두 포함합니다 : "Alltime", // Total Countdown Seconds End : function () {// countdown end, time 0은},}); </script> </html>심도있는 연구를 위해 특별한 주제 "JS Countdown 함수 요약"을 참조 할 수 있습니다.
위의 내용은이 기사에 관한 모든 것이며, 모든 사람이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.