<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试版备忘录首页</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: #0b1b2c;
}
/* 时间 */
#dateTime1 {
margin-left: 20%;
color: #ffffff;
text-shadow: 1px 1px 1px #100000;
background-color: #144756;
}
#dateTime2 {
background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 1rem;
}
}
#dateTime3 {
transform: translate(20%,60%);
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 10rem;
font-weight: 900;
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 5rem;
}
}
div {
color: #ed0000;
}
pre {
color: #ffffff;
text-shadow: 1px 1px 1px #100000;
background-color: #144756;
padding: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 第一组时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime1">2024-08-31</time>
<!-- 第二组时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime2">2024-08-31</time>
<!-- 第三组时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime3">2024-08-31</time>
<div>
<h2>极端的例子，仅供娱乐,请不要在生产环境中使用</h2><p>下面的代码,可以实现动态显示多组当前时间,并显示星期和时间:</p>
<pre>
<body>
<!-- 第一组时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime1">2024-08-31</time>
<!-- 第二组时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime2">2024-08-31</time>
<!-- 第三组时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime3">2024-08-31</time>
</body>
<script>
(s=el=>{d=new Date,f=n=>("0"+n).slice(-2),
w="日一二三四五六";
el.innerHTML=`${d.getFullYear()}-${f(d.getMonth()+1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`})
</script>
</pre>
</div>
</body>
<script>
/* 现在时间 极端的例子，仅供娱乐*/
(s=el=>{d=new Date,f=n=>("0"+n).slice(-2),
w="日一二三四五六";
el.innerHTML=`${d.getFullYear()}-${f(d.getMonth()+1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`})
(setInterval(()=>["dateTime1","dateTime2","dateTime3"].forEach(id=>s(document.getElementById(id))),
1000));
/* 现在时间 结束 */
// -------------------------------------------------------------------------------
/* 现在时间
function showTime(el) {
const d = new Date(), f = n => ("0" + n).slice(-2), w = "日一二三四五六";
el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())} <sub>星期${w[d.getDay()]}</sub> ${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`;
}
setInterval(() => ["dateTime1", "dateTime2"].forEach(id => showTime(document.getElementById(id))), 1000);
现在时间 结束 */
// -------------------------------------------------------------------------------
/* 现在时间
function showTime(el) {
const d = new Date(), f = n => ("0" + n).slice(-2), w = "日一二三四五六";
el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())} <sub>星期${w[d.getDay()]}</sub> ${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`;
}
setInterval(() => ["dateTime1", "dateTime2"].forEach(id => showTime(document.getElementById(id))), 1000);
现在时间 结束 */
// -------------------------------------------------------------------------------
/* 现在时间
var current_time1 = document.getElementById("dateTime1");
var current_time2 = document.getElementById("dateTime2");
function showTime(element) {
const now = new Date();
const format = num => ("0" + num).slice(-2);
const time = `
${now.getFullYear()}-${format(now.getMonth() + 1)}-${format(now.getDate())}
<sub id='sub'>${["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()]}</sub>
${format(now.getHours())}:${format(now.getMinutes())}:${format(now.getSeconds())}`;
element.innerHTML = time;
}
function updateTimes() {
showTime(current_time1);
showTime(current_time2);
}
updateTimes();
setInterval(updateTimes, 1000);
现在时间 结束 */
// -------------------------------------------------------------------------------
/* 现在时间
var current_time = document.getElementById("dateTime");
function showTime() {
var now = new Date();
var year = now.getFullYear();
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var day = ("0" + now.getDate()).slice(-2);
var hour = ("0" + now.getHours()).slice(-2);
var min = ("0" + now.getMinutes()).slice(-2);
var second = ("0" + now.getSeconds()).slice(-2);
var week = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
][now.getDay()];
var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
current_time.innerHTML = time;
}
showTime();
setInterval(showTime, 1000);
现在时间 结束 */
</script>
</html>
