基于JavaScript的数码时钟

用JavaScript+html+css做的一个简易的数码时钟，具有一定的观赏性，Demo效果：

具体步骤如下：

数码时钟的做法思路就是：给出六张图片，分别对应“时分秒”六个数字，然后用JS实时获取当前时间，并与图片数字对应，最后设置定时器，让时钟动起来。

HTML部分

<ul><li><img src="data:images/0.png" alt=""></li><li><img src="data:images/0.png" alt=""></li><li></li><li><img src="data:images/0.png" alt=""></li><li><img src="data:images/0.png" alt=""></li><li></li><li><img src="data:images/0.png" alt=""></li><li><img src="data:images/0.png" alt=""></li>
</ul>

标注：将用到的数字图片命名为对应的数字，比如“0”这张数字图片的名字为“0”；为什么这么做呢？待会就知道啦！第三个li和第六个li为啥空着呐？那是因为这两个位置是用来放置冒号图片的，小编是在css样式里给它加上对应的背景图片。

下面增加点CSS样式修饰一下图片：

<style>body{background: rgba(228, 22, 255, 0.32);}ul{position: absolute;width: 80%;top:250px;left:50px;text-align: center;}ul li{display: inline-block;list-style: none;}li:nth-child(6){width:100px;height:100px;background: url("images/mao.png") no-repeat;background-size: 100% 100%;}li:nth-child(3){width:100px;height:100px;background: url("images/mao.png") no-repeat;background-size: 100% 100%;}img{width:100px;height:143px;}</style>

初始效果图：

现在加上JavaScript代码，让它动起来，动起来的原理，除了设置定时器外，就是实时改变图片的路径，将它与获取到的时间一一对应，也就是为什么要把图片名字命名为对应的数字，妙就妙在这里！

附上JavaScript代码部分：

<script>function add(i) {      //设置函数，如果获取到的时间<10,就在它前面加上字符“0”，比如获取到的小时为5，那么输出就是“05”if(i<10)return '0'+i;elsereturn ''+i;}window.οnlοad=function () {setInterval(function(){var time = new Date();var hour = time.getHours(),   //获取当前小时数字min  = time.getMinutes(), //获取当前分钟数字
sec  = time.getSeconds(); //获取当前秒数数字hour=add(hour);               //应用转化函数min=add(min);                 //应用转化函数sec=add(sec);                 //应用转化函数var Img=document.getElementsByTagName('img');  //获取图片，此时获取到是数组var array=hour+min+sec;  //将当前时间连接在一起for(var i=0;i<Img.length;i++){Img[i].src='images/'+array.charAt(i)+'.png';   //charAt(i)获取某字符串的第i个字符}},1000)     //设置定时器，每隔一秒刷新页面}
</script>

好了，以上就是全部代码了，一个简易的数码时钟就做完了！有兴趣的同学可以试试。

另附上数码时钟的图片素材：http://pan.baidu.com/s/1kVspFBh

如有疑问，欢迎留言骚扰！

基于JavaScript的数码时钟相关推荐

JavaScript之数码时钟
下面,我就教大家如何利用JavaScript做一个简单的数码时钟. 在做之前我们需要在网上找到从0-9的10张数字图片,保存到一个文件夹里面,并将数字图片对应为相应的数字,作为我们的素材工具. 具体步 ...
【javascript】基于javascript的小时钟
计时事件:通过JavaScript,我们可以设置在一段时间间隔后执行一段代码,而不仅仅是在函数调用后立即执行. 在JavaScript中,使用计时事件是很容易的,主要有两个事件供我们使用 setTim ...
JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）
运用JS的innerHTML,和for循环实现日历小部件内容和日期的转换. <!DOCTYPE html> <html> <head><title>日历 ...
c51时钟数码管显示流程图_基于单片机的电子时钟程序流程图等资料
3.2流程图 51hei.png (3.52 KB, 下载次数: 0) 2020-11-19 17:36 上传 51hei.png (13.35 KB, 下载次数: 0) 2020-11-19 17: ...
javascript实现的数码时钟
*注意每个分割图片和时间显示图片的位置  <!-- <script type="text/javascript&q ...
基于FPGA的数字时钟设计
基于FPGA的数字时钟设计芯片与开发板技术指标 1.具有正常的日时分秒技术显示功能,用七个数码管分别显示日,时,分,秒. 2.有按键校日,校时,校分,校秒. 3.利用led模拟整点报时功能. 4. ...
基于单片机的电子时钟设计（keil+protues仿真，含代码及原理图）
本学期单片机课程要求做课程设计,我选取的课题如下: 基于单片机的电子时钟设计,要求: (1)实时显示当前时间: (2)能够对时间进行设置: (3)包括年月日,小时,分钟,秒． (4)整点提醒功能．经 ...
安信可模组DIY项目分享 | 基于ESP-C3-12F的物联网时钟的总结回顾
目录前言优秀作品展示绵宝物联智能时钟基于ESP32-C3-12F物联网时钟 ESP32 OLED时钟 ESP8266 时钟基于ESP32的多媒体旋钮全息像素时钟哔哩哔哩小精灵更多资料 ...
用单片机用c语言做闹钟,基于单片机与ds1302时钟芯片的电子闹钟C程序
原标题:基于单片机与ds1302时钟芯片的电子闹钟C程序 #include #define w_second 0x80 //秒写入地址 #define w_minute 0x82 //分写入地址 #d ...

基于JavaScript的数码时钟

基于JavaScript的数码时钟相关推荐

最新文章

热门文章