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实现数字时钟效果 的全部内容, 来源链接: utcz.com/p/219545.html

回到顶部