基于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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
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
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
python中pyqtgraph知识点总结
2021/01/26 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
IBatis持久层技术
2016/07/18 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
工厂搬迁方案
2014/05/11 职场文书
团日活动总结模板
2014/06/25 职场文书
武当山导游词
2015/02/03 职场文书
母亲节寄语大全
2015/02/27 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
红白喜事主持词
2015/07/06 职场文书
周一给客户的问候语
2015/11/10 职场文书