javascript实现数字时钟效果


Posted in Javascript onFebruary 06, 2021

本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下

效果图

javascript实现数字时钟效果

需求分析

1、通过date获取时间
2、通过间隔定时器setInterval动态获取时间
3、间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间
4、为了样式好看,我们这是用数字图片来代替数字的

源代码

HTML部分

<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 时
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
</div>

css部分

<style>
/*无*/ 
</style>

JavaScript部分

<script>
 // 需求:数码时钟
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 获取小时
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 获取分钟
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 获取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 console.log(hours);
 console.log(minutes);
 console.log(seconds);
 }, 1000)
</script>

总代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 时
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
 </div>
</body>

</html>
<script>
 // 需求:数码时钟
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 获取小时
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 获取分钟
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 获取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 }, 1000)
</script>

所用图片:

javascript实现数字时钟效果

由于你们没有图片,直接复制代码,展示不出效果,大家可以自己找几张图片来代替,稍微修改下即可,只要能看得懂代码,修改起来莫得问题啦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
JavaScript WeakMap使用详解
Feb 05 #Javascript
JavaScript 声明私有变量的两种方式
Feb 05 #Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 #Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 #Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 #Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 #Javascript
关于element的表单组件整理笔记
Feb 05 #Javascript
You might like
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
django中forms组件的使用与注意
2019/07/08 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python远程方法调用实现过程解析
2020/07/28 Python
应届本科生推荐信范文
2013/12/25 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
询价采购方案
2014/06/09 职场文书
企业委托书范本
2014/09/13 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
关于倡议书的范文
2015/04/29 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
新手初学Java List 接口
2021/07/07 Java/Android