JS倒计时两种实现方式代码实例

2024-11-03 04:16:11

最近做浏览器界面倒计时，用js就实现，两种方式：

一：设置时长，进行倒计时。比如考试时间等等

代码如下：

<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
      var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!
      function CountDown() {
        if (maxtime >= 0) {
          minutes = Math.floor(maxtime / 60);
          seconds = Math.floor(maxtime % 60);
          msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("还剩5分钟");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("时间到，结束!");
        }
      }
      timer = setInterval("CountDown()", 1000);
    </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</body>
</html>

运行结果：

二：设置时间戳，进行倒计时。比如距离活动结束时间等等

代码如下：

<html>
<head>
  <meta charset="UTF-8">
  <title>js简单时分秒倒计时</title>
  <script type="text/javascript">
    function countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var str="2017/5/17 00:00:00";
      var endDate = new Date(str);
      var end = endDate.getTime();

      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);
      }
      //将倒计时赋值到div中
      document.getElementById("_d").innerHTML = d+"天";
      document.getElementById("_h").innerHTML = h+"时";
      document.getElementById("_m").innerHTML = m+"分";
      document.getElementById("_s").innerHTML = s+"秒";
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(countTime,1000);

    }
  </script>
</head >
<body onload="countTime()" >
  <div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
  </div>
</body>
</html>

运行结果：

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

js实现页面多个日期时间倒计时效果

js的日期倒计时在日常项目中还是比较常用的,活动.拼团功能最为常见,先分析最要是处理好日期函数,然后一个页面上有多个倒计时情况下的方法: 来,先看下拼多多的拼单倒计时的效果: 那么,先上个代码吧: 案例效果: <style> .mytime{ line-height: 40px; width: 300px; margin: 0 auto;} </style> <div class="mytime jsTime" data-time="2019
javascript实现5秒倒计时并跳转功能

本文实例为大家分享了js实现5秒倒计时并跳转功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时五秒</title> <script> //使用匿名函数方法 function countDown(){ var time = document.getElementById("Tim
JS实现秒杀倒计时特效

本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下知识点添加一个定时器,对时间标签不断进行更新设置即可. 引入工具库工具库运行效果代码引入MyTool.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div
js实现指定时间倒计时效果

本文实例为大家分享了js实现指定时间倒计时的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时</title> </head> <body> <div style="display: flex; justify-content:
JS实现动态倒计时功能（天数、时、分、秒）

