css3を使って円形の動的時計を描く方法（詳しく解説）
時は金なりのこの時代、人々は日常生活だけでなく、特にインターネットサーフィンをするときにもますます時間を意識するようになり、フロントエンドを開発する際には、css3 を使用して時計を作成する方法を学びます。十分必要なようです。この記事で紹介する内容は、それに関するものであり、困っている友人が参考になれば幸いです。
css3 を使用して円形の動的時計を描画する原理
よく知られているように、 div の形状が正方形である場合は、最初に border-radius プロパティを使用して円に変換する必要があります。
ポインターを回転させるには、 -webkit-transform-origin:center 100px; を使用して回転の基点を設定する必要があります。次に、 -webkit-transform:rotate(0); を使用して、対応する角度を回転させ、対応するスケールを形成します。
スケールを設計した後、nth-of-type() セレクターを使用して、親要素に属する子要素を指定する必要があります。
円形の時計の中心に、ポインタの接続ポイントの div アイコンを設定する必要があります。
次に、js を使用して div を取得し、ダイヤルのスケールをレンダリングします。
最後に、タイマーを開始し、関数を毎秒実行します。
#css3 を使用して円形の動的時計を描画するコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>钟表</title>
<style id="css">
#wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
#wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}
#wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
#min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
#sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
.icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div></div>
</div>
<script>
var oList=document.getElementById("list");//获取到刻度
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");//获取时针
var oMin=document.getElementById("min");//获取分针
var oSec=document.getElementById("sec");//获取秒针
var oLi="";
var sCss="";
for (var i=0;i<60;i++) { //一个表盘总共是60个刻度
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
oLi+="<li></li>";
};
oList.innerHTML=oLi;
oCss.innerHTML+=sCss;//表盘刻度渲染完成
toTime();
setInterval(toTime,1000);
function toTime(){
var oDate=new Date();//获取当前时间
var iSec=oDate.getSeconds();//获取当前秒
var iMin=oDate.getMinutes()+iSec/60;//获取当前分
var iHour=oDate.getHours()+iMin/60;//获取当前时
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
};
</script>
</body>
</html>効果の例は次のとおりです。以下のように、図に示すように
以上がcss3を使って円形の動的時計を描く方法（詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7866
15
1649
14
1407
52
1301
25
1243
29
純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)
Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。
iPhoneに時計アプリがない：それを修正する方法
May 03, 2024 pm 09:19 PM
携帯電話に時計アプリがありませんか?日付と時刻は iPhone のステータス バーに引き続き表示されます。ただし、時計アプリがないと、世界時計、ストップウォッチ、目覚まし時計、その他多くの機能を使用できません。したがって、見つからない時計アプリを修正することは、やるべきことリストの一番上に置く必要があります。これらの解決策は、この問題の解決に役立ちます。解決策 1 – 時計アプリを配置する 誤って時計アプリをホーム画面から削除した場合は、時計アプリを元の場所に戻すことができます。ステップ 1 – iPhone のロックを解除し、App ライブラリ ページに到達するまで左にスワイプを開始します。ステップ 2 – 次に、検索ボックスで「時計」を検索します。ステップ 3 – 検索結果に以下の「時計」が表示されたら、それを長押しして、
iOS 17を搭載したiPhoneで複数のタイマーを使用する方法
Jun 21, 2023 am 08:18 AM
iOS17のマルチタイマーとは何ですか？ iOS17 では、Apple はユーザーに iPhone で複数のタイマーを一度に設定できる機能を提供します。これは歓迎すべき変化であり、多くの人が何年も待ち望んでいたものです。 iOS 16 より前では、時計アプリはユーザーが一度に 1 つのタイマーしか設定できませんでしたが、現在は任意の数のタイマーをアクティブにするために使用できるため、複数のタスクを一度に完了するのに最適です。タイマー画面ではタイマーをいくつでも設定できます。タイマーが開始されると、すべてのアクティブなタイマーがロック画面と通知センターに「ライブ アクティビティ」通知として表示されます。ここから、時計アプリを開かずに、タイマーがオフになるまでの残り時間を表示したり、タイマーを一時停止したり、停止したりできます。あなたが時計をしているとき
iOS 17: スタンバイモードでiPhoneの時計スタイルを変更する方法
Sep 10, 2023 pm 09:21 PM
スタンバイは、iPhone が充電器に接続され、水平 (または横) 向きになっているときにアクティブになるロック画面モードです。これは 3 つの異なる画面で構成されており、そのうちの 1 つは全画面表示されます。時計のスタイルを変更する方法については、この記事を読んでください。 StandBy の 3 番目の画面には、垂直にスワイプできるさまざまなテーマで時刻と日付が表示されます。一部のテーマでは、温度や次のアラームなどの追加情報も表示されます。時計を押し続けると、デジタル、アナログ、ワールド、ソーラー、フローティングなどのさまざまなテーマを切り替えることができます。 Float はカスタマイズ可能な色の大きなバブル数字で時間を表示します。Solar はさまざまな色の太陽フレアのデザインを備えたより標準的なフォントを持ち、World は世界を強調表示して表示します。
CSSを上手に使って色々な変わった形のボタンを実現（コード付き）
Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。
![iPhone でアラームをオフにする方法 [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
iPhone でアラームをオフにする方法 [2023]
Aug 21, 2023 pm 01:25 PM
スマートフォンの出現以来、スマートフォンが目覚まし時計に取って代わられたのは間違いありません。 iPhone をお持ちの場合は、時計アプリを使用して、1 日を通して複数の機会にアラームを簡単に設定できます。このアプリでは、アラームの時間、トーン、繰り返しの頻度、およびスヌーズ オプションを使用してアラームを遅らせるかどうかを設定できます。設定したアラームをオフにしたい場合は、次の投稿を参考に iPhone の定期アラームと目覚ましアラームを無効にして削除することができます。 iPhone で通常のアラームをオフにする方法 デフォルトでは、時計アプリにアラームを追加するか、Siri にアラームの追加を依頼すると、実際には通常のアラームが作成されます。 iPhone に目覚まし時計を好きなだけ作成して配置できます
スペースを取らずにCSS内の要素を非表示にする方法
Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
CSS3でレースボーダーを実装する方法
Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。
