jquery实现倒计时

 1 <html>
 2 <head>
 3     <meta charset="utf-8"/>
 4     <title>jquery实现倒计时</title>
 5     <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
 6 </head>
 7
 8 <body>
 9 <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
10
11 <script type="text/javascript">
12     $(function(){
13         var now=new Date();
14         var end=new Date(2018,2,3,16,10,00);//结束的时间:年,月,日,分,秒(月的索引是0~11)
15         /*两个时间相减,得到的是毫秒ms,变成秒*/
16         var result=Math.floor(end-now)/1000;
17
18         var interval=setInterval(sub,1000); //定时器 调度对象
19         /*封装减1秒的函数*/
20         function sub(){
21             if (result>1) {
22                result = result - 1;
23                var second = Math.floor(result % 60);     // 计算秒 ,取余
24                var minite = Math.floor((result / 60) % 60); //计算分 ,换算有多少分,取余,余出多少秒
25                var hour = Math.floor((result / 3600) % 24); //计算小时,换算有多少小时,取余,24小时制除以24,余出多少小时
26                var day = Math.floor(result / (3600*24));  //计算天 ,换算有多少天
27
28                $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
29             } else{
30                 alert("倒计时结束!");
31                 window.clearInterval(interval);//这里可以添加倒计时结束后需要执行的事件
32             }
33         };
34     });
35 </script>
36 </body>
37 </html>
时间: 2024-12-10 03:18:25

jquery实现倒计时的相关文章

jQuery实现倒计时效果-杨秀徐

本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时效果-杨秀徐</title> <script type="text/javascript" src="/scripts/jquery.js"></script> <script type="text/javascrip

jQuery控制倒计时

1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的. 而在具体商品页,时间要求比较严谨,可以通过每秒向服务器提交信息核实,也可以通过隔时间段提交,核对并确保时间无误(误差较小). 1.2 jQuery控制倒计时示例 1 $(document).ready(function() { 2 onTimer("#time",12000); 3 }

jQuery简单倒计时插件

1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * 简单倒计时 * * 支持页面内同时存在多个计时器并且不互相干扰 * * Usage: * * <div class="timer-simple-seconds" timer="3600"> * <span class="hour">hour</span>小时<span class="minute"&

jquery按钮倒计时

<!DOCTYPE html> <html> <head> <title>发送验证码</title> </head> <body> 手机号:<input type="text" name="mobile" value="" id="mobile"> 验证码:<input type="text" name=&

jQuery登录倒计时

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown=60; functi

jQuery实现倒计时功能

代码实现: html: jQuery: 网上参考: 附1.JavaScript UTC() 方法 附2.JavaScript getTimezoneOffset() 方法

Jquery验证码倒计时

html代码: <input type="button" value="获取验证码" id="getCode" style="color:#4664E6;background:white;" /> Jquery代码:别忘了引用jquery库 <script type="text/javascript"> var countdown = 60; $(function () { $(&q

Jquery 定时器 倒计时

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src='jquery-1.7.js'></script></head><body>    <input type="button

jquery时间倒计时

代码: js: function countDown(time, id) {  //time的格式yyyy/MM/dd hh:mm:ss    var day_elem = $(id).find('.day');    var hour_elem = $(id).find('.hour');    var minute_elem = $(id).find('.minute');    var second_elem = $(id).find('.second');    var end_time