基于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 定义新对象方法
Feb 20 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
js本地图片预览实现代码
Oct 09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
微信小程序-横向滑动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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python自动化报告的输出用例详解
2018/05/30 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
详解python中各种文件打开模式
2020/01/19 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
诉讼财产保全担保书
2014/05/20 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
欠款证明
2015/06/24 职场文书
入队仪式主持词
2015/07/04 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书