在博客底部加个建站时间

812

2025-11-28

在博客底部加个建站时间，具体的效果见小站首页的底部。

颜色、建站时间自行设置和调整。

<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2016-01-07");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "小站在博主的各种骚操作下顽强的存活了："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

------------------------------------------分隔符--------------------------------------

第二版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站运行时间展示器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
text-align: center;
}

header {
margin-bottom: 40px;
}

h1 {
color: white;
font-size: 2.8rem;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

.timer-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
margin-bottom: 40px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}

#timer {
font-size: 3.2rem;
font-weight: 800;
padding: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
margin: 20px 0;
animation: change 10s infinite;
}

.start-date {
color: white;
font-size: 1.1rem;
margin-top: 10px;
}

.icon-container {
display: flex;
justify-content: center;
margin-top: 30px;
}

.icon {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 15px;
font-size: 3rem;
color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}

.icon:hover {
transform: scale(1.1) rotate(10deg);
}

.footer {
color: rgba(255, 255, 255, 0.7);
margin-top: 30px;
font-size: 0.9rem;
}

@keyframes change {
0% { color: #5cb85c; text-shadow: 0 0 10px #5cb85c; }
25% { color: #556bd8; text-shadow: 0 0 10px #556bd8; }
50% { color: #e40707; text-shadow: 0 0 10px #e40707; }
75% { color: #66e616; text-shadow: 0 0 10px #66e616; }
100% { color: #67bd31; text-shadow: 0 0 10px #67bd31; }
}

@media (max-width: 768px) {
.container {
padding: 25px;
}

h1 {
font-size: 2.2rem;
}

#timer {
font-size: 2.2rem;
padding: 15px;
}

.icon {
width: 70px;
height: 70px;
font-size: 2rem;
}
}

@media (max-width: 480px) {
.container {
padding: 20px;
}

h1 {
font-size: 1.8rem;
}

#timer {
font-size: 1.6rem;
}

.icon-container {
flex-wrap: wrap;
}

.icon {
margin: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>网站运行时间</h1>
<p class="subtitle">小站在博主的各种骚操作下顽强地运行着，见证了无数次的更新、优化与挑战</p>
</header>

<p class="footer">每一秒的运行，都承载着坚持与热爱</p>
</div>

function updateTimer() {
var birthDay = NewDate("2016-01-07");
var today = new Date();
var timeold = today.getTime() - birthDay.getTime();
var sectimeold = timeold / 1000;
var secondsold = Math.floor(sectimeold);
var msPerDay = 24 * 60 * 60 * 1000;
var e_daysold = timeold / msPerDay;
var daysold = Math.floor(e_daysold);
var e_hrsold = (daysold - e_daysold) * -24;
var hrsold = Math.floor(e_hrsold);
var e_minsold = (hrsold - e_hrsold) * -60;
var minsold = Math.floor((hrsold - e_hrsold) * -60);
var seconds = Math.floor((minsold - e_minsold) * -60).toString();

// 格式化时间显示
var formattedDays = daysold.toString().padStart(4, '0');
var formattedHours = hrsold.toString().padStart(2, '0');
var formattedMinutes = minsold.toString().padStart(2, '0');
var formattedSeconds = seconds.padStart(2, '0');

document.getElementById("timer").innerHTML =
`${formattedDays}天 ${formattedHours}小时 ${formattedMinutes}分 ${formattedSeconds}秒`;

setTimeout(updateTimer, 1000);
}

document.addEventListener('DOMContentLoaded', updateTimer);
</script>
</body>
</html>

-----------------------------我是可耻的分割线---------------------------

第三版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网站存活时间</title>
<style>
#timer {
animation: change 10s infinite;
font-weight: 800;
font-size: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
text-align: center;
margin: 20px auto;
max-width: 600px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@keyframes change {
0% { color: #5cb85c; }
25% { color: #556bd8; }
50% { color: #e40707; }
75% { color: #66e616; }
100% { color: #67bd31; }
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa, #e4e7f1);
}

.container {
text-align: center;
padding: 30px;
border-radius: 15px;
background: white;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

h1 {
color: #2c3e50;
margin-bottom: 30px;
}

.info {
margin-top: 30px;
font-size: 14px;
color: #7f8c8d;
max-width: 500px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>网站存活时间</h1>
<div id="timer">计算中...</div>
<div class="info">
本页面计算从2016年1月7日建站至今的存活时间，每秒更新一次。
感谢您对小站的支持与关注！
</div>
</div>

// 计算时间差
const diff = now - startDate;

// 计算时间单位
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

// 更新显示
document.getElementById("timer").innerHTML =
`小站在博主的各种骚操作下顽强的存活了：${days}天${hours}小时${minutes}分${seconds}秒`;

// 每秒更新一次
setTimeout(updateTime, 1000);
}

// 初始化
window.onload = updateTime;
</script>
</body>
</html>