运行时会取出当前日期、星期、时间显示出来,且时钟是活的,其时、分、秒数会随着时间的流逝而变化,且界面炫丽。界面酷逼,实际上是图片的功劳,比如日期、日期的数字就是由象下列那些图片拼起来的
时间是由时、分、秒三部分组成,如12:12:12,而在这个例子里,我们是用对应的数字图片来展示时间的,所以要使用六张图片,先设计出页面:
我们new出一个Date来:var oDate=new Date();根据前面我们所讲的Date的知识,这个oDate对象会自动把当前日期和时间保存为其初始值,也就是此时的oDate里什么都有了,既有时间,还有日期。
那么我们使用Date对象的获取时、分、秒的方法,把时、分、秒获取出来并用字符串连接符拼接成一个字符串不就OK了吗:
setInterval()与setTimeout()就是这两种定时器,一个是无限循环的,一个是只执行一次,这是它们的最大区别。
我们不断刷新,程序就会不断加载,当秒数小于10,即不是两位数时,就会出现上示错误。如果当前时间是21:01:36时,它的错误还很离谱:
说到这里,我们也许会想到数组,而实际上字符串也有此功效的,如字符串s=’abcde’,其s[0]就是a,s[1]就是b,s[2]就是c,……
这个当前时间是我们指定的,是死的。下面我们要改进的是让程序自己去获得当前时间,然后把它拼接成字符串,代替我们手写的那个字符串。
setInterval()有两个参数,第一个参数是一个函数名,第二个参数是一个数字,其单位默认是毫秒,setInterval(show, 1000)则表示按照指定的周期1000毫秒来调用指定的函数show,而且这个方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。
这个字符串是108(你的调试时间不同这个值将不同),查看系统时间,将发现它是把20:41:47中的时、分、秒以数字相加起来的204147=108,原来getHours()、getMinutes()、getSeconds()返回的结果是数字型的,所以此处的便不是字符串的拼接,而是真正的加了。
这样以来,上例运行时会每隔1秒显示一个提示窗(因提示窗的阻断,不是自动地不断显示提示窗,而是你单击确定按钮后的1秒内显示下一个提示窗)。
第二种是延时型:setTimeout(),它仍是那两个参数,运行情况是等待第二个参数所指定的时间过去后才去执行第一个参数所指定的函数,不过只执行一次便结束。
new关键字我们在学习数组时曾接触过,它是创建对象的关键字,待以后我们学习到面向对象时会详细讲解,此处大家只需知道现在是用它来创建了一个Date对象即可。
JavaScript的资料很多,但从未从头到尾学完过。偶遇blue老师的被荣为“最经典的JavaScrip视频教程”后,爱不释眼,笔记过程中奇想何不笔录下来,故有此教程。教程中夹有个人的理解,由于水平有限,请以blue老师的讲解为准。
程序运行后,当我们单击“开启”按钮后,该按钮的onclick事件被激活,执行其中的事件代码,这次我们就不像前例那样只是开启了,而是在开启的同时把它返回的ID值存放在变量timer中。定时器激活后,会每隔1秒弹出一个窗口,且会无限循环下去。
当我们单击“关闭”后,该按钮的onclick事件被激活,执行其中的事件代码,clearInterval(timer);这句就会把由参数timer指定的定时器清除掉,也就是关闭。
关键在于这个图片编号怎么去确定呢?怎样让程序知道,i=0时即第一张图片名是1,i=1时即第二张图片名是3,……。而且这个时间数字在不同的时候,其值又是不同的。
我们做这样的一个设想,假设有一个东西,它与img数组一样大,但它里面是按时分秒的顺序存放这些时间数字,那么我们就可根据img的循环变量i去依次取出这些数字号不就可以了吗。
假设当前时间是13:23:21,那么页面中的第一个img元素,其src属性就应该修改为img/1.png,第二个修改为img/3.png,第三个修改为img/2.png,依次类推。
img元素已经在aImg这个数组里了,那么我们使用for循环把它们取出来分别进行设置即可完成了: