js前端如何写一个精确的倒计时代码

2024-12-05 18:19:29

关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确。如果用户修改了他的设备时间，这样的倒计时就没有意义了。今天就说说写一个精确的倒计时的方法。

原理

众所周知 setTimeout 或者 setInterval 调用的时候会有微小的误差。有人做了一个 demo 来观察这个现象并对其做了修正。短时间的误差倒也可以接受，但是作为一个长时间的倒计时，误差累计就会导致倒计时不准确。

因此我们可以在获取剩余时间的时候，每次 new 一个设备时间，因为设备时间的流逝相对是准确的，并且如果设备打开了网络时间同步，也会解决这个问题。

但是，如果用户修改了设备时间，那么整个倒计时就没有意义了，用户只要将设备时间修改为倒计时的 endTime 就可以轻易看到倒计时结束是页面的变化。因此一开始获取服务端时间就是很重要的。

简单的说，一个简单的精确倒计时原理如下：

初始化时请求一次服务器时间 serverTime，再 new 一个设备时间 deviceTime
deviceTime 与 serverTime 的差作为时间偏移修正
每次递归时 new 一个系统时间，解决 setTimeout 不准确的问题

代码

获取剩余时间的代码如下：

/**
 * 获取剩余时间
 * @param {Number} endTime  截止时间
 * @param {Number} deviceTime 设备时间
 * @param {Number} serverTime 服务端时间
 * @return {Object}      剩余时间对象
 */
let getRemainTime = (endTime, deviceTime, serverTime) => {
  let t = endTime - Date.parse(new Date()) - serverTime + deviceTime
  let seconds = Math.floor((t / 1000) % 60)
  let minutes = Math.floor((t / 1000 / 60) % 60)
  let hours = Math.floor((t / (1000 * 60 * 60)) % 24)
  let days = Math.floor(t / (1000 * 60 * 60 * 24))
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  }
}

获取服务器时间可以使用 mtop 接口 mtop.common.getTimestamp

然后可以通过下面的方式来使用：

// 获取服务端时间（获取服务端时间代码略）
getServerTime((serverTime) => {

  //设置定时器
  let intervalTimer = setInterval(() => {

    // 得到剩余时间
    let remainTime = getRemainTime(endTime, deviceTime, serverTime)

    // 倒计时到两个小时内
    if (remainTime.total <= 7200000 && remainTime.total > 0) {
      // do something

    //倒计时结束
    } else if (remainTime.total <= 0) {
      clearInterval(intervalTimer);
      // do something
    }
  }, 1000)
})

这样的的写法也可以做到准确倒计时，同时也比较简洁。不需要隔段时间再去同步一次服务端时间。

补充

在写倒计时的时候遇到了一个坑这里记录一下。

千万别在倒计时结束的时候请求接口。会让服务端瞬间 QPS 峰值达到非常高。

如果在倒计时结束的时候要使用新的数据渲染页面，正确的做法是：

在倒计时结束前的一段时间里，先请求好数据，倒计时结束后，再渲染页面。

关于倒计时，如果你有什么更好的解决方案，欢迎评论交流。

一个不错的js html页面倒计时可精确到秒

一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>
js网页实时倒计时精确到秒级

一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来帮助! 效果如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type
基于javascript实现精确到毫秒的倒计时限时抢购

