本文介绍了如何使用 JavaScript 编写一个实时显示中文时间的网页示例。通过 setInterval 定时获取当前日期时间,并将其转换为中文数字和星期显示在页面中,适合学习基础 DOM 操作和定时器用法。
JavaScript 中文实时时钟实现
以下代码展示了如何使用 JavaScript 实现一个实时更新的中文时钟功能,供读者参考学习。
运行效果如下所示:

具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var chr=['零','一','二','三','四','五','六','七','八','九','十'];
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
init();
function init() {
setInterval(animation,16);
}
function animation() {
document.body.innerHTML=getDate();
}
function getDate() {
var date=new Date();
return getYears(date.getFullYear())+"年"
+getChrNumber(date.getMonth()+1)+"月"
+getChrNumber(date.getDate())+"日"
+" "+weeks[date.getDay()]
+" "+getChrNumber(date.getHours())+"点"
+getChrNumber(date.getMinutes())+"分"
+getChrNumber(date.getSeconds())+"秒 "
+getChrNumber(date.getMilliseconds())+"毫米"
}
function getChrNumber(num) {
if(num>=1000 || num<0) return;
if(num<11) return chr[num];
if(num<100 && num%10===0) return chr[num/10]+"十";
if(num<20) return "十"+chr[num%10];
if(num<100) return chr[parseInt(num/10)]+"十"+chr[num%10];
var str=chr[parseInt(num/100)]+"百";
if(num%100===0) return str;
if(num%10===0) return str+chr[parseInt(num/10)%10]+"十";
if(parseInt(num/10)%10===0) return str+"零"+chr[num%10];
return str+chr[parseInt(num/10)%10]+"十"+chr[num%10];
}
function getYears(year) {
var arr=year.toString().split("").map(function (t) { return getNumber(t) });
return arr.map(function (t) { return chr[t] }).join("");
}
function getNumber(str) {
if(!isNaN(Number(str))) return Number(str);
return str;
}
</script>
</body>
</html>
希望这段代码能为你的学习提供便利,欢迎继续支持本站获取更多技术内容。