基于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 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
Html5生成验证码的示例代码
May 10 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数据缓存技术
2007/02/14 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
js验证账户名是否重复
2020/05/26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python Queue模块详解
2014/11/30 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
如何通过Python实现标签云算法
2019/07/02 Python
利用python实现周期财务统计可视化
2019/08/25 Python
综合实践活动方案
2014/02/14 职场文书
政府法律服务方案
2014/06/14 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
党员转正意见怎么写
2015/06/03 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python