写在前面: 实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数.时.分.秒.由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行运算. 相关说明: 如果想要显示界面好看些,可以添加一下样式. <script> function show(){ //获取目的日期 var myyear=document.getElementById("year").value; var mymonth=document.g
JS动态显示倒计时效果

1.页面布局 <h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1> 2.js动态显示 getTime()获得设定的时期与1970年1月1日时间相差的毫秒数 1)获得插入数字的位置 var show=document.getElementById(
js实现时分秒倒计时

本文实例为大家分享了js实现时分秒倒计时的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js时分秒毫秒倒计时</title> </head> <body> <div class="active_time" id=&qu
JavaScript仿京东秒杀倒计时

本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码,供大家参考,具体内容如下仿京东秒杀倒计时 html代码 <div id="box"> <div class="txt">秒杀倒计时</div> <div class="hour"></div>  <span class="h_m">:&l
JS倒计时两种实现方式代码实例

最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等代码如下: <html> <head> <meta charset="UTF-8"> <title>简单时长倒计时</title> <SCRIPT type="text/javascript"> var maxtime = 60 * 60; //一个小时,按秒计算,自己调整! function Coun
Java倒计时三种实现方式代码实例

写完js倒计时,突然想用java实现倒计时,写了三种实现方式一:设置时长的倒计时: 二:设置时间戳的倒计时: 三:使用java.util.Timer类实现的时间戳倒计时代码如下: package timer; import java.util.Calendar; import java.util.Date; import java.util.Timer; import java.util.TimerTask; /** * java演示倒计时 * */ public class TimeTes
Spring AOP的五种通知方式代码实例

这篇文章主要介绍了Spring AOP的五种通知方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 AOP的五种通知方式: 前置通知:在我们执行目标方法之前运行(@Before) 后置通知:在我们目标方法运行结束之后,不管有没有异常(@After) 返回通知:在我们的目标方法正常返回值后运行(@AfterReturning) 异常通知:在我们的目标方法出现异常后运行(@AfterThrowing) 环绕通知:目标方法的调用由环绕通知决定
Java线程(Thread)四种停止方式代码实例

1.正常的程序启动,停止 2.使用退出标记,一般程序在run()方法后,线程会正常结束. 但是有一些伺服线程还在运行,他们运行时间较长,只有当外部条件满足时,他们才会停止.实现如下: public class ThreadCease extends Thread{ private volatile boolean exit = false; public void run(){ while(!exit){ //停止后做的事情~ } } 3.使用线程(Thread)自带的isInterrupted
Pandas缺失值2种处理方式代码实例

处理方式: 存在缺失值nan,并且是np.nan: 删除存在缺失值的:dropna(axis='rows') 替换缺失值:fillna(df[].mean(), inplace=True) 不是缺失值nan,有默认标记的 1.存在缺失值nan,并且是np.nan # 判断数据是否为NaN # pd.isnull(df),pd.notnull(df),pd.isna(df) # 读取数据 movie = pd.read_csv("./date/IMDB-Movie-Data.csv")
Js跳出两级循环方法代码实例

循环时最耗费资源的操作,任意一点小小的损耗都会被成倍放大,从而影响到程序整体运行的效率.一下两个因素会影响到循环的性能. 每次迭代做什么迭代的次数通过减少这两者中一个或全部的执行时间,可以提高循环的整体性能.如果一次循环需要较长时间,那么多次循环将需要更长时间. 做过一个复杂的验证方法,需要两层each验证之后反正报错的信息.因为双重循环的问题,纠结了很久. /** * 验证input 的值是否输入 flg:验证成功 false:验证失败 */ function CommonApplyFo
在页面中引入js的两种方法(推荐)

在页面中引入js有两种基本方式:在页面中嵌入js.引用外部js文件. 一.在页面中嵌入js 这是在页面使用js最简单的方式了,一般我在写个小测试的情况下会用这种方式. 把script元素写在</body>前面,script元素的内容就是js代码.像这样: <script> // 在这里写js function test(){ alert('说点什么呢'); } test(); </script> 二.引用外部js文件引用外部js文件,可以使js文件和HTML文件相分离
Android 中倒计时验证两种常用方式实例详解

Android 中倒计时验证两种常用方式实例详解短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用.看图: 说明:这里的及时从10开始,是为了演示的时间不要等太长而修改的. 1.第一种方式:Timer /** * Description:自定义Timer * <p> * Created by Mjj on 2016/12/4. */ public class TimeCount extends CountDownTimer { private Button button; //参数依
bootstrap paginator分页插件的两种使用方式实例详解

分页有两种方式: 1. 前台分页:ajax一次请求获取全部数据,适合少量数据(万条数据以下): $.ajax({ type: "GET", url: "",//后台接口地址 dataType: "json", success: function (msg) { var pages = Math.ceil(msg.data / 5);//data是数据总量 var element = $('#id');//对应ul的id element.boots
Java多线程中线程的两种创建方式及比较代码示例

1.线程的概念:线程(thread)是指一个任务从头至尾的执行流,线程提供一个运行任务的机制,对于java而言,一个程序中可以并发的执行多个线程,这些线程可以在多处理器系统上同时运行.当程序作为一个应用程序运行时,java解释器为main()方法启动一个线程. 2.并行与并发: (1)并发:在单处理器系统中,多个线程共享CPU时间,而操作系统负责调度及分配资源给它们. (2)并行:在多处理器系统中,多个处理器可以同时运行多个线程,这些线程在同一时间可以同时运行,而不同于并发,只能多个线程共享CP

JS倒计时两种实现方式代码实例

相关推荐

随机推荐