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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>倒计时抢购</title>

 </head>

 <body>

     <span id="time"></span>

     <input type="button" value="开始抢购" id="buy" disabled="true">

     <script>

         function Time(){

             var date = new Date();

             var nowhour = date.getHours();

             var nowmin = date.getMinutes();

             var nowsec = date.getSeconds();

             var finalhour = 22;

             var finalmin = 22;

             var finalsec = 22;

             var finals = finalhour * 3600 + finalmin * 60 + finalsec;

             var nows = nowhour * 3600 + nowmin * 60 + nowsec;

             var showhour = parseInt((finals - nows)/3600);

             var showmin = parseInt((finals - nows)%3600/60);

             var showsec = (finals - nows)%60;

              if(showsec<10){

                 showsec = "0" + showsec;

             }

             if(showmin<10){

                 showmin = "0" + showmin;

             }

             if(showhour<10){

                 showhour = "0" + showhour;

             }

             document.getElementById("time").innerHTML = "距离22点22分22秒还有：" + showhour + ":" + showmin + ":" + showsec;

             if(showhour == "00" && showmin == "00" && showsec =="00"){

                 clearInterval(t);

                 document.getElementById("buy").disabled="";

             }

         }

         Time();

         var t = setInterval(Time,1000);

     </script>

 </body>

 </html>

JS原生代码之倒计时抢购的更多相关文章

  1. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  2. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  3. 用Node.js原生代码实现静态服务器

    ---恢复内容开始--- 后端中服务器类型有两种 1. web服务器[ 静态服务器 ] - 举例: wamp里面www目录 - 目的是为了展示页面内容 - 前端: nginx 2. 应用级服务器[ a ...

  4. JS原生代码实现导航高亮

    一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二 代码解析 先简单写一个页面顶端的导航栏:<nav>  <ul> ...

  5. 基于面向对象的图片轮播（js原生代码）

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  6. day28(ajax之js原生代码实现)

    ajax ajax:异步页面无刷新技术 AJAX:异步的 JavaScript And XML. * 使用的是老的技术,用的是新的思想. AJAX的功能:完成页面的局部刷新,不中断用户的体验. XML ...

  7. js原生代码实现鼠标拖拽(超简单)

    首先先来看这一张图 在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示 这些样式都不是重要的,这里加个marg ...

  8. js原生代码编写一个鼠标在页面移动坐标的检测功能，兼容各大浏览器

    function mousePosition(e) {     //IE9以上的浏览器获取     if (e.pageX || e.pageY) {         return {         ...

  9. 高效的js原生代码

    1.遍历元素 //不推荐 var element = document.getElementsByTagName('div'); for(var i=0; i<element.length; i ...

随机推荐

  1. 【python+beautifulsoup4】Python中安装bs4后，pycharm报错ModuleNotFoundError: No module named 'bs4'

    本文主要分享关于在对应python版本中安装beautifulsoup之后,在代码执行时还会提示“No module named 'bs4'”的问题. 安装beautifsoup4 在命令窗口执行 p ...

  2. redis----Not only Sql 理论

    数据存储的瓶颈:(mysql ==>500万数据就已经很慢了) 1 数据量的总大小,一个机器放不下时 2 数据 的索引,一个机器的内存放不下时 3 访问量(读写混合),一个实例不能承受 Redi ...

  3. 打印n对括号的全部有效组合（左右括号正确匹配）Java实现

    一.问题导出 今天在做算法题目的时候遇到了一道左右括号匹配的问题,问题如下: 二.问题思考 (1)这种要列出全部可能性的题目很容易想到由小到大去发现规律,用递归或者暴力搜索. 首先1的情况,一个括号只 ...

  4. Image Processing and Computer Vision_Review：Local Invariant Feature Detectors: A Survey——2007.11

    翻译 局部不变特征探测器:一项调查 摘要 -在本次调查中,我们概述了不变兴趣点探测器,它们如何随着时间的推移而发展,它们如何工作,以及它们各自的优点和缺点.我们首先定义理想局部特征检测器的属性.接下来 ...

  5. openresty 阶段说明

    开发中常用的7阶段 set_by_lua*: 流程分支处理判断变量初始化 rewrite_by_lua*: 转发.重定向.缓存等功能(例如特定请求代理到外网) access_by_lua*: IP 准 ...

  6. CDH5.16.1的agent启动报错:ERROR Error, CM server guid updated, expected d9bcadb4-f983-41b8-a667-66760f47bc91, received a67f5efa-8473-4f6a-94d6-231d1f432ef0

    1 详细错误 0/Oct/2019 14:56:13 +0000] 28577 MainThread agent ERROR Error, CM server guid updated, expect ...

  7. [Abp vNext微服务实践] - vue-element-admin登录二

    简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...

  8. Cloneable注解使用

    使用 clone()方法的类必须 implement Cloneable 如果没有继承,clone()方法会报错 java.lang.CloneNotSupportedException异常

  9. 01windows7下安装rabbitmq

     1.直接双击rabbitmq-server-3.6.10.exe,会提示你缺少Erlang安装包,问你是否下载,点击是就可以了,因为我自己下载,我就直接先安装otp_win64_20.0.exe,直 ...

  10. BZOJ1791 [Ioi2008]Island 岛屿[基环树+单调队列优化DP]

    基环树直径裸题. 首先基环树直径只可能有两种形式:每棵基环树中的环上挂着的树的直径,或者是挂在环上的两个树的最大深度根之间的距离之和. 所以,先对每个连通块跑一遍,把环上的点找出来,然后对环上每个点跑 ...