<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style>
body {
text-align: center;
font-size: 13px;
}
.main {
width: 700px;
height: 700px;
position: absolute;
left: 408px;
background-image: url(img/img.jpg);
background-size:700px 700px;
}
#minutes {
position: absolute;
left: 441px;
}
#hours {
position: absolute;
left: 505px;
}
#week {
position: absolute;
left: 571px;
}
#date {
position: absolute;
left: 715px;
top:343px
}
.ss {
position: absolute;
text-align: right;
}
</style>
</head>
<body>
<!--
時間：2019-08-28
描述：秒
-->
<div id="second" class="main">
</div>
<!--
時間：2019-08-28
描述：分
-->
<div id="minutes">
</div>
<!--
時間：2019-08-28
描述：時
-->
<div id="hours">
</div>
<!--
時間：2019-08-28
描述：周
-->
<div id="week">
</div>
<div style="color: beige; font-weight: bold;border: 1px solid; width:353px;left: 697px;position: relative; top: 332px; height: 20px;" > </div>
<div id="date"></div>
</body>
<script>
$(function() {
second();
minutes();
hours();
week()
dates();
var ss = setInterval(function() {
second();
}, 1000)
})
var flag = 0;
function second(){
$("#second").empty();
var mydate = new Date();
var second = mydate.getSeconds();
second = second + 1;
flag = second;
var a = 0;
for(var i = -1; i < 59; i++) {
a = i * 6; //.428599
if(second == 0) {
second = 60;
}
if(second == 1){
minutes();
}
var str = toChinesNum(second)
if(str.length == 1){
str = str+" "
}else if(str.length == 2){
str = str+" "
}
$("#second").append("<div class='ss' style='transform:rotate(" + a + "deg);width:600px; height:20px; top:335px;left:50px'>" + (str) + "秒</div>");
second--;
}
}
function minutes(){
$("#minutes").empty();
var mydate = new Date();
var minutes = mydate.getMinutes();
minutes = minutes;
var a = 0;
for(var i = 0; i < 60; i++) {
a = i * 6;
if(minutes == 0) {
minutes = 60;
}
if(minutes == 1 && flag == 1) {
hours();
}
var str = toChinesNum(minutes)
if(str.length == 1){
str = str+" "
}else if(str.length == 2){
str = str + " \t\t\t "
}
$("#minutes").append("<div class='ss' style='transform:rotate(" + a + "deg);width:450px; height:20px; top:335px;left:90px'>" + (str) + "分</div>");
minutes--;
}
}
function hours(){
$("#hours").empty();
var mydate = new Date();
var hours = mydate.getHours();
hours = hours-12;
var a = 0;
for(var i = 0; i <12; i++) {
a = i * 30;
if(hours == 0) {
hours = 12;
}
if(hours == 12){
week();
}
var str = toChinesNum(hours)
if(str.length == 1){
str = str+" "
}else if(str.length == 2){
str = str+" "
}
$("#hours").append("<div class='ss' style='transform:rotate(" + a + "deg);width:330px; height:20px; top:335px;left:90px'>" + (str) + "時</div>");
hours--;
}
}
function week(){
$("#week").empty();
var mydate = new Date();
var week = mydate.getDay();
week = week;
//console.log(week)
var a = 0;
for(var i = 0; i <7; i++) {
a = i * (360/7);
if(week == 0) {
week = 7;
}
var str = toChinesNum(week)
if(week == 7 ){
str = "日"
}
$("#week").append("<div class='ss' style='transform:rotate(" + a + "deg);width:190px; height:20px; top:335px;left:90px'>星期" + (str) + "</div>");
week--;
}
}
function dates (){
var date=new Date();
//年
var year=date.getFullYear();
//月
var month=date.getMonth()+1;
//日
var day=date.getDate();
var rq=year+"年"+month+"月"+day+"日";
document.getElementById("date").innerHTML=rq;
}
// 數字轉中文
function toChinesNum(num) {
let changeNum = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
let unit = ["", "十"];
num = parseInt(num);
let getWan = (temp) => {
let strArr = temp.toString().split("").reverse();
let newNum = "";
for(var i = 0; i < strArr.length; i++) {
newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
}
return newNum;
}
let overWan = Math.floor(num / 10000);
let noWan = num % 10000;
if(noWan.toString().length < 4) noWan = "0" + noWan;
return overWan ? getWan(overWan) + "萬" + getWan(noWan) : getWan(num);
}
</script>
</html>
簡單的實現了一下，各位如果在使用時發現了bug請告知本人及時修改，可以討論問題共同進步。
數字轉中文的方法來自 https://blog.csdn.net/lavendersue/article/details/81066091 這位博主