代码来自于网上。

<!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. 如何查看laravel门脸类包含方法的源码

    以Route门脸类为例,我们定义路由时使用的就是Route门脸类,例如我们在web.php中定义的路由 use Illuminate\Support\Facades\Route; Route::get ...

  2. 最近的项目系之3——core3.0整合Senparc

    1.前言 既然是.net下微信开发,自然少不了Senparc,可以说这个框架的存在, 至少节省了微信相关工作量的80%.事实上,项目开始前,还纠结了下是Java还是core,之所以最终选择core,除 ...

  3. .net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载

    前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压 ...

  4. Java入门——编写并运行第一个程序

    Java入门——编写并运行第一个程序 摘要:本文主要介绍如何使用Java语言编写并通过DOS运行简单的程序. 编写简单的程序 在D盘新建一个文本文档,输入如下代码: class Hello { pub ...

  5. JS基础语法---分支语句总结

    分支语句: if语句:一个分支 if-else语句:两个分支,最终只执行一个分支 if-else if-else if...语句: 多个分支,也是只会执行一个 switch-case语句:多分支语句, ...

  6. CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  7. .net core 使用ViewComponent

    .net core 中的局部视图组件是ViewComponent,可以用于建制重复使用公共功能组件 一.新建一个类DemoViewComponent(必须以ViewComponent结尾)且继承Vie ...

  8. Typescript基础(4)——接口

    前言 今天继续typescript的学习,开始ts接口部分的学习. 接口 接口的理解 首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...

  9. js实现textarea自适应高度

    html结构: <div class="container" id="container"> <div class="text-wr ...

  10. HiGV ui代码流程

    在海思PDT_Init下有一个这样的函数HI_PDT_UI_Init(): 1. HI_PDT_UI_Init()函数: /*public, it should be called by main() ...