代码来自于网上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

 <title>Jquery实现倒计时效果</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

 <script type="text/javascript">

  var SysSecond;

  var InterValObj; 

  $(document).ready(function() {

   SysSecond = parseInt($("#remainSeconds").html()); //这里获取倒计时的起始时间

   InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行

  }); 

  //将时间减去1秒，计算天、时、分、秒

  function SetRemainTime() {

   if (SysSecond > 0) {

    SysSecond = SysSecond - 1;

    var second = Math.floor(SysSecond % 60);             // 计算秒

    var minite = Math.floor((SysSecond / 60) % 60);      //计算分

    var hour = Math.floor((SysSecond / 3600) % 24);      //计算小时

    var day = Math.floor((SysSecond / 3600) / 24);        //计算天 

    $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");

   } else {//剩余时间小于或等于0的时候，就停止间隔函数

    window.clearInterval(InterValObj);

    //这里可以添加倒计时时间为0后需要执行的事件

   }

  }

 </script> 

 </head> 

 <body> 

 <div id="remainSeconds" style="display:none">3600</div>

 <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div> 

 </body>

 </html>

效果图

谢谢浏览！

Javascript 实现倒计时效果的更多相关文章

  1. javascript 时间倒计时效果

    <div id="divdown1"></div> <script language="javascript" type=&quo ...

  2. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  3. javascript特效实现(4)——当前时间和倒计时效果

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...

  4. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  5. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  6. Javascript之实现页面倒计时效果

    本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...

  7. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  8. jquery网页倒计时效果，秒杀，限时抢购！

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 英语阅读——A meaningful life

    这篇文章是<新视野大学英语>第四册的第八单元的文章. 1 The death of an angel of animal rights activism(活动家) does not rat ...

  2. MySQL for OPS 12：锁处理

    写在前面的话 在前面的内容中提到过,在以前的 MyISAM 中锁是表级锁,InnoDB 是行级锁.这个锁到底是啥样,怎么找出来,这一节就主要做这个. 定位锁的问题 上一节我们创建了一个 1000万数据 ...

  3. angular 前端路由不生效解决方案

    angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...

  4. Ubuntu桌面版安装小记

    之前一直是用Ubuntu的桌面版装docker,桌面版本身用起来比较方便,但开销较大,如果建立多个虚拟机就比较费劲了.今天试了一下server版的Ubuntu,发现还是比较方便的,相比桌面版,有如下好 ...

  5. CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)

    transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...

  6. 推荐一下干货-------为什么你的app不耐看

    直接上链接: 为什么你的app不耐看(上)https://www.ui.cn/detail/339252.html 为什么你的app不耐看(下)https://www.ui.cn/detail/423 ...

  7. 查询Mysql数据库所有数据库所占磁盘空间大小

    查询Mysql数据库所有数据库所占磁盘空间大小: /,),' MB') as data_size, concat(truncate(sum(index_length)//,),'MB') as ind ...

  8. nginx在centos下的安装

    第一步:打开浏览器下载,再上传到centOS系统中 http://nginx.org/download/ 或者在 centOS系统输入: wget http://nginx.org/download/ ...

  9. MySQL 同一Windows系统上安装多个数据库

    Step 1:拷贝一份MySQL整个安装文件,并拷贝一份 my.ini 文件放置安装目录下,然后修改以下内容.注意 port 不能设置为默认的3306,这里我们设置为3307端口. basedir=C ...

  10. 关于如何清除某个特定网站的缓存---基于Chrome浏览器

    1.清除浏览器缓存 直接在浏览器设置里面清除浏览器的缓存会清除所有网站的缓存信息,这在某些时候是非常不方便的,毕竟不只有测试网站,还会有一些我们不想清除的信息也会被清除掉: 2.通过F12功能去清除浏 ...