基于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控制cookie显示和隐藏背景图
Feb 12 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
switchery按钮的使用方法
Dec 18 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
vue实力踩坑之push当前页无效
Apr 10 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Python中random模块用法实例分析
2015/05/19 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
使用Python设计一个代码统计工具
2018/04/04 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python批量赋值操作实例
2018/10/22 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Keras 使用 Lambda层详解
2020/06/10 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
小组合作学习反思
2014/02/18 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
解决Pytorch中关于model.eval的问题
2021/05/22 Python