<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间</title>
</head>
<style>
body {
background: #0b1b2c;
}
#Time {
display: flex;
flex-direction: column;
align-items: center;
transform: translate(10%, 20%);
position: fixed;
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;
}
}
</style>
<body>
<div id="Time"></div>
<script>
setInterval(() => {
const d = new Date();
const timeFormat = n => n.toString().padStart(2, '0');
document.getElementById("Time").innerHTML = `${d.getFullYear()}年${timeFormat(d.getMonth() + 1)}月${timeFormat(d.getDate())}日 <sub>(星期${"日一二三四五六".charAt(d.getDay())}) </sub>${timeFormat(d.getHours())}:${timeFormat(d.getMinutes())}:${timeFormat(d.getSeconds())}`;
}, 1000);
</script>
<!-- 第一次的代码
<script>
function showTime() {//显示当前时间
var d = new Date();//创建Date对象
var y = d.getFullYear();//获取当前日期的年份
var m = d.getMonth() + 1;//获取当前日期的月份,注意月份是从0开始的,所以需要加1
var W = "星期" + "日一二三四五六".charAt(new Date().getDay());//获取当前日期的星期几
var D = d.getDate();//获取当前日期的日期(几号)
var H = d.getHours();//获取当前日期的小时
var M = d.getMinutes();//获取当前日期的分钟
var S = d.getSeconds();//获取当前日期的秒
m = m < 10 ? "0" + m : m;//月份个位补0
D = D < 10 ? "0" + D : D;//日期个位补0
H = H < 10 ? "0" + H : H;//时个位补0
M = M < 10 ? "0" + M : M;//分钟个位补0
S = S < 10 ? "0" + S : S;//秒个位补0
const Time = document.getElementById("Time");
Time.innerHTML = y + '年' + m + '月' + D + '日' + '(' + W + ')' + H + ':' + M + ':' + S;
}
showTime();
setInterval(showTime, 1000); // 每隔1秒执行一次showTime函数
</script>
第2次的代码
<script>
function showTime() {
const d = new Date();
const y = d.getFullYear();
const m = (d.getMonth() + 1).toString().padStart(2, '0');
const W = "星期" + "日一二三四五六".charAt(d.getDay());
const D = d.getDate().toString().padStart(2, '0');
const H = d.getHours().toString().padStart(2, '0');
const M = d.getMinutes().toString().padStart(2, '0');
const S = d.getSeconds().toString().padStart(2, '0');
document.getElementById("Time2").innerHTML = `${y}年${m}月${D}日(${W})${H}:${M}:${S}`;
}
showTime();
setInterval(showTime, 1000);
</script>
第3次的代码
<script>
function showTime() {
const d = new Date();
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const W = "星期" + "日一二三四五六".charAt(d.getDay());
const D = String(d.getDate()).padStart(2, '0');
const H = String(d.getHours()).padStart(2, '0');
const M = String(d.getMinutes()).padStart(2, '0');
const S = String(d.getSeconds()).padStart(2, '0');
document.getElementById("Time2").innerHTML = `${y}年${m}月${D}日(${W})${H}:${M}:${S}`;
}
showTime();
setInterval(showTime, 1000);
</script>-->
</html>
精简时间JS的代码量
最新推荐文章于 2024-09-02 10:21:44 发布