显示访客停留时间,jquery倒计时效果
分类:微服架构

00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>显示当前岁月</title>
<script type="text/javascript">
function showtime(卡塔尔{//创设函数
   var now_time = new Date(State of Qatar;//创立时间对象的实例
   var hours = now_time.getHours(卡塔尔(قطر‎;//获得当前时辰数
   var minutes = now_time.getMinutes(State of Qatar;//得到当前分钟数
   var seconds = now_time.getSeconds(卡塔尔国;//获得当前秒数
   var timer = ""+ ((hours>12卡塔尔国?hours -12:hours);//将小时数值授予变量timer
   timer+=((minutes<10卡塔尔?":0":":"卡塔尔(قطر‎+minutes;//将秒钟数予以变量timer
   timer+=((seconds<10State of Qatar?":0":":"卡塔尔(قطر‎+seconds;//将秒数授予timer
   timer+=""+((hours>12卡塔尔?" PM":" AM"卡塔尔国;//将字符AM或PM赋予变量timer
   document.clock.show.value=timer;//在名称叫clock的表单中输出变量timer的值
   set提姆eout("showtime(卡塔尔国",1000State of Qatar;//设置每间距生机勃勃分钟自动调用三遍showtime()函数
}
</script>
</head>
<body onload="showtime()" >
<form name="clock" onsubmit="0">
<input type="text" name="show" size="10"
style=" border-width: 3;">
</form>
</script>
</body>
</html>

jquery倒计时从前也是有讲过众多,那个jquery倒计时间效果与利益应是以团购网址产物倒计时为贯彻来布局做的,固然你风乐趣不防步向仿效一下啊。

<div id="timeid">00:00</div> <script type="text/javascript"> <!-- totalseconds=0; minutes=0; seconds=0; function timer() { ++totalseconds; showtime(); } function showtime() { seconds=totalseconds%60; minutes=(totalseconds/60>=minutes+1)?++minutes:minutes; seconds=(seconds<10)?"0"+seconds:seconds; showseconds=(minutes<10)?"0"+minutes:minutes; document.all.timeid.innerHTML=showseconds+":"+seconds; } setInterval("timer()",1000); --> </script>

正文以团购网址的倒计时为背景,大家领略,网址会给各种巨惠活动(商品)定三个扫尾时间,相当于到期时间,但系统时间达到了结束时间,就代表移动收尾。由此,大家在HTML中将要定义活动的终结时间。
HTML

[Ctrl+A 全体采撷 提醒:你可先改良部分代码,再按运维]

 代码如下

复制代码

<ul class="prolist">
     <li><img src="images/p1.jpg" />简约时髦皮带男人钟表生机勃勃款69元<p class="endtime showtime"
      value="1354365003"></p></li>
     <li><img src="images/p2.jpg" />高强度没有害树脂材质榨汁器24元<p class="endtime showtime"
      value="1350748800"></p></li>
     <li><img src="images/p3.jpg" />茶香番茄/乌梅/白蒂梅0.48元<p class="endtime showtime"
      value="1346487780"></p></li>
     <li><img src="images/p4.jpg" />沙滩鞋男人室外凉鞋69元<p class="endtime showtime"
      value="1367380800"></p></li>
</ul>

上述html代码中,大家创制了二个列表,用于体现活动名称、图片和倒计时,关键的是大家在各类移动定义了过逝时间:.endtime属性value的值,那几个值是生机勃勃串数字,表示自1966年17月1日的话的秒数,由后台(PHP)生成。比方截止时间二零一一-05-01 12:00得以经过PHP转变为1367380800秒,转变后的秒数能够用来接下去的jQuery总结倒计时。
CSS

大家需求给页面中的列表实际一个多少赏心悦目点的外观。

 代码如下

复制代码

.endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000}
.prolist{margin:10px auto}
.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px; 
position:relative}
.prolist li img{width:320px; height:198px;}
.showtime{position:absolute; top:174px; height:24px; line-height:24px; 
background:#333; color:#fff; opacity:.6; display:none}

保留,预览页面效果,能够看看三个排列次序分明的移位列表。
jQuery

 代码如下

复制代码

var serverTime =  * 1000; //服务器时间,纳秒数
$(function(){
    var dateTime = new Date();
    var difference = dateTime.get提姆e(State of Qatar - serverTime; //客商端与服务器时间偏移量
    
    setInterval(function(){
      $(".endtime").each(function(){
        var obj = $(this);
        var endTime = new Date(parseInt(obj.attr('value')) * 1000);
        var nowTime = new Date();
        var nMS=endTime.getTime() - nowTime.getTime() + difference;
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); //天
        var myH=Math.floor(nMS/(1000*60*60)) % 24; //小时
        var myM=Math.floor(nMS/(1000*60)) % 60; //分钟
        var myS=Math.floor(nMS/1000) % 60; //秒
        var myMS=Math.floor(nMS/100) % 10; //拆分秒
        if(myD>= 0){
            var str = myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";
        }else{
            var str = "已结束!";    
        }
        obj.html(str);
      });
    }, 100卡塔尔国; //各样0.1秒试行贰回
});

我们率先获得服务器时间,大家要将倒计时与服务器时间保持生机勃勃致,那样一来各类客户端收看的倒计时是大同小异的,大家通过测算客商端与服务器的时辰偏移量,来制止了因客商机器时间与服务器时间不均等而孳生的倒计时不一齐的麻烦。当然那几个服务器时间须要利用服务端语言来收获,本文使用了PHP的time(卡塔尔(قطر‎函数获取的秒数,记得要倍加1000退换到皮秒数。

我们经过setInterval建构三个计时器,并且每一个100皮秒实行三回setInterval里面包车型地铁代码。

然后在电火花计时器里,大家选用jQuery的each(卡塔尔国方法,遍历页面中的列表,计算天、小时、分、秒。

因为javascript的getTime(State of Qatar函数获取的是皮秒数,所以测算进程中都要/1000,

小编们并不想在三个页面将列表中具有的倒计时都展现出来,而需求客户将鼠标滑向列表中的图片才显得相应的倒计时,由此大家还索要投入以下扶持代码:

 代码如下

复制代码

$(function(){
    $(".prolist li img").each(function(){
        var img = $(this);
        img.hover(function(){
            img.next().show();
        },function(){
            img.next().hide();
        });
    });
});

末段效果图

图片 1

下面讲罢了,上边看个功用

 代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:700px; margin:30px auto}
.times{height:80px; width:320px; margin:0 auto; background:url(images/clock.jpg) no-repeat; padding-left:50px}
.times p{height:20px; line-height:20px;}
.endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000}
.prolist{margin:10px auto}
.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px; position:relative}
.prolist li img{width:320px; height:198px;}
.showtime{position:absolute; top:174px; height:24px; line-height:24px; background:#333; color:#fff; opacity:.6; display:none}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var serverTime = 1384574162 * 1000;
$(function(){
    var dateTime = new Date();
    var difference = dateTime.getTime() - serverTime;
 
    setInterval(function(){
      $(".endtime").each(function(){
        var obj = $(this);
        var endTime = new Date(parseInt(obj.attr('value')) * 1000);
        var nowTime = new Date();
        var nMS=endTime.getTime() - nowTime.getTime() + difference;
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24));
        var myH=Math.floor(nMS/(1000*60*60)) % 24;
        var myM=Math.floor(nMS/(1000*60)) % 60;
        var myS=Math.floor(nMS/1000) % 60;
        var myMS=Math.floor(nMS/100) % 10;
        if(myD>= 0){
   var str = myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";
        }else{
   var str = "已结束!"; 
  }
  obj.html(str);
      });
    }, 100);
 
 
 $(".prolist li img").each(function(){
  var img = $(this);
  img.hover(function(){
   img.next().show();
  },function(){
   img.next().hide();
  });
 });
});
</script>
</head>

<body>

<div id="main">

  <div class="demo">
     <div class="times">
        <p>距离2014年1月31日(春节)还有</p>
        <div class="endtime" value="1391126400"></div>
     </div>
    
     <ul class="prolist">
         <li><img src="images/p1.jpg" />简约风尚皮带男人手表少年老成款69元<p class="endtime showtime" value="1398902400"></p></li>
         <li><img src="images/p2.jpg" />高强度无害树脂材料榨汁器24元<p class="endtime showtime" value="1391212800"></p></li>
         <li><img src="images/p3.jpg" />茶香西红柿/乌梅/圣生梅0.48元<p class="endtime showtime" value="1417392002"></p></li>
         <li><img src="images/p4.jpg" />沙滩鞋男子室外凉鞋69元<p class="endtime showtime" value="1377380800"></p></li>
     </ul>
     <div style="clear:both"></div>
  </div>
 
</div>

</body>
</html>

例如你必要不高可参看上边jquery倒计时间效果与利益能二

 

 代码如下

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jquery倒计时间效果与利益能</title>
<style>
  .time-item strong{background:#C71C60;color:#fff;line-height:49px;font-size:36px;font-family:Arial;padding:0 10px;margin-right:10px;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
#day_show{float:left;line-height:49px;color:#c71c60;font-size:32px;margin:0 10px;font-family:Arial, Helvetica, sans-serif;}
.item-title .unit{background:none;line-height:49px;font-size:24px;padding:0 10px;float:left;}
  h1{font-family:"微软雅黑";font-size:40px;margin:20px 0;;border-bottom:solid 1px #ccc;padding-bottom:20px;letter-spacing:2px;}
</style>
<script src="/img/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 var intDiff = parseInt(二零零四00卡塔尔国;//初阶日期
 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+"days");
  $('#hour_show').html('<s id="h"></s>'+hour+'h');
  $('#minute_show').html('<s></s>'+minute+'m');
  $('#second_show').html('<s></s>'+second+'s');
  intDiff--;
  }, 1000);
 }
 $(function(){
  timer(intDiff);
 }); 
</script>
</head>
<body>
  <h1>网页上的倒计时</h1>
  <div class="time-item">
  <span id="day_show">0days</span>
  <strong id="hour_show">0h</strong>
  <strong id="minute_show">0m</strong>
  <strong id="second_show">0s</strong>
  </div><!--倒计时模块-->
</body>
</html>

本文...

本文由10bet手机官网发布于微服架构,转载请注明出处:显示访客停留时间,jquery倒计时效果

上一篇:时分秒显示的石英表 下一篇:没有了
猜你喜欢
热门排行
精彩图文