编程 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 相关文章推荐

Jquery读取URL参数小例子

Aug 30 Javascript

动态加载js、css等文件跨iframe实现

Feb 24 Javascript

javascript中typeof操作符和constucor属性检测

Feb 26 Javascript

JavaScript中toString()方法的使用详解

Jun 05 Javascript

javascript常见数据验证插件大全

Aug 03 Javascript

详解JavaScript中常用的函数类型

Nov 18 Javascript

JavaScript高级程序设计（第三版）学习笔记6、7章

Mar 11 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

Dec 08 Javascript

JQueryEasyUI框架下的combobox的取值和绑定的方法

Jan 22 Javascript

zTree树形插件异步加载方法详解

Jun 14 Javascript

傻瓜式vuex语法糖kiss-vuex整理

Dec 21 Javascript

详解JavaScript 事件流

Sep 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

一个PHP的远程图片抓取函数分享

2013/09/25 PHP

使用图灵api创建微信聊天机器人

2015/07/23 PHP

简单介绍PHP非阻塞模式

2016/03/03 PHP

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

2017/03/06 PHP

yii2实现Ueditor百度编辑器的示例代码

2018/11/02 PHP

jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)

2010/10/20 Javascript

jquery easyui combobox模糊过滤(示例代码)

2013/11/30 Javascript

js实现省市联动效果的简单实例

2014/02/10 Javascript

判断及设置浏览器全屏模式

2014/04/20 Javascript

jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

2015/03/25 Javascript

以Python代码实例展示kNN算法的实际运用

2015/10/26 Javascript

JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

2016/08/05 Javascript

基于Layer+jQuery的自定义弹框

2020/05/26 Javascript

浅谈JS 数字和字符串之间相互转化的纠纷

2017/10/20 Javascript

大转盘抽奖小程序版转盘抽奖网页版

2020/04/16 Javascript

JS实现灯泡开关特效

2020/03/30 Javascript

[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦：OG娜迦海妖放大配合谜团大中3人

2017/04/02 DOTA

[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/17 DOTA

深入Python函数编程的一些特性

2015/04/13 Python

Python如何实现文本转语音

2016/08/08 Python

python不换行之end=与逗号的意思及用途

2017/11/21 Python

Python Series从0开始索引的方法

2018/11/06 Python

opencv实现图片模糊和锐化操作

2018/11/19 Python

Python count函数使用方法实例解析

2020/03/23 Python

Python基于stuck实现scoket文件传输

2020/04/02 Python

Django中从mysql数据库中获取数据传到echarts方式

2020/04/07 Python

用 Python 制作地球仪的方法

2020/04/24 Python

解决pycharm安装第三方库失败的问题

2020/05/09 Python

tensorflow 动态获取 BatchSzie 的大小实例

2020/06/30 Python

Python 实现3种回归模型（Linear Regression，Lasso，Ridge）的示例

2020/10/15 Python

Django跨域请求原理及实现代码

2020/11/14 Python

用纯css3和html制作泡沫对话框实现代码

2013/03/21 HTML / CSS

法律专业学生的自我评价

2014/02/07 职场文书

2019初中学生入团申请书

2019/06/27 职场文书

Python+uiautomator2实现自动刷抖音视频功能

2021/04/29 Python

通过T-SQL语句创建游标与实现数据库加解密功能

2022/03/16 SQL Server