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

9 篇文章 0 订阅
7 篇文章 0 订阅

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

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

主要实现代码是一段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>
            <!--定义一个lable显示倒计时时钟-->
        </div>
    </form>
    <!--用javascript实现倒计时代码-->
    <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赋初值*/
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值