广告
返回顶部
首页 > 资讯 > 前端开发 > html >js如何倒计时功能
  • 541
分享到

js如何倒计时功能

js 2022-10-19 08:10:06 541人浏览 八月长安
摘要

这篇文章主要介绍“js如何倒计时功能”,在日常操作中,相信很多人在js如何倒计时功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js如何倒计时功能”的疑惑有所帮助!接下来,

这篇文章主要介绍“js如何倒计时功能”,在日常操作中,相信很多人在js如何倒计时功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js如何倒计时功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

方案1:每次倒计时去服务端请求时间

//开启定时器
var timer = setInterval(function () {  
  //执行请求,获取当前服务端时间并进行相应操作
}, 1000);

这个方案对于稍微有点经验的开发人员来说,都知道是不可取的。因为这会给服务器造成无法想象的压力,导致应用崩溃。在这个页面停留一分钟,那么请求就发送了60次,假如此时有100个人在访问这个页面,那么一分钟就有6000条请求,人数如果再增长,这绝对会造成不必要的服务器压力。并且这个方案的倒计时,也会存在很大的误差,因为请求存在延迟,跟你的网络状态也有很大的关系。

方案2:从服务端返回以服务器时间为基准的倒计时时间戳

//开启定时器
//假设请求获取到一个时间戳时间差 dateDiff
var timer = setInterval(function () {
  //每秒会获取本地时间,这样就算执行的周期不准确 也可以准确的获取时间差
  var countDown = endTime - (+Date.now())/1000 + dateDiff;
  // 倒计时页面渲染
}, 1000);

优点:

在页面生命周期中请求一次
准确度高,就算页面打开很久还是保持高准确度
缺点:

由于每秒获取当前时间,假如刻意在倒计时时期内,修改了本地时间将会导致倒计时异常。

到此,关于“js如何倒计时功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: js如何倒计时功能

本文链接: https://www.lsjlt.com/news/79200.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js如何倒计时功能
    这篇文章主要介绍“js如何倒计时功能”,在日常操作中,相信很多人在js如何倒计时功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js如何倒计时功能”的疑惑有所帮助!接下来,...
    99+
    2022-10-19
    js
  • JS怎么实现倒计时功能
    本篇内容主要讲解“JS怎么实现倒计时功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现倒计时功能”吧!HTML代码:<div id=...
    99+
    2022-10-19
    js
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2022-10-19
    js
  • js如何实现短信发送倒计时功能
    这篇文章将为大家详细讲解有关js如何实现短信发送倒计时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。本文实例为大家分享了js短信发送倒计时的具体代码,供大家参考,具体...
    99+
    2022-10-19
    js
  • 原生js怎样实现倒计时功能
    这篇文章主要介绍原生js怎样实现倒计时功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!思路:(1)获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、201...
    99+
    2022-10-19
    js
  • js如何实现倒计时
    这篇文章将为大家详细讲解有关js如何实现倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了...
    99+
    2022-10-19
    js
  • Handler实现倒计时功能
    本文实例为大家分享了Handler实现倒计时功能的具体代码,供大家参考,具体内容如下 1、需求 1.1 实现目标 当后台传递一个时间戳时,与当前系统时间做时间差,并转换为时分秒,作为...
    99+
    2022-11-12
    Handler 倒计时
  • vue实现倒计时功能
    本文实例为大家分享了vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 1.子组件部分 <div class="it...
    99+
    2022-11-11
    vue 倒计时
  • Flutter实现倒计时功能
    本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutte...
    99+
    2022-11-13
    Flutter 倒计时
  • vue实现时间倒计时功能
    本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下 需求: 做一个剩余支付时间倒计时的效果 效果图: 代码: <template> ...
    99+
    2022-11-12
    vue 倒计时
  • Android实现时间倒计时功能
    本文实例为大家分享了Android实现时间倒计时功能展示的具体代码,供大家参考,具体内容如下效果展示MainActivity(主页面代码)public class MainActivity extends Activity { priva...
    99+
    2023-05-30
    android 倒计时 roi
  • jQuery如何模拟爆炸倒计时功能
    这篇文章主要为大家展示了“jQuery如何模拟爆炸倒计时功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何模拟爆炸倒计时功能”这篇文章吧。&nb...
    99+
    2022-10-19
    jquery
  • python如何实现简单倒计时功能
    这篇文章给大家分享的是有关python如何实现简单倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。python的五大特点是什么python的五大特点:1.简单易学,开发程序时,专注的是解决问题,而不是搞明...
    99+
    2023-06-14
  • Android如何实现抢购倒计时功能
    这篇文章将为大家详细讲解有关Android如何实现抢购倒计时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、效果图二、思路算多少秒,秒数取余60,(满足分后剩下的秒数)算多少分,秒数除60,再取余6...
    99+
    2023-06-14
  • Vue实现倒计时小功能
    很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例、代码如下: 要求:点击提...
    99+
    2022-11-12
    Vue 倒计时
  • js定时器如何实现倒计时效果
    这篇文章主要介绍了js定时器如何实现倒计时效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下日期函数倒计时 =  用 ...
    99+
    2022-10-19
    js
  • Android 简单实现倒计时功能
    在 Android 中倒计时功能是比较常用的一个功能,比如短信验证码,付款倒计时等。实现方式有Handler、Thread 等,但是实现起来都有点麻烦,其实Android已经为...
    99+
    2022-06-06
    倒计时 Android
  • Android实现订单倒计时功能
    先上效果图 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <R...
    99+
    2022-06-06
    倒计时 Android
  • android实现倒计时功能代码
    效果图,每隔1秒,变换一下时间  xml: 代码如下: <RelativeLayout xmlns:android="http://schemas.andro...
    99+
    2022-06-06
    倒计时 Android
  • python实现简单倒计时功能
    使用python实现简单倒计时exe,供大家参考,具体内容如下 使用tkinter制作界面实现倒计时功能。 使用time.sleep(1)实现 秒级 倒计时 使用...
    99+
    2022-11-12
    python 倒计时
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作