ASP.NET实现javascript无刷新倒计时

这段时间在做课程设计的时候，遇到了一个挺好的功能模块，感觉可以跟大家分享下。

我做的是一个网上商店，在做的过程中，我参考很多网店上有特别推荐的商品，这些特别推荐的商品基本上都有一个标识，就是在显示这个商品的“特别推荐时间倒计时”，于是我就是想做个类似的功能，下面就是我的实现过程！做的比较简单，不过想要的功能都已经实现了，希望对有需要的人有所帮助！

主要实现代码是一段js函数，其中的id之类的标识，是需要你自己根据你的项目里的控件进行修改的

下面是这个项目的代码：

前台：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js倒计时</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="hfdZC" runat="server" ClientIDMode="Static" />

<asp:Label ID="lalSeetime" runat="server"></asp:Label>

</div>
</form>

<script type="text/javascript">
var zcTime = document.getElementById("hfdZC").value;
/*获取倒计时的起始时间，考虑到有时候需要读取数据库里的标注时间值，所以这个值我是在后台对它赋值的，这样做方便对它的操作更改*/
element = document.getElementById('<%=lalSeetime.ClientID%>');
//用element暂存lable的
window.setInterval(function ()
//定义计算函数
{
zcTime = zcTime - 1;
var time = parseInt(zcTime);
var hour = parseInt(zcTime / 3600);
var min = parseInt(zcTime % 3600 / 60);
var sec = parseInt(zcTime % 60);
if (hour < 0 || min < 0 || sec < 0) {
var clsj = "0" + "小时" + "0" + "分钟" + "0" + "秒";
}
else {
var clsj = hour + "小时" + min + "分钟" + sec + "秒";
}
element.innerText = clsj;
//把计算出的值负给lable，就可以啦！
}, 1000);
</script>
</body>
</html>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Time
{
public partial class timeDJS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

DateTime time1 = Convert.ToDateTime(DateTime.Now.ToLocalTime().ToString());
//获取当前时间
DateTime time2 = Convert.ToDateTime("2014/7/8 17:00:00");
//获取计时的初始时间，在实际项目中，这个值也应从数据库取，我这是为了方便你测试、理解，直接负的初值，当然，你需要根据自己的实际情况给time2赋初值
TimeSpan TS = time1 - time2;
int usetime = Convert.ToInt32(TS.TotalSeconds.ToString());
//转化成int型
int bztime = 72000000;
//标准时间，这个是及时的总时间，在实际项目中，这个值也应从数据库取，我这是为了方便你测试理解
int sptime = bztime - usetime;
this.hfdZC.Value = sptime.ToString();
/*给隐藏域，负值，这个值是每次进入页面的倒计起始时间，当前每次这个值都是不一样的，因为时间在流失，这个值只会越来越小，所以在测试时，你需要根据自己的实际情况给time2赋初值*/
}
}
}

秒客网

ASP.NET实现javascript无刷新倒计时

相关文章