脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js数字时钟效果

javascript实现数字时钟效果

 更新时间：2021年02月06日 15:50:33   作者：一颗不甘坠落的流星  
这篇文章主要为大家详细介绍了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 6里的4个新语法

    Javascript 6里的4个新语法

    这篇文章主要为大家详细介绍了Javascript 6里的4个新语法，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript防抖案例讲解

    JavaScript防抖案例讲解

    这篇文章主要介绍了JavaScript防抖案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JS技巧Canvas性能优化脏矩形渲染实例详解

    JS技巧Canvas性能优化脏矩形渲染实例详解

    这篇文章主要为大家介绍了JS技巧Canvas 性能优化脏矩形渲染实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • JavaScript实现字符雨效果

    JavaScript实现字符雨效果

    这篇文章主要为大家详细介绍了JavaScript实现字符雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序时间戳转日期的详解

    微信小程序时间戳转日期的详解

    这篇文章主要介绍了微信小程序时间戳转日期，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • BootStrap daterangepicker 双日历控件

    BootStrap daterangepicker 双日历控件

    这篇文章主要介绍了BootStrap daterangepicker 双日历控件,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-06-06
  • ajax请求乱码的解决方法(中文乱码)

    ajax请求乱码的解决方法(中文乱码)

    这篇文章主要介绍了ajax请求乱码的解决方法(中文乱码),需要的朋友可以参考下
    2014-04-04
  • ECMAscript新特性对象介绍

    ECMAscript新特性对象介绍

    这篇文章主要介绍了ECMAscript新特性对象，对象（object）是JavaScript最重要的数据结构。ECMAScript 2015对它进行了重大升级，下面我们来看一下它的改变

    2021-12-12
  • webpack 如何同时输出压缩和未压缩的文件的实现步骤

    webpack 如何同时输出压缩和未压缩的文件的实现步骤

    这篇文章主要介绍了webpack 如何同时输出压缩和未压缩的文件的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JS异步文件上传（兼容IE8+）

    JS异步文件上传（兼容IE8+）

    本文主要介绍了JS实现异步文件上传的相关资料，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论