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获取元素值的方法(常见的表单元素)
Nov 15 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
js观察者模式的弹幕案例
Nov 23 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
详解Vue中使用Axios拦截器
2019/04/22 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
上海某公司.net方向笔试题
2014/09/14 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记