javascript实现数字时钟效果
本文实例为大家分享了javascript实现数字时钟效果的具体代码，供大家参考，具体内容如下
效果图
1、通过date获取时间2、通过间隔定时器setInterval动态获取时间3、间隔定时器setInterval间隔设置为1000毫秒（1秒）获取一次时间4、为了样式好看，我们这是用数字图片来代替数字的
源代码HTML部分
<div id='div'> <img src='https://www.haobala.com/bcjs/img/0.png' /> <img src='https://www.haobala.com/bcjs/img/0.png' /> 时 <img src='https://www.haobala.com/bcjs/img/0.png' /> <img src='https://www.haobala.com/bcjs/img/0.png' /> 分 <img src='https://www.haobala.com/bcjs/img/0.png' /> <img src='https://www.haobala.com/bcjs/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 = 'https://www.haobala.com/bcjs/img/' + parseInt(hours / 10) + '.png' imgArr[1].src = 'https://www.haobala.com/bcjs/img/' + hours % 10 + '.png' // 获取分钟 minutes = date.getMinutes(); imgArr[2].src = 'https://www.haobala.com/bcjs/img/' + parseInt(minutes / 10) + '.png' imgArr[3].src = 'https://www.haobala.com/bcjs/img/' + minutes % 10 + '.png' // 获取秒 seconds = date.getSeconds(); imgArr[4].src = 'https://www.haobala.com/bcjs/img/' + parseInt(seconds / 10) + '.png' imgArr[5].src = 'https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/img/0.png' /> <img src='https://www.haobala.com/bcjs/img/0.png' /> 时 <img src='https://www.haobala.com/bcjs/img/0.png' /> <img src='https://www.haobala.com/bcjs/img/0.png' /> 分 <img src='https://www.haobala.com/bcjs/img/0.png' /> <img src='https://www.haobala.com/bcjs/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 = 'https://www.haobala.com/bcjs/img/' + parseInt(hours / 10) + '.png' imgArr[1].src = 'https://www.haobala.com/bcjs/img/' + hours % 10 + '.png' // 获取分钟 minutes = date.getMinutes(); imgArr[2].src = 'https://www.haobala.com/bcjs/img/' + parseInt(minutes / 10) + '.png' imgArr[3].src = 'https://www.haobala.com/bcjs/img/' + minutes % 10 + '.png' // 获取秒 seconds = date.getSeconds(); imgArr[4].src = 'https://www.haobala.com/bcjs/img/' + parseInt(seconds / 10) + '.png' imgArr[5].src = 'https://www.haobala.com/bcjs/img/' + seconds % 10 + '.png' }, 1000)</script>
所用图片：
由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. Vue为什么要谨慎使用$attrs与$listeners2. 解决在Vue中使用axios POST请求变成OPTIONS的问题3. 通过实例解析JavaScript常用排序算法4. Java 生成带Logo和文字的二维码5. SpringBoot 使用 @Value 注解读取配置文件给静态变量赋值6. SpringBoot整合MybatisPlus的教程详解7. 如何通过vscode运行调试javascript代码8. python 实现图片修复（可用于去水印）9. Android自定义控件实现方向盘效果10. python中的socket实现ftp客户端和服务器收发文件及md5加密文件
网公网安备