• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery实现倒计时功能

jquery实现倒计时功能

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery,倒计时等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例为大家分享了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程序设计有所帮助。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery手风琴的简单制作
  • (jQuery,mootools,dojo)使用适合自己的编程别名命名
  • jQuery+HTML5实现图片上传前预览效果
  • jquery表单插件form使用方法详解
  • jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
  • JQuery 返回布尔值Is()条件判断方法代码
  • JS与jQuery实现隔行变色的方法
  • jquery实现在光标位置插入内容的方法
  • 基于JQuery的动态删除Table表格的行和列的代码
  • jQuery布局插件UI Layout简介及使用方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
    • jquery设置text的值示例(设置文本框 DIV 表单值)
    • jquery validate demo 基础
    • ajax+jQuery实现级联显示地址的方法
    • Jquery公告滚动+AJAX后台得到数据
    • 如何利用JQuery实现从底部回到顶部的功能
    • javascript截图 jQuery插件imgAreaSelect使用详解
    • 40个新鲜出炉的jQuery 插件和免费教程[上]
    • jquery实现九宫格大转盘抽奖
    • jQuery、zepto、js常用小技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有