网页闹钟 JS 代码

  • 网页闹钟 JS 代码已关闭评论
  • 314 views
  • 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 代码

历史上的今天:

唯心寒辞