基于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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue观察模式浅析
Sep 25 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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 文件上传模型,支持多文件上传
2009/08/13 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php实现异步数据调用的方法
2015/12/24 PHP
JS打印gridview实现原理及代码
2013/02/05 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
python实现简单购物商城
2016/05/21 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
浅析Python 条件控制语句
2020/07/15 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
促销活动总结报告
2014/04/26 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
爱心捐助倡议书
2014/05/19 职场文书
技术负责人任命书
2014/06/05 职场文书
六一亲子活动总结
2014/07/01 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书