用 js 实现倒计时

【操作步骤】

（1) 使用 new Date() 获取当前时间，使用 new 调用一个带有参数的 Date 对象，定义结束的时间，endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后，求两个时间差。

把时间差转换为天数、小时数、分钟数和秒数显示。主要是用%取模运算。得到距离结束时间的毫秒数（剩余毫秒数），除以 1000 得到剩余秒数，再除以 60 得到剩余分钟数，再除以 60 得到剩余小时数。除以 24 得到剩余天数。剩余秒数 lefttime/1000 模 60 得到秒数，剩余分钟数 lefttime/(1000 * 60) 模 60 得到分钟数，剩余小时数 lefttime/(1000 * 60 * 60) 模 24 得到小时数。

完整代码如下：

var showtime = function () {

var nowtime = new Date(), //获取当前时间

endtime = new Date("2020/8/8"); //定义结束时间

var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数

leftd = Math.floor(lefttime/(1000*60*60*24)), //计算天数

lefth = Math.floor(lefttime/(1000*60*60)%24), //计算小时数

leftm = Math.floor(lefttime/(1000*60)%60), //计算分钟数

lefts = Math.floor(lefttime/1000%60); //计算秒数

return leftd + "天" + lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串

}

（2) 使用定时器设计每秒钟调用倒计时函数一次。

var div = document.getElementById("showtime");

setInterval (function () {

div.innerHTML = showtime();

}, 1000); //反复执行函数本身

用 js 实现倒计时相关推荐

js php 获取时间倒计时_,js实现倒计时及时间对象
JS实现倒计时效果代码如下: 无标题文档h #box { width: 100%; height: 400px; background: black; color: #fff; font-size:4 ...
Ext JS 4倒计时：开发者预览版
作为Ext JS团队的代表,我很高兴地宣布第一个Ext JS 4开发者预览版发布了.Ext JS 4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架.从生成HTML代码到类 ...
html 倒计时特效,JS节日倒计时特效(精确到毫秒)
JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...
原生JS活动倒计时实现思路
原生JS活动倒计时实现思路由于一个活动页面里面有多个活动,所以用map去操作每一个对象,只有一个活动的话就不需要遍历了,活动分为距离活动开始和距离活动结束两个倒计时,自己可按需求增减代码.还有就是I ...
分享75个JS特效倒计时，总有一款适合您
分享75个JS特效倒计时,总有一款适合您 75个JS特效倒计时下载链接:https://pan.baidu.com/s/1SntVvt85nhN3JgqcsTFY6Q?pwd=q27q 提取码:q2 ...
JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒（小时数累加）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS ...
js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式  <div class="timing" ...
html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...
html+js实现倒计时显示
html+js实现倒计时 <!DOCTYPE html> <html lang="en"><head><title>倒计时</ ...

用 js 实现倒计时

用 js 实现倒计时相关推荐

最新文章

热门文章