编程 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获取距今n天前的日期

Jul 08 Javascript

jquery ready(fn)事件使用介绍

Aug 21 Javascript

小心！AngularJS结合RequireJS做文件合并压缩的那些坑

Jan 09 Javascript

百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换

Feb 19 Javascript

jquery弹出遮掩层效果【附实例代码】

Apr 28 Javascript

AngularJS 表达式详细讲解及实例代码

Jul 26 Javascript

轮播的简单实现方法

Jul 28 Javascript

Vue实现百度下拉提示搜索功能

Jun 21 Javascript

react-native-video实现视频全屏播放的方法

Mar 19 Javascript

实例分析编写vue组件方法

Feb 12 Javascript

JavaScript实现移动端带transition动画的轮播效果

Mar 24 Javascript

javascript实现简单页面倒计时

Mar 02 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

咖啡豆分级制度咖啡豆等级分类咖啡豆是按口感分类的吗？

2021/03/05 新手入门

Fatal error: Call to undefined function curl_init()解决方法

2010/04/09 PHP

不重新编译PHP为php增加openssl模块的方法

2011/06/14 PHP

关于PHP中Object对象的笔记分享

2011/06/28 PHP

php中使用session防止用户非法登录后台的方法

2015/01/27 PHP

php实现根据词频生成tag云的方法

2015/04/17 PHP

PHP框架laravel的.env文件配置教程

2017/06/07 PHP

javascript英文日期（有时间）选择器

2007/05/02 Javascript

JavaScript中使用构造函数实现继承的代码

2010/08/12 Javascript

css transform 3D幻灯片特效实现步骤解读

2013/03/27 Javascript

JS文本框追加多个下拉框的值的简单实例

2013/07/12 Javascript

jquery中html、val与text三者属性取值的联系与区别介绍

2013/12/29 Javascript

jqGrid用法汇总(全经典)

2016/06/28 Javascript

bootstrap中的 form表单属性role="form"的作用详解

2017/01/20 Javascript

Vue修改mint-ui默认样式的方法

2018/02/03 Javascript

提升node.js中使用redis的性能遇到的问题及解决方法

2018/10/30 Javascript

javascript面向对象创建对象的方式小结

2019/07/29 Javascript

微信小程序获取位置展示地图并标注信息的实例代码

2019/09/01 Javascript

javascript使用正则表达式实现注册登入校验

2020/09/23 Javascript

vue前端和Django后端如何查询一定时间段内的数据

2021/02/28 Vue.js

python中Genarator函数用法分析

2015/04/08 Python

在MAC上搭建python数据分析开发环境

2016/01/26 Python

分享6个隐藏的python功能

2017/12/07 Python

Python机器学习之决策树算法

2017/12/22 Python

Python之文字转图片方法

2018/05/10 Python

python和pygame实现简单俄罗斯方块游戏

2021/02/19 Python

python 画出使用分类器得到的决策边界

2019/08/21 Python

Python脚本操作Excel实现批量替换功能

2019/11/20 Python

python中time、datetime模块的使用

2020/12/14 Python

CSS3制作文字半透明倒影效果的两种实现方式

2014/08/08 HTML / CSS

viagogo波兰票务平台：演唱会、体育比赛、戏剧门票

2018/04/23 全球购物

防灾减灾宣传标语

2014/10/07 职场文书

群众路线自查报告及整改措施

2014/11/04 职场文书

2016年中秋节晚会领导致辞

2015/11/26 职场文书

JS setTimeout与setInterval的区别

2022/04/20 Javascript

python中使用redis用法详解

2022/12/24 Redis