代码来自于网上。

<!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. Shell（1）---变量

    Shell(1)---变量 初衷:学习shell的目的很简单,自己经常在linux服务器上做各种操作,而且基本上是一些相同的命令操作,所以就想通过shell脚本来启动就行,能够节省一定的开发时间,提高 ...

  2. sqlite3数据库最大可以是多大？可以存放多少数据？读写性能怎么样？

    sqlite是款不错的数据库,使用方便,不需要事先安装软件,事先建表.很多人担心它的性能和数据存储量问题. 比如有的网友问:Sqlite数据库最大可以多大呀?会不会像acc数据库那样,几十MB就暴掉了 ...

  3. 使用 C# 实现 CJ-T188 水表协议和 DL-T645 电表协议的解析与编码

    一.协议的定义 要对某种协议进行编解码操作,就必须知道协议的基本定义,首先我们来看一下 CJ/T188 的数据帧定义(协议定义),了解请求数据与响应数据的基本结构. 1.1 CJ/T188 水表通讯协 ...

  4. 关于.Net Core 部署在Linux下连接SqlServer数据库超时解决办法

    .Net Core 在 Linux 下连接 SqlServer 需要 SqlServer2008 SP3或以上版本,或SqlServer2012,或SqlServer2014. 如果SqlServer ...

  5. Java日期时间API系列5-----Jdk7及以前的日期时间类TimeUnit在并发编程中的应用

    TimeUnit是一个时间单位枚举类,主要用于并发编程,时间单元表示给定粒度单元的时间持续时间,并提供实用程序方法来跨单元转换,以及在这些单元中执行计时和延迟操作. 1.时间单位换算 (1)支持的单位 ...

  6. PHP面试题2019年搜狐面试题及答案解析

    一.单选题(共27题,每题5分) 1.阅读下面PHP代码,并选择输出结果( ) A.0 B.1 C.2 D.3 参考答案:D 答案解析:static属性常驻内存 2.PHP单例模式操作描述错误的是? ...

  7. Django---SETTINGS配置(***)

    Django---SETTINGS核心配置项 django核心配置项 Django的默认配置文件中,包含上百条配置项目,其中很多是我们'一辈子'都不碰到或者不需要单独配置的,这些项目在需要的时候再去查 ...

  8. QNetworkRequest加Authorization头，适应Rest风格的API

    Rest是无状态的.Rest的请求之间不应该有依赖,在调用一个请求前,不需要一定要去提前调用另外一个请求.Rest里面不应该有 session,特别是Rest请求不应该保存信息在sesssion里,以 ...

  9. java读取文本文件内容

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/128 java读取文本文件内容 今天写代码写着要调试一个很 ...

  10. layui js 常用语句语法

    烂笔头: layui组件使用 注意layui的版本. 在head里需要引入css/js文件. 出现 form.verify,form.val is not a function的错误信息时,注意版本, ...