基于JavaScript实现活动倒计时效果


Posted in Javascript onApril 20, 2017

本文实例为大家分享了js倒计时效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
  <head> 
    <title>countDown</title> 
    <style type="text/css"> 
      #mydiv{ 
        width:150px; 
        background-color:green; 
        margin:0 auto; 
        padding:0 auto; 
        color:pink; 
      } 
    </style> 
    <script type="text/javascript"> 
      <!-- 秒数可修改--> 
      var second=50; 
      <!-- 分钟可修改--> 
      var minute=1; 
      <!-- 小时可修改--> 
      var hour=1; 
      <!-- 天数可修改--> 
      var day=1; 
      var flag=false; 
      function countDown(){ 
        var div=document.getElementById("mydiv"); 
        second-=1; 
        if(second==0){ 
          minute=minute-1; 
          second=60; 
          if(minute<0){ 
            hour=hour-1; 
            minute=59; 
            if(hour<0){ 
              day-=1; 
              hour=23; 
              if(day<0){ 
                flag=true; 
              } 
            } 
          } 
        } 
        if(flag){ 
          div.innerHTML="活动结束!"; 
        }else{ 
          div.innerHTML="距离活动时间还剩:"+day+"天"+hour+"小时"+minute+"分"+second+"秒"; 
        } 
      } 
       setInterval("countDown()",1000); 
    </script> 
  </head> 
  <body> 
    <div id="mydiv">倒计时</div> 
  </body> 
</html>

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

Javascript 相关文章推荐
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
javascript string字符串优化问题
Jul 31 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 #Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
通过js修改input、select默认字体颜色
Apr 19 #Javascript
利用node.js本地搭建HTTP服务器
Apr 19 #Javascript
javascript 的变量、作用域和内存问题
Apr 19 #Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 #Javascript
javascript 中null和undefined区分和比较
Apr 19 #Javascript
You might like
PHP中phar包的使用教程
2017/06/14 PHP
实例讲解PHP表单
2020/06/10 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
JS实现星星海特效
2019/12/24 Javascript
js实现无缝轮播图
2020/03/09 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python线程里哪种模块比较适合
2020/08/02 Python
python/golang 删除链表中的元素
2020/09/14 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
留学生如何写好自荐信
2013/12/27 职场文书
先进事迹演讲稿
2014/09/01 职场文书
七一讲话心得体会
2014/09/05 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python