html 、css、js动态文字时钟

article/2025/9/22 8:53:45

效果在这里插入图片描述思路是利用css的transform属性和js，来实现时钟布局和旋转。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>动态时钟</title><style>.total {position: absolute;display: flex;justify-content: center;align-items: center;width: 600px;height: 600px;font-size: 14px;}#tier {font-weight: 900;}#shizhong {/* background-image: url("./1b18aba6c58fba668715ba20abaed792.jpg"); */background-position: center;background-size: 100%;width: 1500px;height: 850px;background-repeat: no-repeat;display: flex;justify-content: center;align-items: center;}* {transition: all linear .4s;}#hours {position: absolute;top: 50%;left: 50%;width: 400px;height: 400px;margin-top: -200px;margin-left: -200px;border-radius: 50%;}#mins {position: absolute;top: 50%;left: 50%;width: 600px;height: 600px;margin-top: -300px;margin-left: -300px;border-radius: 50%;}#secs {position: absolute;top: 50%;left: 50%;width: 800px;height: 800px;margin-top: -400px;margin-left: -400px;border-radius: 50%;}#hours>span,.minsEles,.secsEles {position: absolute;width: 100%;height: 100%;display: flex;justify-content: flex-end;align-items: center;}#center1,#center2 {position: absolute;top: 50%;left: 50%;width: 10px;height: 10px;margin: 10px 0 0 -5px;border-radius: 50%;background-color: black;}#center2 {margin: 13px 0 0 0;width: 0px;height: 2px;border-radius: 0;transition: all linear 1s;}</style>
</head><body><div id="shizhong"><div class="total"><div id="tier"></div><div id="hours"></div><div id="mins"></div><div id="secs"></div><span id="center1"></span><span id="center2"></span></div></div><script type="text/javascript">var time = new Date();var year = time.getFullYear();// 年份var month = time.getMonth() + 1;  // 月份var date = time.getDate();    // 日期var day = time.getDay();      // 周几var hour = time.getHours();   // 小时var min = time.getMinutes();  // 分钟var sec = time.getSeconds();  // 秒数// 各位数字  或  者小于十的数字  转换为汉字function numbergewei(a) {switch (a) {case 0: return "零";case 1: return "一";case 2: return "二";case 3: return "三";case 4: return "四";case 5: return "五";case 6: return "六";case 7: return "七";case 8: return "八";case 9: return "九";}}// 数字转换为汉字function number(a) {if (a >= 10) {if (a > 100) {    //    年份let str = "";for (let i = 1000; i >= 1; i = i / 10) {str += numbergewei(parseInt(a / i % 10));}return str;} else if (a <= 20) {  //  十几return "十" + numbergewei(parseInt(a % 10))}let data = numbergewei(parseInt(a % 10)) == '零' ? "" : numbergewei(parseInt(a % 10))return numbergewei(parseInt(a / 10)) + "十" + data;}return numbergewei(a);}// 渲染时钟指针function renderClock(danwei = "分", findClass = "mins", clases = "minsEles", num = 60) {let minsStr = "";for (let i = 1; i <= num; i++) {if (i == num) {   //    如果分、秒针为60，或时针为24时，给零minsStr += `<span class='${clases}'>零${danwei}</span>`;break;}else if( i % 10 == 0){    // 如果是10的倍数，去掉生成的汉字 “零”  if(i ==10){             // 如果是10       去掉生成的汉字 “一”  minsStr += `<span class='${clases}'>十${danwei}</span>`;}else{minsStr += `<span class='${clases}'>${number(i/10)}十${danwei}</span>`;}}else{minsStr += `<span class='${clases}'>${number(i)}${danwei}</span>`;}}document.getElementById(findClass).innerHTML = minsStr;}// 给指针角度function minsXuanzhuan(clases = "minsEles", num = 60) {let minsEleArr = document.getElementsByClassName(clases);for (let i = 0; i < minsEleArr.length; i++) {minsEleArr[i].style.transform = `rotate(${i * (360 / num)}deg)`;}}// 旋转function xuanzhuan(ele, jiaodu = 60, time = 2) {let arr = [];for (let i = 0; i < ele.length; i++) {let data = ele[i].style.transform.split("(")[1].split("deg")[0] - 0data -= (360 / jiaodu) * (time - 1);arr.push(data)}return arr;}// 根据当前时间排序时钟function setClock(sec = 2, secsEle, num = 60) {let arr = xuanzhuan(secsEle, num, sec);for (let i = 0; i < secsEle.length; i++) {secsEle[i].style.transform = `rotate(${arr[i]}deg)`if (arr[i] % 360 == 0) {secsEle[i].style.fontWeight = `900`} else {secsEle[i].style.fontWeight = `200`}}}// 中间年月日渲染function renderYear() {let setDey = "日"if(day)setDey = number(day);document.getElementById("tier").innerHTML = `<span class="years">${number(year)}</span>年<span class="months">${number(month)}</span>月<span class="dates">${number(date)}</span>日星期<span class="days">${setDey}</span>`;}// 中间横线变长setTimeout(() => {document.getElementById("center2").style.width = "400px";}, 10);//    渲染时钟renderYear();renderClock();renderClock("秒", "secs", "secsEles");renderClock("时", "hours", "hoursEles", 24)let secsEle = document.getElementsByClassName("secsEles");//  秒数节点let minsEle = document.getElementsByClassName("minsEles");//  分钟数节点let hoursEle = document.getElementsByClassName("hoursEles");//  小时数节点setTimeout(() => {minsXuanzhuan("hoursEles", 24);  // 散开时针setTimeout(() => {minsXuanzhuan();              // 散开分针setTimeout(() => {minsXuanzhuan("secsEles"); // 散开秒针setTimeout(() => {let arr = [];time = new Date();hour = time.getHours();   // 小时min = time.getMinutes();  // 分钟sec = time.getSeconds();  // 秒数setClock(sec, secsEle);     // 给秒针时间setClock(min, minsEle);    // 给分针时间setClock(hour, hoursEle, 24);  // 给时针时间// 让时钟走起来setInterval(() => {setClock(2, secsEle);    // 秒针时间给2时，秒针旋转一个刻度time = new Date();if (time.getMinutes() != min) { //     判断是否旋转分针min = time.getMinutes();setClock(2, minsEle);if (time.getHours() != hour) { //   判断是否旋转时针hour = time.getHours();setClock(2, hoursEle, 24);if (time.getDate() != date) {  //    判断日期是否变化date = time.getDate();day = time.getDay();year = time.getFullYear();month = time.getMonth() + 1;renderYear();}}}}, 1000);   // 每秒转动秒针时间}, 500);       // 指针对齐时间}, 300);          // 秒针散开时间  }, 300);             // 分针散开时间}, 400);                // 时针散开时间</script>
</body></html>