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>
所用图片：
由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备