javascript实现计时器

来源：互联网发布：psd 电力系统仿真软件编辑：程序博客网时间：2024/06/06 03:45

javascript实现计时器

第一种：position取默认的值，利用float：left实现。

html代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><title>模拟时钟</title><style type="text/css">.main {border: 1px solid red;width: 230px;height: 80px;border-radius: 5px;padding: 10px;}.ss,.sg,.fs,.fg,.ms,.mg {width: 28px;height: 52px;float: left;}.sg,.fs,.fg,.ms,.mg {margin-left: 4px;}.box_little {width: 4px;height: 4px;float: left;}.box_big {width: 20px;height: 20px;float: left;}.box_v {width: 20px;height: 4px;border-radius: 2px;background: #eeeeee;float: left;}.box_h {width: 4px;height: 20px;border-radius: 2px;background: #eeeeee;float: left;}/**冒号*/.mh {float: left;font-size: 42px;color: RED;}</style><script type="text/javascript">var nums = [ [ 0, 1, 2, 4, 5, 6 ], [ 2, 5 ], [ 0, 2, 3, 4, 6 ],[ 0, 2, 3, 5, 6 ], [ 1, 2, 3, 5 ], [ 0, 1, 3, 5, 6 ],[ 0, 1, 3, 4, 5, 6 ], [ 0, 2, 5 ], [ 0, 1, 2, 3, 4, 5, 6 ],[ 0, 1, 2, 3, 5, 6 ] ];var i = 0;function updateAllClocks() {var d = new Date();var s = d.getHours();var f = d.getMinutes();var m = d.getSeconds();var ss = Math.floor(s / 10);var sg = s % 10;var fs = Math.floor(f / 10);var fg = f % 10;var ms = Math.floor(m / 10);var mg = m % 10;// alert(ss);change("ss", ss);// 前缀change("sg", sg);change("fs", fs);// 前缀change("fg", fg);change("ms", ms);// 前缀change("mg", mg);}function change(qz, j) {for ( var k = 0; k < 7; k++) {document.getElementById(qz + "_box" + k).style.background = "#EEEEEE";}var zero = nums[j];for ( var k = 0; k < zero.length; k++) {document.getElementById(qz + "_box" + zero[k]).style.background = "RED";}}function updateMh() {document.getElementById("mh").style.color = (++i % 2 == 0) ? "RED": "#EEEEEE";}</script></head><body><div class="main"><div class="ss"><div class="box_little"></div><div class="box_v" id="ss_box0"></div><div class="box_little"></div><div class="box_h" id="ss_box1"></div><div class="box_big"></div><div class="box_h" id="ss_box2"></div><div class="box_little"></div><div class="box_v" id="ss_box3"></div><div class="box_little"></div><div class="box_h" id="ss_box4"></div><div class="box_big"></div><div class="box_h" id="ss_box5"></div><div class="box_little"></div><div class="box_v" id="ss_box6"></div><div class="box_little"></div></div><!-- 小时的十位数 --><div class="sg"><!-- 小时的个位数 --><div class="box_little"></div><div class="box_v" id="sg_box0"></div><div class="box_little"></div><div class="box_h" id="sg_box1"></div><div class="box_big"></div><div class="box_h" id="sg_box2"></div><div class="box_little"></div><div class="box_v" id="sg_box3"></div><div class="box_little"></div><div class="box_h" id="sg_box4"></div><div class="box_big"></div><div class="box_h" id="sg_box5"></div><div class="box_little"></div><div class="box_v" id="sg_box6"></div><div class="box_little"></div></div><!-- 小时的十位数 --><!-- 中间的: --><div class="mh">:</div><div class="fs"><!-- 分钟的十位数 --><div class="box_little"></div><div class="box_v" id="fs_box0"></div><div class="box_little"></div><div class="box_h" id="fs_box1"></div><div class="box_big"></div><div class="box_h" id="fs_box2"></div><div class="box_little"></div><div class="box_v" id="fs_box3"></div><div class="box_little"></div><div class="box_h" id="fs_box4"></div><div class="box_big"></div><div class="box_h" id="fs_box5"></div><div class="box_little"></div><div class="box_v" id="fs_box6"></div><div class="box_little"></div></div><!-- 分钟的十位数 --><div class="fg"><!-- 分钟的个位数 --><div class="box_little"></div><div class="box_v" id="fg_box0"></div><div class="box_little"></div><div class="box_h" id="fg_box1"></div><div class="box_big"></div><div class="box_h" id="fg_box2"></div><div class="box_little"></div><div class="box_v" id="fg_box3"></div><div class="box_little"></div><div class="box_h" id="fg_box4"></div><div class="box_big"></div><div class="box_h" id="fg_box5"></div><div class="box_little"></div><div class="box_v" id="fg_box6"></div><div class="box_little"></div></div><!-- 分钟的十位数 --><!-- 中间的: --><div class="mh" id="mh">:</div><div class="ms"><!-- 秒钟的十位数 --><div class="box_little"></div><div class="box_v" id="ms_box0"></div><div class="box_little"></div><div class="box_h" id="ms_box1"></div><div class="box_big"></div><div class="box_h" id="ms_box2"></div><div class="box_little"></div><div class="box_v" id="ms_box3"></div><div class="box_little"></div><div class="box_h" id="ms_box4"></div><div class="box_big"></div><div class="box_h" id="ms_box5"></div><div class="box_little"></div><div class="box_v" id="ms_box6"></div><div class="box_little"></div></div><!-- 秒钟的十位数 --><div class="mg"><!-- 秒钟的个位数 --><div class="box_little"></div><div class="box_v" id="mg_box0"></div><div class="box_little"></div><div class="box_h" id="mg_box1"></div><div class="box_big"></div><div class="box_h" id="mg_box2"></div><div class="box_little"></div><div class="box_v" id="mg_box3"></div><div class="box_little"></div><div class="box_h" id="mg_box4"></div><div class="box_big"></div><div class="box_h" id="mg_box5"></div><div class="box_little"></div><div class="box_v" id="mg_box6"></div><div class="box_little"></div></div><!-- 秒钟的个位数 --></div><script>updateAllClocks();setInterval("updateAllClocks()", 1000);// 实现冒号1s变化两次setInterval("updateMh()", 500);</script></body></html>

这种方式，代码实现起来比较繁杂，利用float方式，必须保证每个位置都确定大小，多余了很多代码，但是比较方便。

第二种方式：利用position：absolute实现，原理比较简单，但是定位起来相对麻烦。

html代码如下：

<!DOCTYPE html><html><head><title>模拟计时器</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">.ss,.sg,.fs,.fg,.ms,.mg {width: 26px;height: 48px;float: left;margin-left: 10px;position: relative;}.box_v,.box_h {background: #EEEEEE;position: absolute;border-radius: 2px;}.box_v {width: 20px;height: 4px;}.box_h {width: 4px;height: 20px;}.box0 {left: 3px;top: 0px;}.box1 {left: 0px;top: 3px;}.box2 {left: 22px;top: 3px;}.box3 {left: 3px;top: 22px;}.box4 {left: 0px;top: 25px;}.box5 {left: 22px;top: 25px;}.box6 {left: 3px;top: 44px;}/**冒号*/.mh {float: left;font-size: 42px;color: RED;}</style><script type="text/javascript">var nums = [ [ 0, 1, 2, 4, 5, 6 ], [ 2, 5 ], [ 0, 2, 3, 4, 6 ],[ 0, 2, 3, 5, 6 ], [ 1, 2, 3, 5 ], [ 0, 1, 3, 5, 6 ],[ 0, 1, 3, 4, 5, 6 ], [ 0, 2, 5 ], [ 0, 1, 2, 3, 4, 5, 6 ],[ 0, 1, 2, 3, 5, 6 ] ];var i = 0;function updateAllClocks() {var d = new Date();var s = d.getHours();var f = d.getMinutes();var m = d.getSeconds();var ss = Math.floor(s / 10);var sg = s % 10;var fs = Math.floor(f / 10);var fg = f % 10;var ms = Math.floor(m / 10);var mg = m % 10;// alert(ss);change("ss", ss);// 前缀change("sg", sg);change("fs", fs);// 前缀change("fg", fg);change("ms", ms);// 前缀change("mg", mg);}function change(qz, j) {// alert(ss);for ( var k = 0; k < 7; k++) {document.getElementById(qz + "_box" + k).style.background = "#EEEEEE";}var zero = nums[j];for ( var k = 0; k < zero.length; k++) {document.getElementById(qz + "_box" + zero[k]).style.background = "RED";}}function updateMh() {document.getElementById("mh").style.color = (++i % 2 == 0) ? "RED": "#EEEEEE";}</script></head><body><div class="ss"><div class="box_v box0" id="ss_box0"></div><div class="box_h box1" id="ss_box1"></div><div class="box_h box2" id="ss_box2"></div><div class="box_v box3" id="ss_box3"></div><div class="box_h box4" id="ss_box4"></div><div class="box_h box5" id="ss_box5"></div><div class="box_v box6" id="ss_box6"></div></div><div class="sg"><div class="box_v box0" id="sg_box0"></div><div class="box_h box1" id="sg_box1"></div><div class="box_h box2" id="sg_box2"></div><div class="box_v box3" id="sg_box3"></div><div class="box_h box4" id="sg_box4"></div><div class="box_h box5" id="sg_box5"></div><div class="box_v box6" id="sg_box6"></div></div><div class="mh">:</div><div class="fs"><div class="box_v box0" id="fs_box0"></div><div class="box_h box1" id="fs_box1"></div><div class="box_h box2" id="fs_box2"></div><div class="box_v box3" id="fs_box3"></div><div class="box_h box4" id="fs_box4"></div><div class="box_h box5" id="fs_box5"></div><div class="box_v box6" id="fs_box6"></div></div><div class="fg"><div class="box_v box0" id="fg_box0"></div><div class="box_h box1" id="fg_box1"></div><div class="box_h box2" id="fg_box2"></div><div class="box_v box3" id="fg_box3"></div><div class="box_h box4" id="fg_box4"></div><div class="box_h box5" id="fg_box5"></div><div class="box_v box6" id="fg_box6"></div></div><!-- 中间的: --><div class="mh" id="mh">:</div><div class="ms"><div class="box_v box0" id="ms_box0"></div><div class="box_h box1" id="ms_box1"></div><div class="box_h box2" id="ms_box2"></div><div class="box_v box3" id="ms_box3"></div><div class="box_h box4" id="ms_box4"></div><div class="box_h box5" id="ms_box5"></div><div class="box_v box6" id="ms_box6"></div></div><div class="mg"><div class="box_v box0" id="mg_box0"></div><div class="box_h box1" id="mg_box1"></div><div class="box_h box2" id="mg_box2"></div><div class="box_v box3" id="mg_box3"></div><div class="box_h box4" id="mg_box4"></div><div class="box_h box5" id="mg_box5"></div><div class="box_v box6" id="mg_box6"></div></div><script type="text/javascript">updateAllClocks();setInterval("updateAllClocks()", 1000);setInterval("updateMh()", 500);</script></body></html>

效果如下图：

0 0