编程 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实现轮显新闻标题链接

Aug 13 Javascript

JavaScript Object的extend是一个常用的功能

Dec 02 Javascript

JavaScript实现在数组中查找不同顺序排列的字符串

Sep 26 Javascript

javascript使用正则表达式检测IP地址

Dec 03 Javascript

jQuery中filter()方法用法实例

Jan 06 Javascript

深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

Apr 03 Javascript

JS判断是否手机或pad访问实现方法

Dec 09 Javascript

通过jquery.cookie.js实现记住用户名、密码登录功能

Jun 20 jQuery

JS实现的点击按钮图片上下滚动效果示例

Jan 28 Javascript

基于vue框架手写一个notify插件实现通知功能的方法

Mar 31 Javascript

vue项目中自定义video视频控制条的实现代码

Apr 26 Javascript

Element实现动态表格的示例代码

Aug 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/03 咖啡文化

PHP二维数组的去重问题解析

2011/07/17 PHP

巧用php中的array_filter()函数去掉多维空值的代码分享

2012/09/07 PHP

基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)

2014/01/31 PHP

php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析

2014/06/10 PHP

php保存信息到当前Session的方法

2015/03/16 PHP

关于Laravel参数验证的一些疑与惑

2019/11/19 PHP

PHP高并发和大流量解决方案整理

2021/03/09 PHP

JavaScript 常用函数库详解

2009/10/21 Javascript

js中document.write使用过程中的一点疑问解答

2014/03/20 Javascript

基于jquery实现的自动补全功能

2015/03/12 Javascript

由ReactJS的Hello world说开来

2015/07/02 Javascript

详解JavaScript ES6中的Generator

2015/07/28 Javascript

详解javascript函数的参数

2015/11/10 Javascript

JS如何设置iOS中微信浏览器的title

2016/11/22 Javascript

js document.getElementsByClassName的使用介绍与自定义函数

2016/11/25 Javascript

React.js中常用的ES6写法总结（推荐）

2017/05/09 Javascript

Node.js创建HTTP文件服务器的使用示例

2018/05/11 Javascript

微信小程序中使用ECharts 异步加载数据实现图表功能

2018/07/13 Javascript

微信小程序如何获取用户收货地址

2018/11/27 Javascript

vue与原生app的对接交互的方法(混合开发)

2018/11/28 Javascript

three.js搭建室内场景教程

2018/12/30 Javascript

django使用图片延时加载引起后台404错误

2017/04/18 Python

Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例

2018/08/04 Python

Python读取xlsx文件的实现方法

2019/07/04 Python

python实现图像检索的三种(直方图/OpenCV/哈希法)

2019/08/08 Python

Python使用socket_TCP实现小文件下载功能

2020/10/09 Python

html5+css3气泡组件的实现

2014/11/21 HTML / CSS

纽约家具、家居装饰和地毯店：ABC Carpet & Home

2017/06/21 全球购物

美国购买体育赛事门票网站：TicketCity

2019/03/06 全球购物

J2EE中常用的名词进行解释

2015/11/09 面试题

优秀的教师个人的中文求职信

2013/09/21 职场文书

体育教师求职信

2014/06/30 职场文书

python开发实时可视化仪表盘的示例

2021/05/07 Python

Python趣味挑战之实现简易版音乐播放器

2021/05/28 Python

MySQL范围查询优化的场景实例详解

2022/06/10 MySQL