在aspx页面上显示实时时钟（使用服务器时间）

本文介绍了在aspx页面上显示实时时钟（使用服务器时间）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

现在，我正在使用updatepanel和timer在aspx页面上显示时钟（小时：分钟+日期），这导致服务器端每30秒发回一次邮件。我不喜欢这种解决方案。我想要一个JavaScript时钟，该时钟以服务器的基本值开始。有谁能提供比下面的代码更好的替代方法？

Right now I am displaying a clock (Hour: Minute + Date) on the aspx page using updatepanel and timer, it causes server side post back every 30 seconds. I don't like this solution. I would like to have a JavaScript clock that starts out with a base value from the server. Could anybody come up with a better alternative than the code below?

<asp:UpdatePanel ID="UpdatePanelClock" runat="server"> <ContentTemplate> <asp:Label ID="lblTime2" runat="server"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" /> </Triggers> </asp:UpdatePanel> <asp:Timer ID="Timer2" runat="server" Interval="30000" OnTick="Timer2_Tick"></asp:Timer>

后面的代码

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { lblTime2.Text = DateTimeOffset.Now.ToString("hh:mm tt") + " - " + DateTimeOffset.Now.ToString("dddd, MMMM dd"); } }

推荐答案

在我自己的库创建了函数 getCurrentTime 。它是日期和时间的通用获取器和转换器。此函数可以从时间戳（以微秒为单位）创建日期。

In my own library I created the function getCurrentTime. It's a versatile getter and converter of date and time. This function can create dates from timestamps in microseconds. It allows you to create clocks, calendars, countdown timer, etc.

months = "Jan:31;Feb:28;Mar:31;Apr:30;May:31;Jun:30;Jul:31;Aug:31;Sep:30;Oct:31;Nov:30;Dec:31"; function getCurrentTime(unixTimeStamp) { if (unixTimeStamp) { this.dateObject = new Date(unixTimeStamp); } else { this.dateObject = new Date(); } // Time this.dateObject.h = this.dateObject.getHours(); this.dateObject.m = this.dateObject.getMinutes(); if (this.dateObject.m < 10) {this.dateObject.m = "0" + this.dateObject.m;} this.dateObject.s = this.dateObject.getSeconds(); if (this.dateObject.s < 10) {this.dateObject.s = "0" + this.dateObject.s;} //Date this.dateObject.y = parseInt(this.dateObject.getFullYear()); this.dateObject.mo = this.dateObject.getMonth()+1; if (this.dateObject.mo < 10) {this.dateObject.mo = "0" + this.dateObject.mo;} this.dateObject.d = this.dateObject.getDate(); if (this.dateObject.d < 10) {this.dateObject.d = "0" + this.dateObject.d;} this.today = this.dateObject.d + "/" + this.dateObject.mo + "/" + this.dateObject.y; this.now = this.dateObject.d + "/" + this.dateObject.mo + "/" + this.dateObject.y + " " + this.dateObject.h + ":" + this.dateObject.m + ":" + this.dateObject.s; this.dateStamp = Date.parse(this.dateObject.mo+"/"+this.dateObject.d+"/"+this.dateObject.y); //these are the objects returned by getCurrentTime() next to hour, minutes, seconds, year, month and date. this.dateObject.fullDate = this.dateObject.d + " " + months.split(/;/)[this.dateObject.mo-1].split(/:/)[0] + " " + this.dateObject.y; this.dateObject.timeZoneOffset = dateObject.getTimezoneOffset(); //in minutes. this.dateObject.today = this.today; this.dateObject.now = this.now; this.dateObject.dateStamp = this.dateStamp; return this.dateObject; } timeStamp = <%= ConvertToTimestamp(DateTime.UtcNow).ToString() %> setInterval(clock, 1000); function clock() { timeStamp += 1000; var timeObj = getCurrentTime(timeStamp); var timeString = timeObj.h + ":" + timeObj.m + ":" + timeObj.s; console.log(timeString); }

此函数没有 unixTimeStamp 获取客户端时间设置，但是如果使用aspx <％= ConvertToTimestamp（DateTime.UtcNow）.ToString（）％> 将日期变量加载到其中，它将从得到的时间戳更新。如何获取时间戳：

This function without unixTimeStamp gets the clients time settings, but if you load a date var into it with aspx <%= ConvertToTimestamp(DateTime.UtcNow).ToString() %> it will update from the time stamp it got. How to retrieve time stamp:

public double ConvertToTimestamp(DateTime value) { //create Timespan by subtracting the value provided from //the Unix Epoch TimeSpan span = (value - new DateTime(1970, 1, 1, 0, 0, 0, 0).ToLocalTime()); //return the total milliseconds (which is a UNIX timestamp * 1000) return (long)span.TotalMilliseconds; }

jsfiddle/3Lp4mwpn/ ：示例

请注意， getCurrentTime 返回一个比显示时间更多的可能性的对象。它可以为您提供多种日期格式。

Please note that getCurrentTime is returning an object with more possibilities than showing time. It can provide you with multiple date formats.