javascript實現計時器

原創 Monsoo 2018-09-12 06:04

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>

效果如下圖：

wKioL1Om1fTz8oGDAAD1OGfGGBE026.jpg

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

編寫自適應高度的 textarea

CarterLi 2019-02-25 00:14:46

node遇上c++ --- 愛情來的太快(一) (沒有文章)

sewerganger 2019-02-24 22:55:07

進擊webpack4 （基礎篇二：配置）

槐破夢 2019-02-24 22:55:07

《劍指offer》分解讓複雜問題更簡單

ConardLi 2019-02-24 22:55:07

ggit (git gui) --- 開發記錄 (一)

sewerganger 2019-02-24 22:45:04

搞搞, 超星爾雅；

sewerganger 2019-02-24 22:44:54

近期前端發展計劃

Ashleysweetie 2019-02-24 22:32:41

JS module的導出和導入

KevinYan 2019-02-24 21:34:55

「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

micherwa 2019-02-24 19:55:05

跨域的四種方式

上帝遺忘之子 2019-02-24 19:14:58

JS面試題之比較兩個對象是否相等？

幸福村的碼農 2019-02-24 17:35:07

JavaScript：函數防抖與函數節流

沉靜地閃光 2019-02-24 17:35:07

超級詳細的手寫webpack4配置來啓動vue2項目（附配置作用）

Sotyoyo 2019-02-24 16:44:37

QQ音樂播放地址api

要學習資料找我 2019-02-24 16:32:45

通信類

Ashleysweetie 2019-02-24 16:25:14