HTML时钟+日期
本文最后更新于：2023年8月25日 中午
HTML网页时钟+公历日期（最终版）（HTML+JavaScript）
程序效果如下https://www.hzopo.top/time
渐变文字时钟+今日日期
程序代码
<!--time clock(easy)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*time clock style*/
#clock {
font-family: Arial, Helvetica, sans-serif;
background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
-webkit-background-clip: text;
color:transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;
font-size:70px;
width: auto;
height: auto;
text-align: center;
line-height: 100px;
}
#date {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bolder;
background-image: linear-gradient(#FFAC03, #DE03FF,#03FFBC,#71FF03,#FFC503);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #333;
width: auto;
height: auto;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
.text{
font-size: 40px;
text-align:center;
background-image: linear-gradient(#0842E4, #03FFB4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #333;
}
</style>
</head>
<body>
<p class="text">渐变文字时钟+今日日期</p>
<!--create a div to show clock-->
<div id="clock"></div>
<!--<javascript code-->
<script>
// set a function to update clock
function updateClock() {
// set now time
var now = new Date();
// set now hour minutes second
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var millisecond = now.getMilliseconds();
// if? add zero
if (hour < 10){
hour = "0" + hour;
}
if (minute < 10){
minute = "0" + minute;
}
if (second < 10){
second = "0" +second;
}
// mix to time stlye
var time = hour + ":" + minute + ":" +second + ":" +millisecond;
// time to show in div
document.getElementById("clock").innerHTML = time;
}
// every second update time function
setInterval(updateClock,1);
</script>
<div id="date"></div>
<script>
function updateDate() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
if (month < 10){
month = + month;
}
if (day < 10){
day = + day;
}
var date = year +"年"+ month +"月"+ day +"日" ;
document.getElementById("date").innerHTML = date;
}
setInterval(updateDate,1000);
</script>
</body>
</html>
HTML时钟+日期
http://haozi520.github.io/2023/06/27/timeclock/