前言
看到别人博客有建站时间，比如像这样的
至于怎么实现，方式还有有很多种
- 定时一秒从后台获取，但每次请求会增加服务器压力
- 获取一次服务器开始运行时间，然后用客户端当前时间减去服务器开始时间，但是这样如果客户端时间不准，就会导致误差太大，显然不是我们想要的
- 获取一次服务器开始请求的时间和建站时间（当然建站时间我们也可以写死），然后二者相减即可。
这里使用最后一种方式实现，我们需要将时间转化为标准时间，或者时间戳都可以，这里以转化为标准时间的方式示例
实现方式
这里使用最后一种方式来实现，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<span id="showsectime"></span>
<script>
function NewDate(str) {
var reg = /\s+|:/g;//匹配多空格和：
str = str.replace(reg, "-");//将空格和:替换成_，便于分割
str = str.split("-");//分割
var date = new Date();//构造时间
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(str[3], str[4], str[5], 0);
return date;
}
function showsectime() {
//开始时间 按照这个格式来 这里可以直接写死
var birthDay = NewDate("2019-02-23 00:00:00");
//请求时间 这里需要从服务器获取 当然也可以使用本地时间 由于使用freemarket 可以使用${.now}获取
var today = new NewDate("2019-02-25 23:59:50");
//相差的时间
var mss = today.getTime() - birthDay.getTime();
var daysold = parseInt(mss / (1000 * 60 * 60 * 24));
var hrsold = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minsold = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
var seconds = (mss % (1000 * 60)) / 1000;
setInterval(function() {
if (seconds < 59) {
seconds = seconds + 1;
} else {
seconds = 0;
minsold = minsold + 1;
if (minsold < 59) {
} else {
minsold = 0;
hrsold = hrsold + 1;
if (hrsold < 23) {
} else {
hrsold = 0;
daysold = daysold + 1;
}
}
}
document.getElementById("showsectime").innerHTML =
"本站已安全运行" +
daysold +
"天" +
hrsold +
"小时" +
minsold +
"分" +
seconds +
"秒";
}, 1000);
}
showsectime();
</script>
</body>
</html>
说明
js时间初始化有以下几种方式
*new Date("month dd,yyyy hh:mm:ss");
*new Date("month dd,yyyy");
*new Date(yyyy,mth,dd,hh,mm,ss);
*new Date(yyyy,mth,dd);
*new Date(ms);利用时间戳初始化
方法 描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
'
本文由 止戈 创作，采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jan 9,2020