定时器的应用（三）：数码时钟

最新推荐文章于 2023-10-27 14:12:27 发布
最新推荐文章于 2023-10-27 14:12:27 发布
阅读量451 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript setInerval 数码时钟 定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honey_1234567890/article/details/50622412
版权

数码时钟


数码时钟：也可以称为电子表，是应用实时定时器的典型案例。下面我来为大家介绍一下如何做成以下形式的数码时钟。

（上面所有的数字、文字都是图片形式的。）

（一）首先，我们用HTML语句来搭建一个框架。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style>
*{margin:0px; padding:0px;}
body{background:#003; color:white; font-size:50px;}
#title{margin-top:180px;}
</style>
</head>

<body>
<center>
    <div id="title">
        <img src="img/title.jpg" alt="超酷时钟"/>
        <br/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/year.jpg" alt="年"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/month.jpg" alt="月"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/seven.jpg" alt="日"/>
        <br/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        :
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        :
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <br/>
        <img src="img/week.jpg" alt="星期"/>
        <img src="img/one.jpg" alt="一"/>
    </div>
</center>
</body>
</html>

（二）使用实时定时器setInterval调整时间。

①首先获取系统时间（年、月、日、时、分、秒、星期），形成字符串。

function toDou(n)
{
	if(n<10)
	{
		return '0'+n;
	}
	else
	{
		return ''+n;
	}
}	

var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var iWeek=(oDate.getDay()+6)%7;//星期
var week_name=["one","two","three","four","five","six","seven"];
var str=''+iYear+toDou(iMonth+1)+toDou(iDate)+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
说明：getFullYear( );获取取得是年份（2016：数字），getMonth( );获取的是月份（范围是：0—11，所以比实际月份小1，获取的是数字），getDate( );获取的是几号，getDay( );获取的是星期几（范围：1—7，获取的是：数字）。所以我们需要写一个函数toDou(n)；将数字转换成字符串的形式。

② 接着，我们将字符串插入到相应的位置，并修改相应的图片。

for(var i=1;i<aImg.length;i++)
{
	switch(i)
	{
		case 1: 
		case 2: 
		case 3:
		case 4:
			aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
			break;
		case 6:
		case 7:
			aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
			break;
		case 9:
		case 10:
			aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
			break;
		case 12:
		case 13:
		case 14:
		case 15:
		case 16:
		case 17:
			aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
			break;
		case 19:
			aImg[i].src='img/'+week_name[iWeek]+'.jpg';
			break;
		default:
			break;			
	}		
    }
}
但是这样得到的是静态的时钟，只能刷新一次更新一次时间，所以，我们需要引入实时定时器（setInterval），让它可以自动更新时间。

③插入实时定时器（setInterval）：我们上述for循环结构包装成一个ticks()函数，然后调用。

var aImg=document.getElementsByTagName("img");
	
	function ticks()
	{
		var oDate=new Date();
		var iYear=oDate.getFullYear();//年
		var iMonth=oDate.getMonth();//月
		var iDate=oDate.getDate();//日
		var iWeek=(oDate.getDay()+6)%7;//星期
		var week_name=["one","two","three","four","five","six","seven"];
		
		var str=''+iYear+toDou(iMonth+1)+toDou(iDate)
					+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
		for(var i=1;i<aImg.length;i++)
		{
			switch(i)
			{
				case 1: 
				case 2: 
				case 3:
				case 4:
					aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
					break;
				case 6:
				case 7:
					aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
					break;
				case 9:
				case 10:
					aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
					break;
				case 12:
				case 13:
				case 14:
				case 15:
				case 16:
				case 17:
					aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
					break;
				case 19:
					aImg[i].src='img/'+week_name[iWeek]+'.jpg';
					break;
				default:
					break;			
			}		
		}
	}	
	setInterval(ticks,1000);
但是，还是存在一点点的小瑕疵，每次打开该页面时，总是有一秒停在初始状态。所以，我们需要在打开该页面时，先运行一下ticks函数。 

