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>
    

所用图片：

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• vue.js实现带日期星期的数字时钟功能示例
• JS+CSS实现滚动数字时钟效果
• js实现一个简单的数字时钟效果
• 使用JS显示倒计时数字时钟效果
• javascript实现滚动效果的数字时钟实例
• JS 实现倒计时数字时钟效果【附实例代码】
• JS实现的网页倒计时数字时钟效果
• javascript数字时钟示例分享
• html5 canvas js(数字时钟)实例代码
• JavaScript实现动态数字时钟

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！