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 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
javascript打开word文档的方法
Apr 16 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
js获取json元素数量的方法
Jan 27 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
Jquery ajax基础教程
Nov 20 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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
短波问题解答
2021/02/28 无线电
PHP print类函数使用总结
2010/06/25 PHP
解析php中const与define的应用区别
2013/06/18 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
替换python字典中的key值方法
2018/07/06 Python
Django开发的简易留言板案例详解
2018/12/04 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
工作评语大全
2014/04/26 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
答辩状格式范本
2015/05/22 职场文书
老兵退伍感言
2015/08/03 职场文书