window.οnlοad=function()
{
	var aImg=document.getElementsByTagName("img");
	
	function ticks()
	{
		var oDate=new Date();
		var iYear=oDate.getFullYear();//年
		var iMonth=oDate.getMonth();//月
		var iDate=oDate.getDate();//日
		var iWeek=(oDate.getDay()+6)%7;//星期
		var week_name=["one","two","three","four","five","six","seven"];
		
		var str=''+iYear+toDou(iMonth+1)+toDou(iDate)
					+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
		for(var i=1;i<aImg.length;i++)
		{
			switch(i)
			{
				case 1: 
				case 2: 
				case 3:
				case 4:
					aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
					break;
				case 6:
				case 7:
					aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
					break;
				case 9:
				case 10:
					aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
					break;
				case 12:
				case 13:
				case 14:
				case 15:
				case 16:
				case 17:
					aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
					break;
				case 19:
					aImg[i].src='img/'+week_name[iWeek]+'.jpg';
					break;
				default:
					break;			
			}		
		}
	}	
	setInterval(ticks,1000);
	ticks(); 	
};
下面是完整的代码，希望对大家有帮助。 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style>
*{margin:0px; padding:0px;}
body{background:#003; color:white; font-size:50px;}
#title{margin-top:180px;}
</style>
<script>
	function toDou(n)
	{
		if(n<10)
		{
			return '0'+n;
		}
		else
		{
			return ''+n;
		}
	}	
	
window.οnlοad=function()
{
	var aImg=document.getElementsByTagName("img");
	
	function ticks()
	{
		var oDate=new Date();
		var iYear=oDate.getFullYear();//年
		var iMonth=oDate.getMonth();//月
		var iDate=oDate.getDate();//日
		var iWeek=(oDate.getDay()+6)%7;//星期
		var week_name=["one","two","three","four","five","six","seven"];
		
		var str=''+iYear+toDou(iMonth+1)+toDou(iDate)
					+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
		for(var i=1;i<aImg.length;i++)
		{
			switch(i)
			{
				case 1: 
				case 2: 
				case 3:
				case 4:
					aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
					break;
				case 6:
				case 7:
					aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
					break;
				case 9:
				case 10:
					aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
					break;
				case 12:
				case 13:
				case 14:
				case 15:
				case 16:
				case 17:
					aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
					break;
				case 19:
					aImg[i].src='img/'+week_name[iWeek]+'.jpg';
					break;
				default:
					break;			
			}		
		}
	}	
	setInterval(ticks,1000);
	ticks(); 	
};
</script>
</head>

<body>
<center>
    <div id="title">
        <img src="img/title.jpg" alt="超酷时钟"/>
        <br/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/year.jpg" alt="年"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/month.jpg" alt="月"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/seven.jpg" alt="日"/>
        <br/>
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        :
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        :
        <img src="img/0.jpg" alt="0"/>
        <img src="img/0.jpg" alt="0"/>
        <br/>
        <img src="img/week.jpg" alt="星期"/>
        <img src="img/three.jpg" alt="三"/>
    </div>
</center>
</body>
</html>









辛篱
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现数码时钟
weixin_43981560的博客
05-05 1351
JS时钟来啦~ - 几行代码实现在页面上显示时间，制作一个简介漂亮的页面时钟。首先div里加载图片，默认显示数字0， <div id="d1"> <img src="./imgs/img/0.jpg" alt=""> <img src="./imgs/img/0.jpg" alt=""> <h1>时...
frontend:数码时钟前端版本
07-01
在本项目中，"frontend:数码时钟前端版本"是一个基于前端技术实现的数码时钟应用。这个项目可能主要用于展示时间，或者作为一个教学示例，帮助开发者了解如何在Web页面上构建动态显示时间的组件。下面我们将深入探讨...
数码时钟
zhaoke_930325的博客
07-21 269
通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。 通过for循环将数组中的每一项都赋值给img元素相对应的上面，str.charAt(i)通过i递增将str的每个数字输入到src中。 通过封装函数tick，并调用了一次，使得网页在刷新时不会出现图片变化。 通过getHours，getMinutes，getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘ ’（一个
数字时钟（8位数码管显示+时分校准）
最新发布
m0_60631283的博客
10-27 5375
数字时钟（8位数码管显示+时分校准）
moderne:数码时钟操作系统
03-30
首先，从操作系统层面来看，"数码时钟操作系统"可能是一个轻量级的操作系统内核或者一个在现有操作系统上的应用程序。在嵌入式系统中，开发者通常需要编写底层驱动程序来与硬件交互，如RTC（实时时钟）芯片，以便...
js学习-数码时钟-动态显示当前时间
06-17
在这个“js学习-数码时钟”项目中，我们将探讨如何利用JavaScript来创建一个实时更新，显示当前时间的数码时钟。 1. **基本概念** - **JavaScript**: 是一种解释型、弱类型、基于原型和事件驱动的编程语言，由网景...
数码时钟设计-AT89S52单片机C语言应用100例-综合文档
05-23
通过以上这些知识点的学习和实践，开发者能够逐步掌握AT89S52单片机和C语言在实际项目中的应用，进而设计出功能完备、用户体验良好的数码时钟。在“数码时钟设计-AT89S52单片机C语言应用100例”中，读者可以期待涵盖...
易语言窗口置外形图片的应用--数码时钟
07-15
在这个“易语言窗口置外形图片的应用--数码时钟”项目中，我们主要探讨的是如何利用易语言来实现一个具有自定义外形的窗口，并在窗口上展示一个动态的数码时钟。 首先，我们要理解窗口置外形图片的技术。在Windows...
简易数码时钟
_ACME_的博客
06-10 960
通过这个小例子复习一下Date对象的基本使用. 还可以用Date对象做定时器，计时器等等.效果如图： 可以自己去找炫一点的图片来代替文字,原理都是一样,只是如果用图片代替文字，则定时切换图片即可.HTML代码：<div id="clock"> <p></p> <p></p> <p></p> </div>CSS代码: *{margin:0;paddi
数码时钟知识点
now_go_的博客
07-10 199
函数调用 此函数toDouble（num）内调用了参数，姑且叫他含参函数吧；这个参数传递变量，进行判断后将变量return为新的值。 字符串 var str=string+string+string;字符串之间用+相连。 在number前添加’’+可将number转化为string数据类型。 拓展：JS中数据类型有： Undefined未定义,Boolean布尔值,Object,Numbe...
数码时钟（图片实现）
qq_44851885的博客
04-04 1038
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数码时钟</title> <style> body{ background: black; ...
定时器及数码时钟
yutin781528452的博客
08-10 393
定时器的作用 开启定时器 setInterval   间隔型 隔2000ms也就是2s就弹出一次a。   setTimeout  延时型 两种定时器的区别： 上一种是隔2s就会运行一次，而下一种是隔了2s运行一次之后就不运行了。 停止定时器 clearInterval： 用法：clearInterval(输入需要关闭的定时器的名字) 比如：， 给定时器设一个名字叫timer，关闭...
日期对象 date.getDate() date.getDay()的区别
c_qianxia5040的博客
03-19 2533
示例：2021/3/19 14：39：00 周五 var date = new Date() var dat = date.getDate()//当前是几号 var day = date.getDay()//星期几 console.log(dat,day) // 19 5
setInterval定时器
一夜枫林
01-07 582
setInterva 中文：定时调用函数名 我们俗称：间隔定时器 使用方法 data() { return { newdate:null, }; }, mounted() { this.newdate = setInterval(() =>{ console.log("我是间隔定时器，每五秒调用一次") },5000) }, // beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。 beforeDestroy() { console.l
帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js
tyygming的专栏
06-06 372
日期：2013-6-6  来源：GBin1.com 在线演示 FlipClock.js 是一款功能强大并且支持自定义的时钟和计时器的jQuery插件，和其它的jQuery时钟插件不同，它拥有更强大API帮助你生成自定义的效果。 主要功能 生成一个时钟 生成一个计时器 生成倒计时器 使用纯CSS生成的主题 简介干净的语法 整个代码都是使用重用的对象实现 完整特性的开发...
基于51单片机的电子时钟（数码管显示）
热门推荐
翔@#￥%的博客
05-20 10万+
     此次对于数码管进行一个简单的应用，同时可以设计一个电子小时钟，增加趣味性。首先我们先进行原理图的讲解，这里我们直接使用的开发板，其原理连接图如下：   从图中，我们可以看到，第一个74HC573是来控制8个数码管的位选的，就是说我要选种哪个数码管，这里的WE是低电平有效，比如说我想选中最后一个数码管，那么这里我就要将0x7f送到相应的I/O口。第二个74HC573是来控制数码管显示什么的...
VHDL设计详解：基础单元电路与定时器应用
同步计数器如六十进制计数器，利用时钟脉冲控制触发器状态，例如，4位二进制计数器可组合成十进制计数，而两个十进制计数器串联可实现六十进制计数，广泛应用于时钟计数等领域。异步计数器则不受时钟控制，每个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值