scriptmanager调用webservice实现的倒计时
最近要做一个招聘系统，其中涉及到了笔试的倒计时功能，找了一些解决方法，在这里记录一种是用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()" />
 
<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");
