js带闹铃功能的倒计时代码


Posted in Javascript onSeptember 29, 2016

Js倒计时代码,带闹铃功能,自定义闹钟倒计时功能,点击开始按钮,即可开始倒数,代码不是太复杂,新手应该能看懂,代码分享给大家。
效果图:

js带闹铃功能的倒计时代码

源码:

<html> 
<head> 
<title>Js倒计时,闹铃功能</title> 
<script language="javascript"> 
function $(id){ 
 return document.getElementById(id); 
} 
function down(){ 
 $("second").value-=1; 
 
 if($("second").value==0&&$("minutes").value==0&&$("hours").value==0) 
 { 
 window.alert("干正事了!!!"); 
 clearInterval(timeout); 
  
 } 
 
 
 if($("second").value==-1) 
 { 
 $("second").value=59; 
 $("minutes").value-=1; 
 } 
 if($("minutes").value==-1) 
 { 
 $("minutes").value=59; 
 $("hours").value-=1; 
 } 
} 
var timeout; 
function begin(){ 
 timeout=setInterval("down()",1000); 
} 
function stop(){ 
 clearInterval(timeout); 
} 
var dt=new Date(); 
function setclock() 
{ 
 var hours=$("clock_hours").value-dt.getHours(); 
 var minutes=$("clock_minutes").value-dt.getMinutes(); 
 if(minutes<0) 
 { 
 if(hours<0) 
 { 
 $("minutes").value=60-Math.abs(minutes); 
 $("hours").value=24-Math.abs(hours); 
 } 
 else if(hours==0) 
 { 
 $("minutes").value=60-Math.abs(minutes); 
 $("hours").value=Math.abs(hours); 
 } 
 else 
 { 
 $("minutes").value=60-Math.abs(minutes); 
 $("hours").value=Math.abs(hours)-1; 
 } 
 } 
 else if(minutes==0) 
 { 
 if(hours<0) 
 { 
 $("minutes").value=Math.abs(minutes); 
 $("hours").value=24-Math.abs(hours); 
 } 
 else if(hours==0) 
 { 
 $("minutes").value=Math.abs(minutes); 
 $("hours").value=Math.abs(hours)+24; 
 } 
 else 
 { 
 $("minutes").value=Math.abs(minutes); 
 $("hours").value=Math.abs(hours); 
 } 
 } 
 else 
 { 
 if(hours<0) 
 { 
 $("minutes").value=60-Math.abs(minutes); 
 $("hours").value=24-Math.abs(hours); 
 } 
 else if(hours==0) 
 { 
 $("minutes").value=Math.abs(minutes); 
 $("hours").value=Math.abs(hours); 
 } 
 else 
 { 
 $("minutes").value=Math.abs(minutes); 
 $("hours").value=Math.abs(hours); 
 } 
 } 
} 
function reset() 
{ 
 var time=document.getElementsByName("time"); 
 for(i=0;i<time.length;i++) 
 { 
 time[i].value=0; 
 } 
} 
</script> 
</head> 
<body> 
距闹铃响起的时间还有:<input type="text" id="hours" style="width:20px" value="0" name="time" /> 
:<input type="text" id="minutes" value="0" style="width:20px" name="time"/>: 
<input type="text" id="second" value="0" style="width:20px" name="time"/><br/> 
<input type="text" id="clock_hours" value="0" style="width:20px" name="time"/>时: 
<input type="text" id="clock_minutes" value="0" style="width:20px" name="time"/>分<br/> 
<input type="button" value="设置闹钟" onclick="setclock()" /> 
<input type="button" value="重置" onclick="reset()" /><br/> 
<input type="button" value="开始" onclick="begin()"> 
<input type="button" value="停止" onclick="stop()"> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 #Javascript
运用js教你轻松制作html音乐播放器
Apr 17 #Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 #Javascript
聊一聊JS中的prototype
Sep 29 #Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 #Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 #Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 #Javascript
You might like
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python实现简易内存监控
2018/06/21 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
基于Python的PIL库学习详解
2019/05/10 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
给同事的道歉信
2014/01/11 职场文书
《识字五》教学反思
2014/03/01 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android