您的位置：首页 > Web前端 > JavaScript

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

2014-07-08 18:48 621 查看

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

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

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

<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>

下面是这个项目的代码：

前台：

<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赋初值*/

}

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航