基于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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
angularjs模态框的使用代码实例
Dec 20 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
thinkphp分页实现效果
2016/10/13 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python标准库os库的函数介绍
2020/02/12 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
如何教少儿学习Python编程
2020/07/10 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
土地转让协议书范本
2014/04/15 职场文书
主持人演讲稿
2014/05/13 职场文书
北京故宫的导游词
2015/01/31 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js