网页闹钟JS代码

  • A+
所属分类:美化特效

网页闹钟JS代码

有时候我们会突然忘记在什么时间段做什么事情,

你可能会使用手机设置一个闹钟,如果再给电脑设置一个,那不是更好么?

网页闹钟JS代码

这里就是闹钟的效果了。。。

设置好时间和音乐,到时间了会自动播放音乐,这样就可以提醒你了。

JS代码

 

  1. 现在是北京时间:<span?id='yanshi_time'></span><br/>
  2. <audio?src='你的音乐文件地址'?preload='auto'?id='music'></audio>
  3. 请设定你的闹铃时间:
  4. <input?type='number'?value='08'?id='qiuye_shiz'?size='1'?min='0'?max="23">
  5. <input?type='number'?value='30'?id='qiuye_fenz'?size='1'?min='0'?max="59">
  6. <input?type='number'?value='00'?id='qiuye_miaoz'?size='1'?min='0'?max="59">
  7. <input?type='button'?value='关闭闹钟'?id='qiuye_gb'?size=2>
  8. <script>
  9. window.onload=function(){//网页加载完成后才执行以下代码
  10. qiuye_shiz=document.getElementById('qiuye_shiz').value,//获取输入框的值
  11. qiuye_fenz=document.getElementById('qiuye_fenz').value,//获取输入框的值
  12. qiuye_miaoz=document.getElementById('qiuye_miaoz').value;//获取输入框的值
  13. var?input=document.getElementsByTagName('input');//取得input数组
  14. var?music=document.getElementById('music');//取得音乐所在标签
  15. var?gb=document.getElementById('qiuye_gb');//获取关闭按钮
  16. for(i=0;i<input.length;i++){//for循环
  17. input[i].oninput=function(){//每个输入框输入文字后执行以下代码
  18. qiuye_shiz=document.getElementById('qiuye_shiz').value,//重新获取输入框的值
  19. qiuye_fenz=document.getElementById('qiuye_fenz').value,//重新获取输入框的值
  20. qiuye_miaoz=document.getElementById('qiuye_miaoz').value;//重新获取输入框的值
  21. }}
  22. function?showtime(){//函数方法
  23. var?time=new?Date();//获取本地时间
  24. var?minute=time.getMinutes();//获取分钟
  25. var?hou=time.getHours();//获取小时
  26. var?sec=time.getSeconds();//获取秒钟
  27. var?content=document.getElementById('yanshi_time');//获取yanshi_time标签
  28. content.innerHTML=''+add_o(hou)+'?:?'+add_o(minute)+'?:?'+add_o(sec);//往标签里面插入内容,分别是小时+分钟+秒钟的字符串连接
  29. var?d1=hou>=qiuye_shiz&&minute>=qiuye_fenz&&sec>=qiuye_miaoz;
  30. var?d2=hou>=qiuye_shiz&&minute>qiuye_fenz;
  31. var?d3=hou>qiuye_shiz;
  32. if(d1||d2||d3){//判断输入框的时间
  33. if(!music.play()){music.play();}//响铃
  34. content.style.color='red';//改变字体颜色为红色
  35. }
  36. else{music.pause();content.style.color='black';}//同理
  37. }
  38. showtime();//先执行一遍showtime函数
  39. function?add_o(m){//小时,分钟,秒钟数字小于10的往前补一个0,标准化时间格式
  40. if(m<10){return?'0'+m;}
  41. else{return?m;}
  42. }
  43. var?timer=setInterval(showtime,1000);//设置定时器,每隔一秒执行一次showtime函数
  44. gb.onclick=function(){//关闭按钮被点击后关闭铃声
  45. qiuye_shiz=24;
  46. }}
  47. </script>

其他的自行修改即可,其实还有其他闹钟程序,加上动画的HTML5闹钟,都是挺不错的。

网页闹钟JS代码

历史上的今天:

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: