网页底部显示 “本站已安全运行……天” 代码

2021-05-11 / 2021-05-11 / HTML

网页底部显示 “本站已安全运行……天” 代码

<span id="runtimeSpan" style="color: #ff0000;"></span>
<script type="text/javascript">
	function showRuntime(){
		window.setTimeout("showRuntime()", 1000);
		var startTime = new Date("3/10/2020 00:00:00"); 
		var nowTime = new Date();
		var timestamp = (nowTime.getTime() - startTime.getTime());
		var oneDayMilliseconds = 24*60*60*1000;
		var totalDaysTmp = timestamp / oneDayMilliseconds;
		var totalDays = Math.floor(totalDaysTmp);
		var yuHoursTmp = (totalDaysTmp - totalDays) * 24;
		var yuHours = Math.floor(yuHoursTmp);
		var yuMinutesTmp = (yuHoursTmp - yuHours) * 60;
		var yuMinutes = Math.floor((yuHoursTmp - yuHours) * 60);
		var yuSeconds = Math.floor((yuMinutesTmp - yuMinutes) * 60);
		var yuHours = yuHours < 10 ? '0' + yuHours : yuHours;
		var yuMinutes = yuMinutes < 10 ? '0' + yuMinutes : yuMinutes;
		var yuSeconds = yuSeconds < 10 ? '0' + yuSeconds : yuSeconds;
		runtimeSpan.innerHTML = "本站已安全运行: " + totalDays + "天" + yuHours + "小时" + yuMinutes + "分" + yuSeconds + "秒";
	}
	showRuntime();
</script>
<style>
	#runtimeSpan{animation: change 10s infinite;font-weight: 800;}
	@keyframes change{0%{color:#AAC9CE;}25%{color:#F56A79;}50%{color:#1AA6B7;}75%{color:#FCF9F0;}100%{color:#E73B3E;}}
</style>

标题：网页底部显示 “本站已安全运行……天” 代码
作者：Mune
地址：https://cnxiaobai.com/articles/2021/05/11/1620737764386.html

1 评论

冰冻大西瓜

2024-02-15 16:56 回复»

建议通过day.js快速计算时间代码可以更加优雅

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>
// 设置起始日期和当前日期
const startDate = dayjs('2024-01-01');
const currentDate = dayjs();

// 计算两个日期之间的差值
const duration = dayjs.duration(currentDate.diff(startDate));

// 输出结果
console.log(`${duration.years}年${duration.months}月 ${duration.days}天`);
</script>