jquery实现倒计时功能

2024-09-28 11:32:42

本文实例为大家分享了jquery倒计时功能的实现代码，供大家参考，具体内容如下

定义和用法：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
下面举例

<html>
 <head>
  <meta charset="utf-8">
  <title>jquery简单倒计时</title>
  </style>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript">

   var intDiff = parseInt(60);//倒计时总秒数量

   function timer(intDiff) {
    window.setInterval(function() {
     var day = 0,
       hour = 0,
       minute = 0,
       second = 0;//时间默认值
     if (intDiff > 0) {
      day = Math.floor(intDiff / (60 * 60 * 24));
      hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
      minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
      second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
     }
     if (minute <= 9)
      minute = '0' + minute;
     if (second <= 9)
      second = '0' + second;
     $('#day_show').html(day + "天");
     $('#hour_show').html('<s id="h"></s>' + hour + '时');
     $('#minute_show').html('<s></s>' + minute + '分');
     $('#second_show').html('<s></s>' + second + '秒');
     intDiff--;
    }, 1000);
   }

   $(function() {
    timer(intDiff);
   });
  </script>
 </head>
 <body>
  <h1>网页上的倒计时</h1>
  <div class="time-item">
   <span id="day_show">0天</span>
   <strong id="hour_show">0时</strong>
   <strong id="minute_show">0分</strong>
   <strong id="second_show">0秒</strong>
  </div>
  <!--倒计时模块-->
 </body>
</html>

希望本文所述对大家学习jquery程序设计有所帮助。

基于jQuery实现美观且实用的倒计时实例代码

倒计时效果有着广泛的应用,比如奥运会倒计时.高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>倒计时效果代
jquery简单倒计时实现方法

本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2
JQuery实现的按钮倒计时效果

本文实例讲述了JQuery实现的按钮倒计时效果.分享给大家供大家参考,具体如下: 一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下: <html> <head> <title>test count down button</title> <script src="jquery1.8.3.min.js" type="text/javascript"></script&g
jQuery倒计时代码(超简单)

具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script
jquery实现的判断倒计时是否结束代码

本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa
jQuery实现倒计时功能完整示例

本文实例讲述了jQuery实现倒计时功能.分享给大家供大家参考,具体如下: demo代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
jquery实现倒计时功能

本文实例为大家分享了jquery倒计时功能的实现代码,供大家参考,具体内容如下定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 下面举例 <html> <head> <meta charset="utf-8&
jQuery实现倒计时功能 jQuery实现计时器功能

本文转载自 jquery 做一个小的倒计时效果在实际运用中,经常会使用到倒计时的效果.以下代码利用jQuery实现了一个倒计时计时器. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery倒计时实现</title> <style type="text/css"> .shop_list ul li{ di
jQuery基于扩展简单实现倒计时功能的方法

本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法.分享给大家供大家参考,具体如下: jQuery.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '36px', endFontSize: '12px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings);
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta
jQuery插件开发发送短信倒计时功能代码

实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>
jQuery短信验证倒计时功能实现方法详解

本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!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" > &l
jQuery模拟爆炸倒计时功能实例代码

HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动
jQuery实现倒计时重新发送短信验证码功能示例

本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown
jQuery实现简单倒计时功能的方法

本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

jquery实现倒计时功能

相关推荐

随机推荐