一种网页倒计时的实现

简介:

  网页倒计时网上代码很多,思路很简单,取出现在的时间跟结束时间做对比,求出时间差,然后用JS的setInterval函数来达到动态的效果。

     取出当前时间时有两种方案,如果对时间精度要求不是很高可以取客户端时间,反之就要取服务器端时间。取服务器时间一般是用ajax获取,我想有些朋友会在一定频率下用ajax去服务器获取,本人今天的一段代码就是这样,每隔一秒去服务器端取一次,这种方法初看没什么问题,但在用户量比较大和网络状况不好的情况下就有问题了,请求太频繁可能会导致服务器压力过大,反应很慢。后来在同事的提醒下代取了另一种思路,精确度基本能满足要求。

     本文提供一种比较简单的方案,思路就是在页面加载时用ajax去服务器获取当前时间,然后在JS中放一个全局变量,一秒钟加一,然后显示时间的方法每秒钟执行一次,执行时减去全局变量,具体代码如下:

      先建一个空白页面(ASP.NET页面或HTML页面都行)用于显示倒计时,引入jquery和一个JS文件(下面会介绍):

 

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
    
< title ></ title >
    
< script src = " JS/jquery-1.4.1.min.js "  type = " text/javascript " ></ script >
    
< script src = " JS/Test.js "  type = " text/javascript " ></ script >
</ head >
< body >
    
< form id = " form1 "  runat = " server " >
    
< div >
        
< span id = " auctionTime "  style = " font-size:40px;color:Red; " ></ span >< br  />
        
< span id = " count " ></ span >
    
</ div >
    
</ form >
</ body >
</ html >

     再新建一个WebService(TestWS.asmx)用于获取服务器端时间,代码如下:

 

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.Services;
using  System.Globalization;

///   <summary>
///  Get server time
///   </summary>
[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo 
=  WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public   class  TestWS : System.Web.Services.WebService {

    
public  TestWS () {
    }

    [WebMethod]
    
public   string  GetServerTime()
    {
        
return  DateTime.Now.AddSeconds( 120 ).ToString( " MMM dd,yyyy HH:mm:ss " , CultureInfo.GetCultureInfo( " en-US " ));
    }   
}

     然后就是JS调用这个WebService获取服务器端时间了,JS(Test.js)代码如下:

 

var  endTime = " Dec,27,2010 23:06:00 " ;
$(
function  () {
    GetServerTime();
})

function  GetServerTime() {
    $.ajax({
        url: 
' /UI/WS/TestWS.asmx/GetServerTime ' ,
        data: 
' {} ' ,
        type: 
' post ' ,
        dataType: 
' json ' ,
        contentType: 
' application/json; charset=utf-8 ' ,
        cache: 
false ,
        success: 
function  (data) {
            serverTime=data.d;

            $(
" #count " ).text(count);
            show_time();
            setInterval(
" show_time( ) " 1000 );
        },
        error: 
function  (xhr) {
            alert(xhr);
        }
    });
}
var serverTime;
var timespan = 0;
function show_time() {
    var time_distance, str_time;
    var int_day, int_hour, int_minute, int_second;
    var time_now = new Date(serverTime); 
    var time_end = new Date($("#endTime").text());
    time_now = time_now.getTime();
    time_end = time_end.getTime();
    //取系统现在时间
    time_distance = time_end - time_now-timespan*1000;
    //时间间隔。
    if (time_distance >= 0) {
        timespan = timespan + 1;
        if (Math.floor(time_distance) < 30000) {
            $("#auctionTime").css("color", "#FF0000");
        }
        if (time_distance == 0) {
            if (toop) {
                toop = false;
                $("#auctionTime").css("color", "#369A28");
                $("#currTime").text("00:00:00");
                $("#auctionTime").text("00:00:00");
                GetWiner();
                return;
            }
            return;
        }
        //取出间隔时间的天、小时、分
        int_day = Math.floor(time_distance / 86400000);
        time_distance -= int_day * 86400000;
        int_hour = Math.floor(time_distance / 3600000);
        time_distance -= int_hour * 3600000;
        int_minute = Math.floor(time_distance / 60000);
        time_distance -= int_minute * 60000;
        int_second = Math.floor(time_distance / 1000);

        if (int_hour < 10)
            int_hour = "0" + int_hour;
        if (int_minute < 10)
            int_minute = "0" + int_minute;
        if (int_second < 10)
            int_second = "0" + int_second;
        str_time = int_hour + ":" + int_minute + ":" + int_second;
        $("#auctionTime").text(str_time);
    } else { }
}

     代码很简单,结构就不说了,只是注意WebService的路径,效果如下:

 

 

      只是我在服务器端把当前时间添加了120秒,但在这儿时间差确是119,写到这儿我查了一下,是Math.floor()精度原因,Math.floor()是取整数部分,因此为了更精确应该加上一秒。



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
1月前
|
C#
C# 如何使用倒计时
C# 如何使用倒计时
37 0
|
1月前
简单倒计时
简单倒计时
17 0
|
1月前
CSS3电影播放倒计时读秒代码
CSS3电影播放倒计时读秒代码
24 2
CSS3电影播放倒计时读秒代码
|
1月前
|
移动开发 JavaScript 前端开发
分享75个JS特效倒计时,总有一款适合您
分享75个JS特效倒计时,总有一款适合您
41 0
|
1月前
uniapp实现倒计时
uniapp实现倒计时
72 0
|
1月前
|
开发者 智能硬件
倒计时器
倒计时器
85 1
|
7月前
|
JavaScript 前端开发
js实现长按录制视频按钮外部转圈倒计时10秒的效果
js实现长按录制视频按钮外部转圈倒计时10秒的效果
47 0
倒计时功能制作
今天制作一个商城项目距离抢购还剩多长时间的一个小功能 首先要知道这个倒计时是不断的变化的,所以需要用到定时器来自动变化(setInterval),有三个标签存放时分秒,再利用innerHTML将计算出来的时间放入三个标签内,第一次执行也是间隔毫秒数,因此刷新页面会有空白,我们最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题。