bobojQuery实现倒计时效果

使用jQuery实现倒计时效果,这个实例是在页面上显示剩余几天几小时几分几秒的效果。

在头部引用最新的jQuery.js文件:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery.js" type="text/javascript"></script>

</head>

前台页面:

<body>
         <div id="remainSeconds" style="display:none">180000</div>
         <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
         </body>

jQuery代码:

<script type="text/javascript" language="javascript">
          var SysSecond;
          var InterValObj;
          $(document).ready(function() {
          SysSecond = parseInt($("#remainSeconds").html());
          InterValObj = window.setInterval(SetRemainTime, 1000);
          });
          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 {
           window.clearInterval(InterValObj);
           }
           }
           </script>

bobojQuery实现倒计时效果,布布扣,bubuko.com

时间: 2024-10-29 19:10:58

bobojQuery实现倒计时效果的相关文章

javascript特效实现(4)——当前时间和倒计时效果

这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func

[jQuery编程挑战]006 生成一个倒计时效果

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>生成一个倒计时效果</title> <style type="text/css"> body{ margin:0; padding:0; background: orange; width: 100%; height: 10

Andorid实现点击获取验证码倒计时效果

这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现. 1.先进行倒计时工具类的封装 1 public class CountDownTimerUtils extends CountDownTimer { 2 private TextView mTextView; 3 4 /** 5 * @param

网页上的倒计时效果

<!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><title>jquery数字倒计时代码</title&

js实现倒计时效果

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>倒计时效果</title><link rel="stylesheet" href="css/demo.css" /></head> <body&g

使用setTimeout()实现倒计时效果代码实例

使用setTimeout()实现倒计时效果代码实例:大多数情况下实现倒计时效果是使用setInterval()函数,因为此函数可以每隔指定的实现就执行一次指定函数,而setTimeout()函数只能够执行一次,不过也是可以实现倒计时效果的,下面就通过代码实例介绍一下如何利用setTimeout()函数实现倒计时效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

倒计时效果显示

<!DOCTYPE html><html><head>    <title>倒计时效果显示</title>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <script type="text/javascript" src="https://code.jquer

canvas绘图详解-03-绚丽的倒计时效果

制作一个上面这种倒计时效果,只截图了三秒 此效果源码github连接:https://github.com/wufangfang0614/fanggit/tree/master/canvas/%E5%80%92%E8%AE%A1%E6%97%B6%E6%97%B6%E9%92%9F 首先分析这个得有一定的数学知识和物理知识(看这个课程的时候,心想要是让我自己想明白这个过程我可弄不明白.)

Android倒计时效果

借用聚美优品的广告词来开始今天的文章之旅: 从未年轻过的人,一定无法体会这个世界 的偏见.我们被世俗拆散,也要为爱情勇 往直前:我们被房价羞辱,也要让简陋的 现实变的温暖:我们被权威漠视,也要为 自己的天分保持骄傲:我们被平庸折磨, 也要开始说走就走的冒险.所谓的光辉岁 月,并不是后来闪耀的日子,而是无人问 津时,你对梦想的偏执,你是否有勇气, 对自己忠诚到底,我是Bruce常,我为自己加油. 平常开发中,在做倒计时效果的时候,经常需要用到定时器,今天看到一篇文章,专门写 定时器的,我就仔细阅读