一种网页倒计时的实现-阿里云开发者社区

开发者社区> 技术mix呢> 正文

一种网页倒计时的实现

简介:
+关注继续查看

  网页倒计时网上代码很多,思路很简单,取出现在的时间跟结束时间做对比,求出时间差,然后用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/,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
# [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
6 0
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
7 0
解决echarts地图geoJson报错问题(“echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope”)
解决报错: 1.Invalid geoJson format Cannot read property ‘length’ of undefined 2 echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope
5 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
我的历程分享
简述我的学习生涯
15 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载