基于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 写类方式之二
Jul 05 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
JavaScript鼠标悬停事件用法解析
May 15 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 session安全问题分析
2011/06/24 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
JavaScript DOM节点添加示例
2014/07/16 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
python装饰器实例大详解
2017/10/25 Python
python基础教程之while循环
2019/08/14 Python
python是否适合网页编程详解
2019/10/04 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python with语句用法原理详解
2020/07/03 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
小车司机岗位职责
2013/11/25 职场文书
面试后的感谢信范文
2014/02/01 职场文书
大学生就业意向书范文
2014/04/01 职场文书
高考1977观后感
2015/06/04 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
python中redis包操作数据库的教程
2022/04/19 Python
tomcat下部署jenkins的方法
2022/05/06 Servers
git中cherry-pick命令的使用教程
2022/06/25 Servers