h5实现实时时钟

Amio 发布于2019-04-22 16:12 / 1053人阅读

摘要：这里调用是为了选取元素方便而已，初学建议用选取元素

meta charset="UTF-8"/ meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" / title /title style margin: 0px; padding: 0px; .clock{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; position: relative; margin: 20px; background-size: 100%; .clock .hour{ width: 10px; height: 70px; background: orange; position: absolute; left: 95px; top: 30px; /*animation: sec 86400s infinite;*/ .clock .minute{ width: 6px; height: 80px; background: deepskyblue; position: absolute; left: 97px; top: 20px; /*animation: sec 3600s infinite;*/ .clock .second{ width: 2px; height: 90px; background: red; position: absolute; left: 99px; top: 10px; /*animation: sec 60s infinite;*/ @keyframes sec{ 0%{transform-origin: center bottom;transform: rotate(0deg);} 100%{transform-origin: center bottom;transform: rotate(360deg);} /style /head body div div /div div /div div /div /div /body script src="/cnblogs html/css/jquery.min.js" /script !--这里调用jquery是为了选取元素方便而已，初学建议用dom选取元素-- script function fn(){ var myDate=new Date; var h=myDate.getHours(); var m=myDate.getMinutes(); var s=myDate.getSeconds(); $(".clock .hour").css({"transform-origin":" center bottom","transform":"rotate("+30*h+"deg)"}); $(".clock .minute").css({"transform-origin":" center bottom","transform":"rotate("+6*m+"deg)"}); $(".clock .second").css({"transform-origin":" center bottom","transform":"rotate("+6*s+"deg)"}); fn(); setInterval(fn,1000); /script /html

云服务器 GPU云服务器 h5 实时视频 h5实时语音 php 实现时钟功能 h5实时视频腾讯云

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/792.html

h5实现实时时钟

摘要：这里调用是为了选取元素方便而已，初学建议用选取元素 *{ margin: 0px; padding: 0px; } .clock{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; ...

Tonny 2019-04-23 11:40 评论0 收藏0
H5--canvas实现粒子时钟

我们先看看粒子时钟的效果，如下：showImg(https://segmentfault.com/img/remote/1460000016290266);下面我们将通过canvas和js实现，首先要创建一个html文件并添加一个canvas画布，如下： Document .container{ margin: 0, aut...

avwu 2019-08-23 11:47 评论0 收藏0
vue重构--H5--canvas实现粒子时钟

摘要：上一篇文章讲解了如何用实现粒子时钟，本篇文章，主要是使用重构，让它在也能使用。若有疑问或需要素材，请加群交流上一篇文章讲解了如何用js+canvas实现粒子时钟，本篇文章，主要是使用vue重构，让它在vue也能使用。我们使用简单的方式重构，不使用vue工程，先加入vue cdn的地址，如下：然后，重构Clock对象构造器，改为将canvas传入，如下： function Cl...

robin 2019-08-23 11:47 评论0 收藏0