scriptmanager调用webservice实现的倒计时

makuixuan

浏览: 36279 次
性别:
来自: 上海

最近访客更多访客>>

Cloud_GTY

真的唯一

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

webservice

WebService Chrome Web 招聘 Firefox

最近要做一个招聘系统，其中涉及到了笔试的倒计时功能，找了一些解决方法，在这里记录一种是用scriptmanager调用webservice的实现方法，倒计时间的计算是服务端计算的，即使客户端刷新页面或重新点击开始倒计时也不管用。
aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsWebService倒计时.aspx.cs"
    Inherits="AJAXEnabledWebApplication1.JsWebService倒计时" %>

<!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 runat="server">
    <title>JsWebService倒计时</title>
    <script type="text/javascript" src="killF5.js"></script>

    <script type="text/javascript">
        var totalSeconds; //剩余时间(秒)
        var timer; //倒计时控制器
        var o_blink; //闪烁
        var isstart = false; //标记是否开始

        //开始倒计时
        function kaishi() {
            //取消闪烁
            if ($get("msg").innerHTML != "") {
                $get("msg").innerHTML = "";
                stopblink();
            }
            AJAXEnabledWebApplication1.CountdownService.GetTotalSeconds(onSucceeded); //获取剩余时间(秒)
            //开始倒计时
            timer = setInterval("startCountdown()", 1000);
            isstart = true;
        }
        //结束倒计时
        function jieshu() {
            clearInterval(timer);
            isstart = false;
        }
        //倒计时函数  
        function startCountdown() {
            AJAXEnabledWebApplication1.CountdownService.GetTotalSeconds(onSucceeded); //获取剩余时间(秒)
            if (totalSeconds > 0) {
                var days = Math.floor(totalSeconds / 86400);
                var hours = Math.floor(totalSeconds % 86400 / 3600);
                var minutes = Math.floor(totalSeconds % 3600 / 60);
                var seconds = Math.floor(totalSeconds % 60);

                $get("lblDays").innerHTML = days;
                $get("lblHours").innerHTML = (hours >= 10 ? hours : "0" + hours);
                $get("lblMinutes").innerHTML = (minutes >= 10 ? minutes : "0" + minutes);
                $get("lblSeconds").innerHTML = (seconds >= 10 ? seconds : "0" + seconds);
            }
            else {
                clearInterval(timer);
                $get("lblSeconds").innerHTML = "00";
                $get("msg").innerHTML = "答题时间到！";
                blink("msg");
                isstart = false;
            }
        }
        //成功获取剩余时间后的回调函数  
        function onSucceeded(result) {
            totalSeconds = result;
        }

        //时间到提示闪烁
        function blink(elId) {
            var html = '';
            if (document.all)
                html += 'var el = document.all.' + elId + ';';
            else if (document.getElementById)
                html += 'var el = document.getElementById("' + elId + '");';
            html +=
              'el.style.visibility =' +
              'el.style.visibility ==   "hidden"   ?   "visible"   :   "hidden"';
            if (document.all || document.getElementById)
                o_blink = setInterval(html, 500)
        }
        //停止闪烁  
        function stopblink() {
            clearInterval(o_blink);
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="CountdownService.asmx" />
            </Services>
        </asp:ScriptManager>
        <div id="DivCountdown" style="border-style: solid;" align="center">
            JsWebService倒计时<br />
            <br />
            <input id="Button1" type="button" value="开始计时" onclick="kaishi()" />
            &nbsp;&nbsp
            <input id="Button2" type="button" value="结束计时" onclick="jieshu()" />
            <br />
            <br />
            <asp:Label ID="lblDays" runat="server" Text="0" ForeColor="Red" />天
            <asp:Label ID="lblHours" runat="server" Text="0" ForeColor="Red" />时
            <asp:Label ID="lblMinutes" runat="server" Text="0" ForeColor="Red" />分
            <asp:Label ID="lblSeconds" runat="server" Text="0" ForeColor="Red" />秒
            <br />
            <span id="msg" style="height: 20px; background-color: #ffe4c4;"></span>
        </div>
    </div>
    </form>
</body>
</html>

webservice.cs文件，考试时长可以在web.config文件中定义或者将对应试题的考试时间保存到数据库，然后从数据库中提取。

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
//
using System.Configuration;

namespace AJAXEnabledWebApplication1
{
    /// <summary>
    /// CountdownService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService]
    public class CountdownService : System.Web.Services.WebService
    {
        [WebMethod(EnableSession = true)]
        public int GetTotalSeconds()
        {
            DateTime StartTime = DateTime.Now;                             //开始时间
            if (Session["StartTime"] != null)
            {
                StartTime = (DateTime)Session["StartTime"];
            }
            else
            {
                Session["StartTime"] = StartTime;
            }
            DateTime EndTime = StartTime.Add(TimeSpan.FromHours(double.Parse(ConfigurationManager.AppSettings["timeLength"].ToString())));
            DateTime NowTime = DateTime.Now;
            TimeSpan Countdown = EndTime - NowTime;
            if (Countdown.TotalSeconds<=0)
            {
                Session["StartTime"] = null;
            }
            return (Countdown.TotalSeconds > 0) ? (int)Countdown.TotalSeconds : 0; 
        }
    }
}

另外还添加了屏蔽f5和右键的js，一起附上，防止客户端刷新页面。

//屏蔽f5
function DisableF5() {
    with (event) {
        // F5 and Ctrl+R   
        if (keyCode == 116 || (ctrlKey && keyCode == 82)) {
            event.keyCode = 0;
            event.cancelBubble = true;
            return false;
        }
    }
}
document.onkeydown = DisableF5;

//屏蔽网页右鍵，适用于IE6,IE7,IE8,FireFox,谷歌Chrome浏览器
function clickIE4() {
    if (event.button == 2) {
        return false;
    } //end if
} //end func

function clickNS4(e) {
    if (document.layers || document.getElementById && !document.all) {
        if (e.which == 2 || e.which == 3) {
            return false;
        } //end if
    } //end if
} //end func

function OnDeny() {
    if (event.ctrlKey || event.keyCode == 78 && event.ctrlKey || event.altKey || event.altKey && event.keyCode == 115) {
        return false;
    } //end if
}

if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = clickNS4;
    document.onkeydown = OnDeny();
} else if (document.all && !document.getElementById) {
    document.onmousedown = clickIE4;
    document.onkeydown = OnDeny();
} //end if

document.oncontextmenu = new Function("return false");

分享到：