JavaScript-—数码时钟（运用定时器）

首先准备10张数字图片，分别是0-9就可以啦；直接上代码：

前端部分：

<button id="btn1" type="button">开启</button><button id="btn2" type="button">停止</button><div id="box"><img src="data:images/0.png"><img src="data:images/0.png"><b>:</b><img src="data:images/0.png"><img src="data:images/0.png"><b>:</b>                        <img src="data:images/0.png"><img src="data:images/0.png"></div>

JavaScript部分：

<script type="text/javascript">var oimg=document.getElementsByTagName('img');var obtn1=document.getElementById('btn1');var obtn2=document.getElementById('btn2');var timer=null;function MyTime(){function toDouble(n){if(n<10){return '0'+n;}else{return ''+n;}}function showtime(){var odate=new Date();var str=toDouble(odate.getHours())+toDouble(odate.getMinutes())+toDouble(odate.getSeconds());for(var i=0;i<oimg.length;i++){oimg[i].src="data:images/"+str.charAt(i)+".png";}}                                            timer=setInterval(showtime,1000);showtime(); }obtn1.onclick=function(){MyTime();}obtn2.onclick=function(){clearInterval(timer);}</script>

效果图：点击开始即获取当前时间，点击关闭即停止！

JavaScript-—数码时钟（运用定时器）相关推荐

JavaScript之数码时钟
下面,我就教大家如何利用JavaScript做一个简单的数码时钟. 在做之前我们需要在网上找到从0-9的10张数字图片,保存到一个文件夹里面,并将数字图片对应为相应的数字,作为我们的素材工具. 具体步 ...
基于JavaScript的数码时钟
用JavaScript+html+css做的一个简易的数码时钟,具有一定的观赏性,Demo效果: 具体步骤如下: 数码时钟的做法思路就是:给出六张图片,分别对应"时分秒"六个数字, ...
JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）
运用JS的innerHTML,和for循环实现日历小部件内容和日期的转换. <!DOCTYPE html> <html> <head><title>日历 ...
javascript实现的数码时钟
*注意每个分割图片和时间显示图片的位置  <!-- <script type="text/javascript&q ...
js定时器与数码时钟案例（源码及备注）
js定时器与数码时钟案例开启定时器 1.setInterval 间隔型 setInterval(参数一,参数二); 第一个参数是一个函数,第二个参数是时间(单位是毫秒) 意思就是每隔多长时间执行一次 ...
定时器的实战--数码时钟
定时器的作用:规定每隔多少时间会做某个事情. 1.开启定时器: setInterval(函数,间隔时间):等一秒中才会执行,间隔型,一旦启动便不会停止. setTimeout(函数,间隔时间):延时型 ...
定时器的应用（三）：数码时钟
数码时钟数码时钟:也可以称为电子表,是应用实时定时器的典型案例.下面我来为大家介绍一下如何做成以下形式的数码时钟. (上面所有的数字.文字都是图片形式的.) (一)首先,我们用HTML语句来搭建一个 ...
使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写的代码的情况下提供了深层次的自定义.有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活. 在参考许多现有的解决 ...
html如何添加时钟效果,五步轻松实现JavaScript HTML时钟效果
这篇文章主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章学了一 ...
如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

JavaScript-—数码时钟（运用定时器）

JavaScript-—数码时钟（运用定时器）相关推荐

最新文章

热门文章