这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下一.效果图下面的图片就是聚划算上面的限时抢的效果二.实现限时抢的效果需要用到的知识 :Javascript Date()对象 Date()返回当前的日期和事件 getYear()返回年份获得年最好用 getFullYear()方法来操作(完整格式如2016) getMonth()返回月份值(从0开始,+1) getDay()返回星期几(0-6) getHours()返回小时数(0-23
js实现精确到秒的倒计时效果

本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下效果图: 1.倒计时效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>倒计时</title> <link rel="stylesheet" href="css/common.css" type="text/css&quo
js实现精确到毫秒的倒计时效果

本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
javascript实现倒计时（精确到秒）

代码相当简单实用,这里就不多废话了,小伙伴们简单看下就能明白 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
js前端如何写一个精确的倒计时代码

关于写倒计时大家可能都都比较熟悉,使用 setTimeout 或 setInterval 就可以搞定.几秒钟或者几分钟的倒计时这样写没有问题,但是如果是长时间的倒计时,这样写就会不准确.如果用户修改了他的设备时间,这样的倒计时就没有意义了.今天就说说写一个精确的倒计时的方法. 原理众所周知 setTimeout 或者 setInterval 调用的时候会有微小的误差.有人做了一个 demo 来观察这个现象并对其做了修正.短时间的误差倒也可以接受,但是作为一个长时间的倒计时,误差累计就会导致倒计
js和css写一个可以自动隐藏的悬浮框

今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态: 左边那一条窄线就是隐藏以后的悬浮框. 显示状态: 当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CSS样式:
Three.js 再探 - 写一个微信跳一跳极简版游戏

那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧源码地址: github.com/luosijie/th- 由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好下面是实现过程游戏分析首先分析一下一个这样的游戏需要什么元素 Three.js必备元素: 场景,灯光,摄像机一块又一块的方块会跳的那个 ,或者叫游戏者以上游戏过程初始一个场景, 场景中有一个会跳的那个和 2个方块鼠标按下储存能量值鼠标放
Vue写一个简单的倒计时按钮功能

在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}
通过vue写一个瀑布流插件代码实例

这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(i
js前端设计模式优化50%表单校验代码示例

目录表单校验背景常规写法: 策略模式介绍真实世界类比更广义的“算法” 策略模式的组成利用策略模式改写策略模式优缺点优点: 缺点: 策略模式适合应用场景总结表单校验背景假设我们正在编写一个注册页面,在点击注册按钮之时,有如下几条校验逻辑: 用户名不能为空密码长度不能少于6位手机号码必须符合格式常规写法: const form = document.getElementById('registerForm'); form.onsubmit = function () {
用Vue写一个分页器的示例代码

之前一直想要自己试着实现一个分页器,但是一直拖,今天写完,大概照着网易云音乐的样子来完成.这个小例子很简单,通过这个小例子,可以学习到Vue计算属性的使用,并了解到写分页器需要区分的情况.这篇文章会慢慢从头来实现这个小例子,相信你一定会学会,而且看完了我的思路之后说不定会有更棒的思路和想法! 实现的效果是这样子的: 一.先简单布局 <template> <div class="pageContainer"> <ul class="pagesInn
JS 删除字符串最后一个字符的实现代码

字符串:string s = "1,2,3,4,5," 目标:删除最后一个 "," 方法: 用的最多的是substring,这个也是我一直用的 s=s.substring(0,s.length-1) 最近老遇上这种事,如有一个字符串"[lightinthebox]",但是我只是需要lightinthebox,就是不要"[]".怎么用又快又有效的办法去掉呢. stringObject.substring(start,stop)
java两个线程同时写一个文件

本文实例为大家分享了java两个线程同时写一个文件的具体代码,供大家参考,具体内容如下 1.多线程线程是程序执行流的最小单元.是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其它线程共享进程所拥有的全部资源.一个线程可以创建和撤消另一个线程,同一进程中的多个线程之间可以并发执行.由于线程之间的相互制约,致使线程在运行中呈现出间断性.线程也有就绪.阻塞和运行三种基本状态.就绪状态是指线程具备运行的所有条
北京奥运会倒计时代码

2008北京奥运会开幕倒计时-我们_jb51.Net 一个简单的倒计时代码离2008北京奥运会开幕还有 function _fresh() { var endtime=new Date("August 8, 2008 20:00:00"); var nowtime = new Date(); var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000); if(leftsecond') document.get

js前端如何写一个精确的倒计时代码

相关推荐

随机推荐