HarmonyOS鸿蒙Next APP开发-JS时钟练习尝试

HarmonyOS鸿蒙Next APP开发-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