基于JavaScript实现自动更新倒计时效果


Posted in Javascript onDecember 19, 2016

实现倒计时效果需要掌握js中的两个知识点:
1、setTimeout函数 每隔1秒钟更新秒钟时间
2、Date对象 计算时间差

下面贴出 元旦倒计时代码

<!DOCTYPE html>
<html>
 <head>
 <title>example.html</title>

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script>

 //定义计时器,每隔1秒钟调用timer函数
 var timerCount= window.setTimeout("timer()",1000);
 function timer(){
 var date=new Date("2017","1","1","0","0","0");
 var deadlineTime=date.getTime();
 var nowDate=new Date();
 var nowTime=nowDate.getTime();
 var distTime=deadlineTime-nowTime;
 //判断是否到达时间期限
 if(distTime>0){
 var d=Math.floor(distTime/1000/3600/24);
 var h=Math.floor(distTime/1000/3600%24);
 var m=Math.floor(distTime/1000/60%60);
 var s=Math.floor(distTime/1000%60);
 var str="距离2017年元旦还有"+d+"天"+h+"时"+m+"分"+s+"秒";
 document.getElementById("timeout").innerHTML=str;
 timerCount= window.setTimeout("timer()",1000); 
 }
 else{
 //到达时间期限的时候清楚计时器;
 window.clearTimeout(timerCount);
 alert("时间已到");
 }

 }
 </script>
 </head>

 <body>
 <p id="timeout"> </p>

</html>

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

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
You might like
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
为你总结一些php信息函数
2015/10/21 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
详解axios在node.js中的post使用
2017/04/27 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python 异常处理总结
2016/10/18 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python 初始化一个定长的数组实例
2019/12/02 Python
李开复演讲稿
2014/05/24 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014司机年终工作总结
2014/12/05 职场文书
爱的承诺书
2015/01/20 职场文书
2015年社区文体活动总结
2015/03/25 职场文书