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. Python pandas对excel的操作实现示例2. Vue生产和开发环境如何切换及过滤器的使用3. PHP扩展之文本处理（二）——PCRE正则表达式语法4——Unicode字符属性4. vue+swiper实现左右滑动的测试题功能5. Android开发必知的java嵌套类6. Python3.8 + Tkinter: Button设置image属性不显示的问题及解决方法7. Springboot创建项目的图文教程（idea版本）8. Python HTMLTestRunner测试报告view按钮失效解决方案9. python开发一款翻译工具10. Android Studio实现长方体表面积计算器
网公网安备