资讯专栏INFORMATION COLUMN

h5实现实时时钟

Amio / 951人阅读

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

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

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

转载请注明本文地址: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 评论0 收藏0
  • h5实现实时时钟

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

    Allen 评论0 收藏0
  • H5--canvas实现粒子时钟

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

    avwu 评论0 收藏0
  • vue重构--H5--canvas实现粒子时钟

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

    robin 评论0 收藏0
  • H5--canvas实现粒子时钟

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

    1fe1se 评论0 收藏0

发表评论

0条评论

Amio

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<