matlab 自制闹钟程序,原生JS写的一个简单闹钟程序

之前在学jq,现在要反过来学习js,想脱离框架用原生代码写特效。至少省了那90多kb的服务器资源请求。于是就从最简单的开始,写了个闹钟程序,开着电脑睡觉的人有福利了,打开这个网页,设置下闹铃时间,安心睡去吧。时间到后或超过设定的时间铃声自动响起。

现在是北京时间:

请设定你的闹铃时间:

window.οnlοad=function(){//网页加载完成后才执行以下代码

qiuye_shiz=document.getElementById('qiuye_shiz').value,//获取输入框的值

qiuye_fenz=document.getElementById('qiuye_fenz').value,//获取输入框的值

qiuye_miaoz=document.getElementById('qiuye_miaoz').value;//获取输入框的值

var input=document.getElementsByTagName('input');//取得input数组

var music=document.getElementById('music');//取得音乐所在标签

var gb=document.getElementById('qiuye_gb');//获取关闭按钮

for(i=0;i

input[i].οninput=function(){//每个输入框输入文字后执行以下代码

qiuye_shiz=document.getElementById('qiuye_shiz').value,//重新获取输入框的值

qiuye_fenz=document.getElementById('qiuye_fenz').value,//重新获取输入框的值

qiuye_miaoz=document.getElementById('qiuye_miaoz').value;//重新获取输入框的值

}}

function showtime(){//函数方法

var time=new Date();//获取本地时间

var minute=time.getMinutes();//获取分钟

var hou=time.getHours();//获取小时

var sec=time.getSeconds();//获取秒钟

var content=document.getElementById('yanshi_time');//获取yanshi_time标签

content.innerHTML=''+add_o(hou)+' : '+add_o(minute)+' : '+add_o(sec);//往标签里面插入内容,分别是小时+分钟+秒钟的字符串连接

var d1=hou>=qiuye_shiz&&minute>=qiuye_fenz&&sec>=qiuye_miaoz;

var d2=hou>=qiuye_shiz&&minute>qiuye_fenz;

var d3=hou>qiuye_shiz;

if(d1||d2||d3){//判断输入框的时间

if(!music.play()){music.play();}//响铃

content.style.color='red';//改变字体颜色为红色

}

else{music.pause();content.style.color='black';}//同理

}

showtime();//先执行一遍showtime函数

function add_o(m){//小时,分钟,秒钟数字小于10的往前补一个0,标准化时间格式

if(m<10){return '0'+m;}

else{return m;}

}

var timer=setInterval(showtime,1000);//设置定时器,每隔一秒执行一次showtime函数

gb.οnclick=function(){//关闭按钮被点击后关闭铃声

qiuye_shiz=24;

}}

在线演示:

29feac3a8a4ad7aee88385781b5a1804.gif以下是程序代码

网页闹钟+秋叶网络博客

现在是北京时间:

请设定你的闹铃时间:

提示:可以先修改部分代码再运行

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值