广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >js实现倒计时的方式有哪些
  • 447
分享到

js实现倒计时的方式有哪些

2024-04-02 19:04:59 447人浏览 安东尼
摘要

小编给大家分享一下js实现倒计时的方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一般倒计时的时间都是后台传来的然后渲染

小编给大家分享一下js实现倒计时的方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式

//带天数的倒计时
function countDown(times){
 var timer=null;
 timer=setInterval(function(){
  var day=0,
   hour=0,
   minute=0,
   second=0;//时间默认值
  if(times > 0){
   day = Math.floor(times / (60 * 60 * 24));
   hour = Math.floor(times / (60 * 60)) - (day * 24);
   minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
   second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  }
  if (day <= 9) day = '0' + day;
  if (hour <= 9) hour = '0' + hour;
  if (minute <= 9) minute = '0' + minute;
  if (second <= 9) second = '0' + second;
  //
  console.log(day+"天:"+hour+"小时:"+minute+"分钟:"+second+"秒");
  times--;
 },1000);
 if(times<=0){
  clearInterval(timer);
 }
}
//单纯分钟和秒倒计时
function resetTime(time){
 var timer=null;
 var t=time;
 var m=0;
 var s=0;
 m=Math.floor(t/60%60);
 m<10&&(m='0'+m);
 s=Math.floor(t%60);
 function countDown(){
  s--;
  s<10&&(s='0'+s);
  if(s.length>=3){
  s=59;
  m="0"+(Number(m)-1);
  }
  if(m.length>=3){
  m='00';
  s='00';
  clearInterval(timer);
  }
  console.log(m+"分钟"+s+"秒");
 }
 timer=setInterval(countDown,1000);
}

如何使用

js实现倒计时的方式有哪些

js实现倒计时的方式有哪些

以上是“js实现倒计时的方式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: js实现倒计时的方式有哪些

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

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

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

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

下载Word文档
猜你喜欢
  • js实现倒计时的方式有哪些
    小编给大家分享一下js实现倒计时的方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一般倒计时的时间都是后台传来的然后渲染...
    99+
    2022-10-19
  • Android 使用flow实现倒计时的方式
    Android 倒计时一般实现方式: handler+postDelayed() 方式Timer + TimerTask + handler 方式ScheduledExecutorS...
    99+
    2022-11-13
  • js如何实现防刷新的倒计时
    这篇文章主要为大家展示了“js如何实现防刷新的倒计时”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何实现防刷新的倒计时”这篇文章吧。最近在维护考试系统,在...
    99+
    2022-10-19
  • Android中Handler实现倒计时的两种方式
    背景:最近项目中,正好做到登录/注册这个功能块。它需要通过发送验证码,在规定的时间内用验证码来完成登录/注册。之前的项目中也有这个功能,但是觉得太复杂了,只好自己重新实现一遍。用Handler来做,觉得代码简介,逻辑也清楚。代码一://在向...
    99+
    2023-05-31
    handler 倒计时 roi
  • JS支付页面倒计时的实现示例
    js简单实现支付页面跳转: 点击支付,跳出提示框,点击确定跳转支付成功页面二,从10开始倒计时,跳转到主页面,主页面连接到百度页面 页面1,代码如下: <!DOCTYPE ht...
    99+
    2022-11-13
  • JS继承实现方式有哪些
    这篇文章主要介绍“JS继承实现方式有哪些”,在日常操作中,相信很多人在JS继承实现方式有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS继承实现方式有哪些”的疑惑有所帮...
    99+
    2022-10-19
  • Android实现计时与倒计时的方法汇总
    方法一Timer与TimerTask(Java实现)public class timerTask extends Activity{ private int recLen = 11; private TextView txtView; ...
    99+
    2023-05-31
    android 计时 倒计时
  • JS私有属性的实现方式有哪些
    这篇文章主要为大家展示了“JS私有属性的实现方式有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS私有属性的实现方式有哪些”这篇文章吧。class 是创建对象的模版,由一系列属性和方法构成...
    99+
    2023-06-29
  • Android实现倒计时的方案梳理
    目录前言一、CountDownTimer的实现二、直接用Handler的实现三、直接用Time、TimeTask的实现四、使用Theard倒计时五、使用框架RxJava六、Kotli...
    99+
    2022-11-13
    Android实现倒计时方案 Android实现倒计时
  • android实现倒计时功能的方法
    前言   在打开爱奇艺等app的欢迎界面的时候,右上角有一个倒计时的控件。倒计时完了以后进入主界面。现在我们来实现这个功能。  方法一: 利用...
    99+
    2022-06-06
    倒计时 方法 Android
  • React+Typescript实现倒计时Hook的方法
    首先对setInterval做了Hook化封装👇 import { useEffect, useRef } from 'react' function us...
    99+
    2022-11-12
  • 基于JS实现01支付后的10秒倒计时
    这是一个通过js实现的支付后的页面,点击支付会跳出一个弹窗,提示你是否要确定支付,确定后进入付后界面,该页面有着10秒倒计时,计时结束后便会返回原界面。也可以选择立刻返回,来返回主页...
    99+
    2023-05-13
    js 10秒倒计时 js 支付倒计时 js倒计时
  • Android实现计时与倒计时的常用方法小结
    本文实例总结了Android实现计时与倒计时的常用方法。分享给大家供大家参考,具体如下: 方法一 Timer与TimerTask(Java实现) public class t...
    99+
    2022-06-06
    倒计时 小结 方法 Android
  • JS实现网络请求的方式有哪些
    这篇文章将为大家详细讲解有关JS实现网络请求的方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。背景为了应对越来越多的测试需求,减少重复性的工作,有道智能硬件测试组基于 electron 开发了一系...
    99+
    2023-06-29
  • Python实现计算AUC的方式有哪些
    今天小编给大家分享一下Python实现计算AUC的方式有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。介绍AUC(Are...
    99+
    2023-07-02
  • java实现定时器的方式有哪些
    Java中实现定时器的方式有以下几种:1. java.util.Timer类和java.util.TimerTask类:Timer类...
    99+
    2023-08-25
    java
  • 基于JS如何实现01支付后的10秒倒计时
    这篇文章主要介绍“基于JS如何实现01支付后的10秒倒计时”,在日常操作中,相信很多人在基于JS如何实现01支付后的10秒倒计时问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”基于JS如何实现01支付后的10秒...
    99+
    2023-07-05
  • js继承的方式有哪些
    这篇文章主要介绍js继承的方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!原型链继承原型链继承是ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。什么是原型链每个构造函数...
    99+
    2023-06-14
  • java定时任务实现的方式有哪些
    Java中实现定时任务的方式有以下几种:1. Timer类:Java提供了Timer类,可以用来实现简单的定时任务。Timer类允许...
    99+
    2023-08-29
    java
  • 用JS写了一个30分钟倒计时器的实现示例
    前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> &l...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作