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() " />
& 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 " );

 

 

转载于:https://www.cnblogs.com/makuixuan/archive/2010/12/28/1919070.html