返回发烧友论坛

发帖

[文章]HarmonyOSAPP开发-JS时钟练习尝试

李洋水蛟龙

2021-06-24 10:20:12

阅读量

0

0

3

`

一、效果显示

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

项目效果如下图

二、部分核心代码

Hml图片

图片2.png

Js图片

图片3.png

Index.Hml

<div>

<div>

<text>1</text>

<text>2</text>

<text>3</text>

<text>4</text>

<text>5</text>

<text>6</text>

<text>7</text>

<text>8</text>

<text>9</text>

<text>10</text>

<text>11</text>

<text>12</text>

<div></div>

<text id="hourHand">→</text>

<text id="minuteHand">--→</text>

<text id="secondHand">----→</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
附件：

HarmonyOSAPP开发-JS时钟练习尝试.rar

(534.62 KB, 下载次数: 6)

`

图片1.png

举报

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