[原创]菜鸟应用JAVASCRIPT 之简易闹钟程序(页 1) - JavaScript论坛

编程之星 发表于 2007-9-2 20:38

[原创]菜鸟应用JAVASCRIPT 之简易闹钟程序

*/ -------------------------------------------------------------------------------------- */ 出自：编程中国 http://www.bc-cn.net */ 作者：编程之星 E-mail：rostar@126.com QQ：150163704 */ 时间： 2007-9-2 编程论坛首发 */ 声明：尊重作者劳动，转载请保留本段文字 */ -------------------------------------------------------------------------------------- 
 菜鸟应用JAVASCRIPT 之简易闹钟程序 ——编程之星 2008-9-2 大家好,今天我们来学习一下用Javascript来写出一个简单的网页闹钟程序.先简单地介绍一下这个简单的程序吧.该程序能够在你设定的时间(响铃时间)到后给你提示,当然你可以自定义提示信息,你还可以设置在指定的时间到后播放你所指定的歌曲,用来提醒你,你设置的时间已经到了,这样就达到这类似闹钟的效果啦.其实还有其他方法来实现闹钟效果的,我曾经用VBscript来写过一个闹钟程序,所采用的算法就和本程序采用的不一样, 也许本程序所采用的算法比较笨,这可能和本人的IQ有关,采用这种算法的原因除了本人比较笨以外,还有就是Javascript和VBscript语言本身的差异,尽管这个闹钟程序很简单了,但用VBscript可以更加简单的实现(这是我的个人愚见). 程序测试连接:<a href="http://rostar.xinwen520.net/简易闹钟程序.html" target="_blank" >http://rostar.xinwen520.net/简易闹钟程序.html </A> 程序完整源代码: 
<DIV class=htmlcode>
<html> <head> <script> var AlarmTimeSet=new Date(); function AlarmClock() { var AlarmMessage=SMS.value; var TimeNowSet=new Date(); var AlarmTime=new Date(AlarmTimeSet.getFullYear(),AlarmTimeSet.getMonth()+1,AlarmTimeSet.getDate(),H.value,M.value,S.value); var TimeNow=new Date(TimeNowSet.getFullYear(),TimeNowSet.getMonth()+1,TimeNowSet.getDate(),TimeNowSet.getHours(),TimeNowSet.getMinutes(),TimeNowSet.getSeconds()) if(TimeNow.getTime() == AlarmTime.getTime()) { if(OPENMUSIC.checked) { document.write("<embed autostart='true' src="+MUSIC.value+">"); document.write(""); document.write("<a href='javascript:history.back()'>返回闹钟程序</a>"); } if(AlarmMessage=="") { alert("时间到啦"); }else{ alert(AlarmMessage); } return; }else if(AlarmTime.getTime() < TimeNow.getTime()){ alert("时间已过期"); return; } setTimeout("AlarmClock()",500); } </script> </head> <body> 提示信息<input id="SMS" size="30"> 音乐地址<input id="MUSIC" size="30"> <input id="OPENMUSIC" type="checkbox">音乐播放 设定闹钟时间:
时<input id="H" size="5"> 分<input id="M" size="5"> 秒<input id="S" size="5"> <button onclick="AlarmClock()">确定</button> </body> </html> </DIV>
程序分析: 该程序比较简单!首先我们来看看第1句代码var AlarmTimeSet=new Date(); 这表示创建一个Date对象AlarmTimeSet.接下来我们看看AlarmClock()函数的内部. 在函数内部,我们首先看到var AlarmMessage=SMS.value;这句表示用户自定义的闹钟提示信息.然后看到第二句var TimeNowSet=new Date();TimeNowSet对象用来对当前时间的设置,应该闹钟的程序原理就是用当前的时间和设定的时间相对比,如果当前的时间和设定的时间一致的话,那么闹钟就应该响铃了.下面来看看比较长的一句var AlarmTime=new Date(AlarmTimeSet.getFullYear(),AlarmTimeSet.getMonth()+1,AlarmTimeSet.getDate(),H.value,M.value,S.value);这表示设定要响铃的时间, getFullYear()、getMonth()、getDate()都是Javascrip内部对象Date的方法,分别代表取得年份(4位)、月份(0~11之间)、日期(1~31之间), H.value、M.value、S.value就分别是提取时、分、秒了,这样闹钟的响铃时间就已经设定了.接下来,我们来看看更长的一句var TimeNow=new Date(TimeNowSet.getFullYear(),TimeNowSet.getMonth()+1,TimeNowSet.getDate(),TimeNowSet.getHours(),TimeNowSet.getMinutes(),TimeNowSet.getSeconds());这表示最终设定当前的时间,因为Javascript对时间对象的操作要比VBscript复杂一些,所以代码就要长一些. getHours()、getMinutes()、getSeconds()分别代表取得Date对象的时、分、秒.到这里当前时间和响铃时间都已经设置好啦,那么现在就要开始下面的代码了,下面的代码是嵌套的if结构块.先看外层的if结构吧, if(TimeNow.getTime() == AlarmTime.getTime())这表示如果当前的时间和响铃的时间一致,那么就执行外层if结构块内部的两个if结构.否则如果AlarmTime.getTime()< TimeNow.getTime()就提示时间已经过期.如果到了响铃的时间,即TimeNow.getTime()== AlarmTime.getTime(),那么就开始判断”音乐播放”复选框是否选取,如果点取的该复选框(OPENMUSIC.checked)那么就播放歌曲,document.write(…)这几句代码不用解释了吧.如果”提示信息”文本框没有填入提示信息,那么就采用默认的提示信息—“时间到啦”,如果填写了提示信息,那么就弹出设置的提示信息.然后,return语句表示返回(退出)该函数. setTimeout("AlarmClock()",500);表示每隔半秒就递归执行一次AlarmClock()函数,检测当前时间是否和响铃的时间一致.
总结: 程序分析完毕,希望大家有收益. 大家可以下载此程序代码 [attach]26965[/attach]
 编程之星的菜鸟应用JAVASCRIPT系列: <a href="http://bbs.bc-cn.net/viewthread.php?tid=136723&star=at#" target="_blank" >菜鸟应用JAVASCRIPT 之简单图片浏览 </A> <a href="http://bbs.bc-cn.net/viewthread.php?tid=167244&star=at#" target="_blank" >菜鸟应用JAVASCRIPT 之随机广告程序 </A> <a href="http://bbs.bc-cn.net/viewthread.php?tid=166509&star=at#" target="_blank" >菜鸟应用JAVASCRIPT 之简易网页音乐播放程序</A> 
[align=right][color=#000066][此贴子已经被作者于2007-9-2 22:57:06编辑过][/color][/align]

zhongx 发表于 2007-9-8 20:31

很好的一个小程序,可惜不能设置日期,如能做到在其它的页面显示提示更隹.

编程之星 发表于 2007-9-9 17:51

如果连设置日期的功能也写进去的话并不难实现,但好像不大现实,一般很少有人将一个网页一直打开多少天的时间吧. 如果大家喜欢的话,也可以自己改进呀.

xinxue 发表于 2007-12-2 15:23

回复 1# 的帖子

写的不错,支持

页: [1]

[原创]菜鸟应用JAVASCRIPT 之 简易闹钟程序

回复 1# 的帖子

[原创]菜鸟应用JAVASCRIPT 之简易闹钟程序