zoukankan      html  css  js  c++  java
  • JS原生代码之倒计时抢购

    学到了原声js改变input的disabled的属性值,因为想让倒计时结束的同时,抢购按钮可以被点击。代码为:document.getElementById("buy").disabled = "";或者disabled的值为false也可以。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>倒计时抢购</title>
     6 </head>
     7 <body>
     8     <span id="time"></span>
     9     <input type="button" value="开始抢购" id="buy" disabled="true">
    10     <script>
    11         function Time(){
    12             var date = new Date();
    13             var nowhour = date.getHours();
    14             var nowmin = date.getMinutes();
    15             var nowsec = date.getSeconds();
    16             var finalhour = 22;
    17             var finalmin = 22;
    18             var finalsec = 22;
    19             var finals = finalhour * 3600 + finalmin * 60 + finalsec;
    20             var nows = nowhour * 3600 + nowmin * 60 + nowsec;
    21             var showhour = parseInt((finals - nows)/3600);
    22             var showmin = parseInt((finals - nows)%3600/60);
    23             var showsec = (finals - nows)%60;
    24              if(showsec<10){
    25                 showsec = "0" + showsec;
    26             }
    27             if(showmin<10){
    28                 showmin = "0" + showmin;
    29             }
    30             if(showhour<10){
    31                 showhour = "0" + showhour;
    32             }
    33             document.getElementById("time").innerHTML = "距离22点22分22秒还有:" + showhour + ":" + showmin + ":" + showsec;
    34             if(showhour == "00" && showmin == "00" && showsec =="00"){
    35                 clearInterval(t);
    36                 document.getElementById("buy").disabled="";
    37             }
    38         }
    39         Time();
    40         var t = setInterval(Time,1000);
    41     </script>
    42 </body>
    43 </html>
  • 相关阅读:
    CentOS7下安装Scrapy
    阿里云ECS提示RHSA-2017:3263: curl security update
    CentOS 7.0安装配置LAMP服务器(Apache+PHP+MariaDB)
    Electron: 从零开始写一个记事本app
    flask请求流程
    编写Dockerfile
    docker-compose使用
    redis持久化切换rdb到aof
    RESTful API规范
    介绍importlib
  • 原文地址:https://www.cnblogs.com/yuer20180726/p/11152292.html
Copyright © 2011-2022 走看看