js定时器与数码时钟案例（源码及备注）

js定时器与数码时钟案例

开启定时器

1、setInterval 间隔型

setInterval(参数一,参数二);

第一个参数是一个函数，第二个参数是时间（单位是毫秒）
意思就是每隔多长时间执行一次函数；

2、setTimeout 延时型

只执行一次

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><title>定时器</title><script>let show = () =>{alert('a');}/* 无限执行 */setInterval(show,1000);//第一个参数是一个函数，第二个参数是时间，单位是毫秒//意思就是每隔1秒钟执行一次show函数/* 只执行一次 */setTimeout(show,1000);</script></head>
</html>

两种定时器的区别

关于上述代码，setIterval(show,1000);无限弹出‘a’,而setTimeout(show,1000);只弹一次

停止定时器

想实现的功能：点击开始的时候弹’a’,点击关闭的时候停止。
首先准备两个按钮写上点击事件。
关于window.onload() 方法：
它用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
为什么要加这个方法：因为代码是从上到下加载的，但是我们的js代码写在了body前面，如果不加会找不到元素（因为那个时候body没有加载到）。

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><title>定时器的开启与关闭</title><script>window.onload = ()=>{let oBtn1 = document.getElementById('btn1');let oBtn2 = document.getElementById('btn2');oBtn1.onclick = ()=>{setInterval(() => {alert('a');}, 1000);}}</script></head><body><input id="btn1" type="button" value="开启" /><input id="btn2" type="button" value="关闭" /></body>
</html>

这个时候点击开启已经可以实现弹’a‘啦，那么如何实现关闭功能。

clearInterval

因为以后我们的网页可能会有很多定时器，为了确保准确的关闭相应的定时器，我们需要给定时器加个名字，这里加的名字叫timer。
因为有些浏览器不支持弹窗的时候点击按钮，所以我们把时间间隔调长一点。

  <script>window.onload = ()=>{let oBtn1 = document.getElementById('btn1');let oBtn2 = document.getElementById('btn2');let timeroBtn1.onclick = ()=>{timer = setInterval(() => {alert('a');}, 3000);}oBtn2.onclick = ()=>{clearInterval(timer);}}</script>

clearTimeout

用于清除setTimeout

现在我们已经了解了定时器的功能，下面来做一个小东西

简易数码时钟案例

先看最终实现效果，比较有动力：

基本布局：

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><title>数码时钟</title><style>div{width: 500px;height: 100px;background-color: black;border-radius: 20px;margin:50px auto;}.img{display: flex;}img{flex: 1;}</style><script></script></head><body><div><div class="img">              <img src="img/0.png" alt=""><img src="img/0.png" alt=""><img src="img/10.png" alt=""><img src="img/0.png" alt=""><img src="img/0.png" alt=""><img src="img/10.png" alt=""><img src="img/0.png" alt=""><img src="img/0.png" alt=""></div></div></body>
</html>

img文件夹是这样的，名字对应数字，冒号名字是10。其中数字图片是用美图秀秀做的，很简单。
现在显示结果是这样的，布局完成啦

下面来说一下显示时间的实现原理:
我们先假设一个静态时间是07：34：21，那么如何将时间显示到时钟上呢？
我们定义一个字符串str，让它对应时间的数字顺序，因为我们的图片和数字是一一对应的，所以用一个for循环，将图片的路径修改成对应的数字就可以实现。

<script>window.onload = () => {let mynum = document.getElementsByTagName('img');let str = '073421' //假设时间是07：34：21for (let i = 0; i < mynum.length; i++) {mynum[i].src = 'img/' + str[i] + '.png';};}</script>

但是现在时间是固定的，而时钟的时间应该是实时的，我们用下面的方法来转化实时时间

 <script>//补零函数let zero=(n)=>{if(n<10){return '0'+n;}else{return ''+n;  }}window.onload = () => {let mynum = document.getElementsByTagName('img');let oDate = new Date();//得到当前时间let str = zero(oDate.getHours())+zero(oDate.getMinutes())+zero(oDate.getSeconds());alert(str);for (let i = 0; i < mynum.length; i++) {mynum[i].src = 'img/' + str[i] + '.png';};}</script>

补零函数：因为我们的时钟，时分秒都是显示两位数字，但是get到的是一位数，所以需要写一个函数，当是一位数时前面补一个零，而return’‘+n,这样的写法可以返回字符串型，直接get到的是数字。
现在可以实现显示实时的时间，但是还不能动态实现，需要手动去刷新。
这个时候加入定时器就可以完美解决问题啦，运用定时器每一秒执行一次函数，就可以实现时间的动态更新。
下面是完整代码

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><title>数码时钟</title><style>.body {display: flex;width: 500px;height: 100px;background-color: black;border-radius: 20px;margin: 50px auto;justify-content: center;align-items: center;}.img {display: flex;}img {flex: 1;}.colon {background: url("img/10.png") no-repeat;flex: 1;width: 50px;}</style><script>//补零函数let zero = (n) => {if (n < 10) {return '0' + n;} else {return '' + n;}}window.onload = () => {let mynum = document.getElementsByTagName('img');let tick = () => {let oDate = new Date();let str = zero(oDate.getHours()) + zero(oDate.getMinutes()) + zero(oDate.getSeconds());/* alert(str); */for (let i = 0; i < mynum.length; i++) {mynum[i].src = 'img/' + str[i] + '.png';};}tick();setInterval(tick, 1000);}</script>
</head><body><div class="body"><div class="img"><img src="img/0.png" alt=""><img src="img/0.png" alt=""><div class="colon"></div><img src="img/0.png" alt=""><img src="img/0.png" alt=""><div class="colon"></div><img src="img/0.png" alt=""><img src="img/0.png" alt=""></div></div>
</body></html>

今天的分享就到这里啦~(¦3[▓▓] 晚安