编程 Javascript

基于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实现自动更新倒计时效果

- Author -

zxz32384

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery实现弹出层分享微博插件具备动画效果

Apr 03 Javascript

Jquery操作radio的简单实例

Jan 06 Javascript

网页中JS函数自动执行常用三种方法

Mar 30 Javascript

关于JS中的apply,call,bind的深入解析

Apr 05 Javascript

Bootstrap Table使用方法详解

Aug 01 Javascript

JS禁止查看网页源代码的实现方法

Oct 12 Javascript

PHP捕捉异常中断的方法

Oct 24 Javascript

通过BootStrap-select插件 js jQuery控制select属性变化

Jan 03 Javascript

基于Node.js的WebSocket通信实现

Mar 11 Javascript

详解vue-cli + webpack 多页面实例应用

Apr 25 Javascript

vue 表单输入格式化中文输入法异常问题

May 30 Javascript

vuex + keep-alive实现tab标签页面缓存功能

Oct 17 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