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

最近做浏览器界面倒计时,用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>

运行结果:

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

(0)

相关推荐

  • js实现指定时间倒计时效果

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

  • JS实现秒杀倒计时特效

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

  • javascript实现5秒倒计时并跳转功能

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

  • JavaScript仿京东秒杀倒计时

    本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码,供大家参考,具体内容如下 仿京东秒杀倒计时 html代码 <div id="box"> <div class="txt">秒杀倒计时</div> <div class="hour"></div> <!-- 小时与分钟之间的冒号 --> <span class="h_m">:&l

  • 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实现动态倒计时功能(天数、时、分、秒)

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

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

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

  • js实现时分秒倒计时

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

  • 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

随机推荐