基于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 相关文章推荐
script标签属性type与language使用选择
Dec 02 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
一篇入门的php Class 文章
2007/04/04 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
PHP7新功能总结
2019/04/14 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
详解javascript函数写法大全
2019/03/25 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
通过python爬虫赚钱的方法
2019/01/29 Python
pygame实现打字游戏
2021/02/19 Python
python中count函数简单用法
2020/01/05 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
医院节能减排方案
2014/06/13 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
红高粱观后感
2015/06/10 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL