一、效果显示

名称：JS时钟应用练习，语言: JS，

项目效果如下图

二、部分核心代码

Hml图片

Js图片

Index.Hml

<div style="width: 100%;height: 100%;">

   <div style="width: 300px;height: 300px;position: absolute; left: 50%; top: 50%; margin-top: -150px;margin-left: -150px; border-radius: 150px; border: 1px solid black;">

       <text style="font-size: 20px;position: absolute;left: 220px; top: 30px;">1</text>

       <text style="font-size: 20px;position: absolute;left: 260px; top: 80px;">2</text>

       <text style="font-size: 20px;position: absolute;left: 280px; top: 150px;font-weight: bolder;">3</text>

       <text style="font-size: 20px;position: absolute;left: 260px; top: 210px;">4</text>

       <text style="font-size: 20px;position: absolute;left: 210px; top: 260px;">5</text>

       <text style="font-size: 20px;position: absolute;left: 150px; top: 275px;font-weight: bolder;">6</text>

       <text style="font-size: 20px;position: absolute;left: 90px; top: 260px;">7</text>

       <text style="font-size: 20px;position: absolute;left: 40px; top: 210px;">8</text>

       <text style="font-size: 20px;position: absolute;left: 10px; top: 150px;font-weight: bolder;">9</text>

       <text style="font-size: 20px;position: absolute;left: 30px; top: 80px;">10</text>

       <text style="font-size: 20px;position: absolute;left: 80px; top: 20px;">11</text>

       <text style="font-size: 20px;position: absolute;left: 140px; top: 10px;font-weight: bolder;">12</text>

       <div style="width: 10px;height: 10px; background-color: #000000;border-radius: 5px;position: absolute; left: 140px; top: 150px; "></div>

       <text id="hourHand" style="transform: {{hourHand}}; font-size: 40px;position: absolute;left: 150px;top: 135px;transform-origin: 0% 50%;font-weight: bolder;color: red;">→</text>

       <text id="minuteHand" style="transform: {{minuteHand}}; font-size: 40px;position: absolute;left: 150px;top: 135px;transform-origin: 0% 50%;font-weight: bold;color: green;">--→</text>

       <text id="secondHand" style="transform: {{secondHand}}; font-size: 40px;position: absolute;left: 150px;top: 135px;transform-origin: 0% 50%;color: yellow;">----→</text>

   </div>

</div>

Index.js

export default {

   data: {

       hourHand: "rotate(-90deg)",

       minuteHand: "rotate(-90deg)",

       secondHand: "rotate(-90deg)"

   },

   onInit() {

       const _this = this

       let hour = new Date().getHours()

       let minute = new Date().getMinutes()

       let second = new Date().getSeconds()

       hour %= 12

       _this.hourHand = "rotate(" + (hour * 30 - 90) + "deg)"

       _this.minuteHand = "rotate(" + (minute * 6 - 90) + "deg)"

       _this.secondHand = "rotate(" + (second * 6 - 90) + "deg)"

       setInterval(function () {

           let hour = new Date().getHours()

           let minute = new Date().getMinutes()

           let second = new Date().getSeconds()

           hour %= 12

           _this.hourHand = "rotate(" + (hour * 30 - 90) + "deg)"

           _this.minuteHand = "rotate(" + (minute * 6 - 90) + "deg)"

           _this.secondHand = "rotate(" + (second * 6 - 90) + "deg)"

       }, 1000);

   }

}

三、完整代码地址

https://gitee.com/jltfcloudcn/jump_to/tree/master/JS%E6%97%B6%E9%92%9F