首页 > 其他分享 >JS倒计时两种种实现方式

JS倒计时两种种实现方式

时间:2023-09-04 10:02:05浏览次数:54  
标签:leftTime 60 00 两种 floor JS 倒计时 var Math

一:设置时长,进行倒计时。

代码如下:

 <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 onl oad="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>

标签:leftTime,60,00,两种,floor,JS,倒计时,var,Math
From: https://blog.51cto.com/u_14914383/7345968

相关文章

  • JS判断一个数组中是否有重复值
    方法一:  varary=newArray("111","22","33","111");varnary=ary.sort();for(vari=0;i<ary.length;i++){if(nary[i]==nary[i+1]){alert("数组重复内容:"+nary[i]);......
  • js操作Array数组大全
    unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined push:将参数添加到原数组末尾,并返回数组的长度 concat:返回一个新数组,是将参数添加到原数组中构成的 splice(start,deleteCount,val1,val2,...):从start位置......
  • JS判断当前时间是否到时到了某个截止时间
    假设后端接口返回时间2023-01-01为截止时间,需要判断当前时间是否到期逻辑就是将时间转换为时间戳,然后再进行比较。但是注意的是微信小程序iOSgetTime转换成时间戳为null我们只需要将 “-”符号的替换成“/”即可functiongetBirthday(endTime){//将2022-01-0......
  • servlet,jsp,jstl用到的依赖与brand.jsp简单案例
    2023-09-03<projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0http://maven.apache.org/maven-v4_0_0.xsd">&......
  • UTSJSONOBJECT
    UTSJSONObjectUTSJSONObject是UTS语言的内置类型,主要用来操作匿名对象#创建实例UTSJSONObject对象的实例目前主要通过两种方式来创建:通过对象字面量constperson:UTSJSONObject={name:'Tom',printName:()=>{//...}}复制代码通过JS......
  • JSON
    JSON#静态方法#parseJSON.parse()方法用来解析JSON字符串,构造由字符串描述的UTSJSONObject。constjson=`{"result":true,"count":42}`;constobj=JSON.parse(json);console.log(obj["count"]);//expectedoutput:42console.log(obj["resu......
  • 两个例子理解js设计模式中的【适配器模式】
    适配器模式的精髓:如果现有的接口已经能够正常工作,那我们就永远不会用上适配器模式。适配器模式是一种“亡羊补牢”的模式,没有人会在程序的设计之初就使用它。因为没有人可以完全预料到未来的事情,也许现在好好工作的接口,未来的某天却不再适用于新系统,那么我们可以用适配器模式把旧......
  • JS基础-初识JavaScript
    前面讲了前端开发必备的三种语言。其中的HTML、CSS我们基本上有了比较正确的认识。这里讲一下JavaScript。语言功能结构层HTML搭建结构、放置部件、描述定义样式层CSS美化页面、实现布局行为层JavaScript实现交互效果、数据收发、表单验证HTML构成了......
  • Java:SpringBoot使用AES对JSON数据加密和解密
    目录1、加密解密原理2、项目示例2.1、项目结构2.2、常规业务代码2.3、加密的实现2.4、接口测试2.5、总结1、加密解密原理客户端和服务端都可以加密和解密,使用base64进行网络传输加密方字符串->AES加密->base64解密方base64->AES解密->字符串2、项目示例2.1、项目结构$tr......
  • js:10进制和2进制进行转换
    目录用到的函数进制转换示例用到的函数1、parseInt文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt定义//解析一个字符串并返回指定基数的十进制整数intparseInt(string,radix)参数string要被解析的值。如果参数不是一个......