本文实例为大家分享了javascript实现数字时钟效果的具体代码，供大家参考，具体内容如下

效果图

需求分析

1、通过date获取时间

2、通过间隔定时器setInterval动态获取时间

3、间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间

4、为了样式好看，我们这是用数字图片来代替数字的

源代码

HTML部分

css部分

/*无*/

JavaScript部分

// 需求:数码时钟

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)

总代码

Document

// 需求:数码时钟

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)

所用图片：

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

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