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 相关文章推荐
jquery键盘事件使用介绍
Nov 01 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
Javascript Worker子线程代码实例
Feb 20 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来计算某个目录大小的方法
2014/04/01 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python装饰器练习题及答案
2019/11/01 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
客服文员岗位职责
2013/11/29 职场文书
庆七一活动方案
2014/01/25 职场文书
老公爱的承诺书
2014/03/31 职场文书
读书活动总结
2014/04/28 职场文书
市场推广策划方案
2014/06/02 职场文书
体育比赛口号
2014/06/09 职场文书
工作失职自我检讨书
2015/05/05 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
结婚典礼主持词
2015/06/29 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android