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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
浅谈javascript中return语句
Jul 15 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
taro开发微信小程序的实践
May 21 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python使用knn实现特征向量分类
2018/12/26 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
靠谱的活动总结
2019/04/16 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python