別の時計効果が来ています。この実装にはキャンバスは必要ありません。これは、Div、UL、およびLiによって描画されます。これは楽しくて現実的です。
ハハ〜
JSはこの動きをするという効果を達成する必要がありますが、JSにはあまり内容がないため、難しくありません。
それは主にCSSで変換を使用するという考えです。変換には、多くの変化する属性と通常の時計があります
それは私の心の中で丸いものです。それで、このプロパティ（回転）を回転させて実装できますか？その規模
回転を使用して、円の中心にある回転点を設定すると、円の中心を回すことはできませんか？時間の底部はそうではありません
円の中心は接触していますか？その後、時間の下部を回転点に設定しても構いません。私は大まかに自分のアイデアについて話します。
コード：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> transform </title> <style id = "css"> #clock {width：200px;高さ：200px;国境：2pxソリッド＃000;ボーダーラジウス：50％;マージン：100px Auto 0;位置：相対; } #clock ul {width：200px;高さ：200px;位置：相対;リストスタイル：なし;パディング：0;マージン：0; } #clock ul {width：200px;高さ：200px;位置：相対;リストスタイル：なし;パディング：0;マージン：0; } #clock ul {width：2px;高さ：10px;背景：＃000;変換オリジン：センター100px;位置：絶対;上：0;左：50％; } #clock ul li：nth-of-type（5n+1）{height：20px; }＃hour {height：40px;幅：4px;背景：＃00fefe;位置：絶対;上：60px;左：99px;変換オリジン：中央の底。 } #min {height：60px;幅：3px;背景：＃001AFE;位置：絶対;トップ：40px;左：99px;変換オリジン：中央の底。変換：回転（15DEG）; } #sec {height：70px;幅：2px;背景：＃000;位置：絶対;トップ：30px;左：99px;変換オリジン：中央の底。 } #dot {width：10px;高さ：10px;位置：絶対;左：95px;トップ：95px;背景：＃aaa;ボーダーラジウス：50％; } </style> </head> <body> <div id = "clock"> <ul> </ul> <div id = "hour"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot"> </div> </div> <script> documentsbyid（css "）; var oclock = document.getElementById（ "clock"）; var oul = oclock.getelementsbytagname（ "ul"）[0]; var ohour = document.getElementById（ "hour"）; var omin = document.getElementById（ "min"）; var osec = document.getElementById（ "sec"）; var strli = ""; var strcss = ""; for（var i = 0; i <60; i ++）{strli+= "<li> </li>"; } oul.innerhtml = strli; for（var i = 0; i <60; i ++）{strcss+= '＃clock ul li：nth-of-type（'+（i+1）+'）{transform：rotate（'+i*6+'deg）;}'; } ocss.innerhtml+= strcss;時間（）; setinterval（time、1000）; function time（）{var date = new date（）; var h = date.gethours（）; var m = date.getMinutes（）; var s = date.getSeconds（）; ohour.style.transform = "rotate（"+（h+m/60）*30+"deg）"; omin.style.transform = "rotate（"+（m+s/60）*6+"deg）"; osec.style.transform = "rotate（"+s*6+"deg）"; } </script> </body> </html>このようにして、あなたが望む位置に形成されたボックスを置くことができるため、タグで描画する際の最も重要なことは配置です。内部CSSスタイルのシートは、要素を取得することで取得できます。これにより、InnerHtmlを使用してスタイルを追加し、ループに追加できます。多くのスケールもありますので、ループを使用して追加することができます。これにより、時間と労力を節約できます。残りの時間については、1秒ごとに関数を実行して、移動するようにすることができます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。