資訊專欄INFORMATION COLUMN
摘要：這里調用是為了選取元素方便而已，初學建議用選取元素
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文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/792.html
我們先看看粒子時鐘的效果，如下：showImg(https://segmentfault.com/img/remote/1460000016290266);下面我們將通過canvas和js實現，首先要創建一個html文件并添加一個canvas畫布，如下： Document .container{ margin: 0, aut...
摘要：上一篇文章講解了如何用實現粒子時鐘，本篇文章，主要是使用重構，讓它在也能使用。若有疑問或需要素材，請加群交流 上一篇文章講解了如何用js+canvas實現粒子時鐘，本篇文章 ，主要是使用vue重構，讓它在vue也能使用。 我們使用簡單的方式重構，不使用vue工程，先加入vue cdn的地址，如下： 然后，重構Clock對象構造器，改為將canvas傳入，如下： function Cl...
閱讀 2470·2023-04-25 21:41
閱讀 1647·2021-09-22 15:17
閱讀 1921·2021-09-22 10:02
閱讀 2433·2021-09-10 11:21
閱讀 2569·2019-08-30 15:53
閱讀 996·2019-08-30 15:44
閱讀 946·2019-08-30 13:46
閱讀 1125·2019-08-29 18:36
