HarmonyOSAPP开发-JS时钟练习尝试 原创

一、效果显示

名称：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