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

实现倒计时效果需要掌握js中的两个知识点：

1、setTimeout函数每隔1秒钟更新秒钟时间

2、Date对象计算时间差

下面贴出元旦倒计时代码

example.html

//定义计时器，每隔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("时间已到");

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html自动刷新倒计时,基于JavaScript实现自动更新倒计时效果相关推荐

怎么让html自动刷新,“360浏览器怎么设置自动刷新网页解决方案”的解决方案...
问题描述:如何设置360浏览器的自动刷新功能解决方案: 1.安装360安全浏览器和360极速浏览器.如果你的浏览器不是360的,那么先打开360安全卫士,找到"软件管家",找到& ...
php ajax 考试倒计时,基于Ajax技术实现考试倒计时并自动提交试卷
1.概述在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访问准备考试页面index.jsp,在该页面中, ...
android 自动偷能量,基于javascript语言写的在安卓上运行的蚂蚁森林自动偷能量auto.js脚本...
目前算法比较粗略,是基于能量可能出现的范围,模拟点击,所以效率有点低,但是简单易懂,适合学习这是复制过来的代码,刚才改动了一下,有一丢丢可能混入了中文标点附上源码: sleep(5000) var ...
java中自动刷新的语句_页面自动刷新代码大全
页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面. 1) 10表示间隔10秒刷新一次 2) window.location.reload(true); 如果是 ...
计算机桌面一直刷新,win7自动刷新桌面怎么办_win7一直自动刷新桌面的解决方法...
很多用户使用win7 64位旗舰版系统的时候,都会经常对桌面进行刷新,来保持电脑的流畅性.但最近就有网友表示自己的电脑出现了自动刷新桌面的情况.很是烦恼不知道怎么办.那下面小编就来给大家分享win7一 ...
html抢购倒计时,基于JS实现限时抢购倒计时间表代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: 限时抢购倒计时间表 *{margin:0;padding:0;} #content{width:300px;margin:0 auto;paddi ...
删除表格数据后自动刷新_Calliope: 表格数据的自动故事生成系统
视觉数据故事以叙事可视化的形式呈现,如海报或数据视频,通常用于面向数据的故事讲述中,以促进对故事内容的理解和记忆.虽然有用,但技术障碍(如数据分析.可视化和脚本)使可视化数据故事的生成变得困难.现有的 ...
html增删改后让table自动刷新,vue如何实现表格增删改查效果
vue如何实现表格增删改查效果发布时间:2021-04-23 14:34:54 来源:亿速云阅读:90 作者:小新小编给大家分享一下vue如何实现表格增删改查效果,相信大部分人都还不怎么了解,因 ...
android hotseat自动排列,Hotseat 自动排列（基于AndroidO版本实现iPhone居中效果）
hi what's up! 我是博主illa! 今天给大家介绍一下在android O版本 launcher3实现的 Hotseat 图标自动排列! 思路:要实现图标自动排列,首先要在每一个图标移除以 ...

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

html自动刷新倒计时,基于JavaScript实现自动更新倒计时效果相关推荐

最新文章

热门文章