编程 Javascript

基于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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

fetch_and_update

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 表单之间的数据传递代码

Dec 04 Javascript

javaScript(JS)替换节点实现思路介绍

Apr 17 Javascript

关于IE中getElementsByClassName不能用的问题解决方法

Aug 26 Javascript

深入理解JavaScript系列（26）：设计模式之构造函数模式详解

Mar 03 Javascript

全系IE支持Bootstrap的解决方法

Oct 19 Javascript

JavaScript阻止回车提交表单的方法

Dec 30 Javascript

jQuery获取剪贴板内容的方法

Jun 16 Javascript

微信小程序自定义创建详细介绍

Oct 27 Javascript

vue自定义指令之面板拖拽的实现

Apr 14 Javascript

leaflet加载geojson叠加显示功能代码

Feb 21 Javascript

JavaScript实现HSL拾色器

May 21 Javascript

javascript this指向相关问题及改变方法

Nov 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