javascript实现计时器

最新推荐文章于 2022-06-14 22:30:00 发布

Monsoo

最新推荐文章于 2022-06-14 22:30:00 发布

阅读量474

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u012093968/article/details/39316677

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

效果如下图：

Monsoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现计时器

javascript实现计时器第一种：position取默认的值，利用float：left实现。html代码如下：模拟时钟.main { border: 1px solid red; width: 230px; height: 80px; border-radius: 5px; padding: 10px;}.ss,.sg,.fs,.fg,.ms,.mg {
复制链接

扫一扫