公共部门网站建设维护,游戏音效设计师培训,买了网站主机后如何建设网站,社区网站模板使用JavaScript实现秒表的倒计时。
我设置的是五分钟倒计时#xff0c;倒计时时间是可以自己随意设置的。
效果图 代码演示
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headstyle倒计时时间是可以自己随意设置的。
效果图 代码演示
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headstyle#timer{width: 400px;height: 120px;border: 1px solid red;text-align: center;background-color: cadetblue;}#one{width: 50px;height: 30px;margin-top: 10px;margin-left: 70px;float: left;font-size: 20px;border-radius: 10px;text-align: center;color: greenyellow;background-color: darkcyan;}.two{width: 50px;height: 30px;margin-top: 10px;margin-left: 15px;float: left;border-radius: 10px;font-size: 20px;text-align: center;color: greenyellow;background-color: darkcyan;}/stylebody!-- 5分钟倒计时 --div idtimerdiv idoneh/divdiv classtwomin/divdiv classtwos/divdiv classtwoms/divspan idtime stylefont-size: 3em00:05:00:00/span/div/bodyscript typetext/javascriptvar clockdocument.getElementById(time);var start clock.innerHTML;var finish 00:00:00:00;var time null;run();//定义时间函数让秒表每100ms变化一次function run() {time setInterval(onTime(), 100);}function onTime(){if (start finish){clearInterval(time);start00:00:00:10;}//定义赋值var hms new String(start).split(:);var ms new Number(hms[3]);var s new Number(hms[2]);var m new Number(hms[1]);var h new Number(hms[0]);ms - 10;if (ms 0){ms 90;s - 1;if (s 0){s 59;m - 1;}if (m 0){m 59;h - 1;}}//判断如果是个位数前面加0var ms ms 10 ? (0 ms) : ms;var ss s 10 ? (0 s) : s;var sm m 10 ? (0 m) : m;var sh h 10 ? (0 h) : h;start sh : sm : ss : ms;//在次赋值clock.innerHTML start;}/script
/html
