用HTML实现计数器功能

最新推荐文章于 2024-06-17 09:42:33 发布

等一树花开**

最新推荐文章于 2024-06-17 09:42:33 发布

阅读量8.5k

点赞数

本文链接：https://blog.csdn.net/jisuanji_qiyongjie/article/details/82154641

版权

在许多的网页中，我们都会看到计数器以及时钟，那么我们怎么自己实现着种功能呢？

先说计数器，计数器的逻辑功能很简单，就是秒针每秒加一，逢60进一就可以。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div></div>
		<script>
			var index = 0;
			var i=0;
			
			/**
			 * 对时间进行预先处理，逢60进一
			 */
			function counter(){
				second = index;
				minute=i;
				index++;
				if(second==60){
					second=0;
					i++;
					index=0;
				}
				if(second<10){
					second = "0"+second;
				}
				if(minute<10){
					minute="0"+minute;
				}
				return time = minute +":"+second;
			}
			
			/**
			 * 将获得的时间插入到div的区域
			 */
			function show(){
				var time = counter();
				document.getElementsByTagName("div")[0].innerHTML=time;
			}
			
			/**
			 * 每秒钟获得一次时间，实现计数功能
			 */
			function set(){
				setInterval("show()",1000);
			}
			
			show();
			set();
		</script>
	</body>
</html>

这样，一个简单的计数器就完成了。

时钟功能的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/**
			 * 向Date类中添加获取当前时间的方法
			 */
			Date.prototype.currentTime = function(){
				var year = this.getFullYear();
				var month = this.getMonth()+1;
				var day = this.getDate();
				var week = this.getDay();
				week = "星期"+"日一二三四五六".charAt(week);
				month = month<10 ? "0"+month : month;
				day = day < 10 ? "0"+day : day;
				var hour = this.getHours();
				var second = this.getSeconds();
				var minute = this.getMinutes();
				hour = hour<10 ? "0"+hour : hour;
				second = second < 10 ? "0"+second : second;
				minute = minute < 10 ? "0"+minute : minute;
				return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
			}
			
			function showTime(){
				var time = new Date().currentTime();
				document.getElementById("show").innerHTML = time;
			}
			
			function setTime(){
				showTime();
				setInterval("showTime()",1000);
			}
			window.onload = function(){
				setTime();
			}
			
		</script>
	</head>
	<body>
		<span id="show"></span>
		
	</body>
</html>

这样，时钟就完成了！

等一树花开**

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用HTML实现计数器功能

在许多的网页中，我们都会看到计数器以及时钟，那么我们怎么自己实现着种功能呢？先说计数器，计数器的逻辑功能很简单，就是秒针每秒加一，逢60进一就可以。代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &
复制链接

扫一扫