CSS+ネイティブJSを使用して、シンプルな時計を作成します。効果は次のとおりです
この効果を達成するために、それはHTML、JavaScript、およびCSSの3つの主要な部分に分けられます
HTMLパーツ
HTMLパーツは比較的単純で、起源、時間、分、秒針、日付と時刻を持つクロックDivを定義しています。数量が比較的大きいため、時計のスケール、数字、その他の要素については、JVAScriptを使用してJVAScriptを使用して生成されます。
<！Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = 'styleSheet' href = 'href =' href = 'file path'/> <title> clock </head> <body> <div id = "clock"> <！ - ostirin-> </divid - > " <div id = "minute-line"> </div> <div id = "second-line"> </div> <！ - date-> <div id = "date-info"> </div> < type = 'text/javascript' src = '外部javascriptファイルパス'> </scrip> </body> </html>
CSSパーツ
コードを開始する前に、ポジショニング、ボーダーラジウス、変換など、理解する必要があるCSSのプロパティがいくつかあります。
位置属性
位置属性は、絶対、固定、相対、静的、継承の5つの値を持つ要素の位置付けタイプを指定します。デフォルトは静的です。つまり、位置決めはありません。要素は通常のドキュメントフローに従って表示されます。ここでの主な用途は、絶対的で相対的です
Absulte値は、要素を絶対的な位置に設定し、予期せず静的に配置された最初の上部要素に対してそれを配置します。位置は、「左」、「トップ」、「右」、「ボトム」属性を通して配置できます。上部の要素がすべて静的に配置されている場合、それは身体要素の位置に対して配置されます。
この例では、最も外側のdivクロックを相対に設定し、すべての低い要素が絶対絶対的な位置に設定され、左や上部などの属性の値を設定することにより、クロックに対する位置を決定します。
Border-Radius属性
Border-Radius属性は、丸い境界線を要素に追加します。 4つの丸い角のサイズを設定できます。この例では、この属性を使用して、クロック要素を円に設定します
例は次のとおりです。4div要素、すべての幅と高さは100pxで、国境と存在の影響は異なります。
変換属性
変換プロパティは、2Dまたは3D回転を要素に適用します。これにより、要素を回転、スケーリング、移動、または傾けることができます。この例では、時間、分、秒、スケールなどはすべて、変換属性を使用して回転します。さらに、変換オリジン属性は、要素のベースポイント位置を設定できます。
CSS部品のコード
/*global*/*{margin：0;パディング：0;}。clock {width：400px;高さ：400px;国境：10pxソリッド＃333; Box-shadow：0px 0px 20px 3px＃444 Inset;ボーダーラジウス：210px;位置：相対;マージン：5px Auto; z-index：10;バックグラウンドカラー：＃f6f6f6;}/* clock number*/。clock-num {width：40px;高さ：40px;フォントサイズ：22px;テキストアライグ：センター; Line-Height：40px;位置：絶対; z-index：8;色：＃555; font-family：ファンタジー、 'trebuchet ms';}。 z-index：20;}。hour-line {width：100px;高さ：4px; TOP：198px;左：200px;バックグラウンドカラー：＃000;ボーダーラジウス：2px;変換オリジン：0 50％; Box-shadow：1px -3px 8px 3px #aaa;}。minute-line {width：130px;高さ：2px; TOP：199px;左：190px;バックグラウンドカラー：＃000;変換オリジン：7.692％50％; Box-Shadow：1PX -3PX 8PX 1PX #AAA;}。セカンドライン{width：170px;高さ：1px; TOP：199.5px;左：180px;バックグラウンドカラー：＃f60;変換オリジン：11.765％50％; Box -Shadow：1PX -3PX 7PX 1PX #BBB;}/* ORIGIN*/。ORIGIN {width：20px;高さ：20px;ボーダーラジウス：10px;バックグラウンドカラー：＃000;位置：絶対;トップ：190px;左：190px; z-index：14;}/* date-time*/。date-info {width：160px;高さ：28px;ラインハイト：28px;テキストアライグ：センター;位置：絶対;トップ：230px;左：120px; Z-Index：11;色：＃555; font-weight：bold; font-family： 'microsoft yahei';}。time-info {width：92px;高さ：30px; Line-Height：30px;テキストアライグ：センター;位置：絶対;トップ：270px;左：154px; Z-Index：11;バックグラウンドカラー：＃555;パディング：0; Box-shadow：0px 0px 9px 2px＃222 Inset;}。time {width：30px;高さ：30px;テキストアライグ：センター;フロート：左;色：#fff; font-weight：bold;}＃minute-time {border-left：1px solid #ffff; Border-Right：1PX SOLID #FFFF;}/* SCALE*/。クロックスケール{width：195px;高さ：2px;変換オリジン：0％50％; z-index：7;位置：絶対; TOP：199px;左：200px;}。スケールショー{width：12px;高さ：2px;バックグラウンドカラー：＃555;フロート：左;}。scale-hidden {width：183px;高さ：2px;フロート：左;}JavaScriptパーツ
JSパートについては何も言うことはありません。単純なDOM操作の場合、SetInterval関数は毎秒実行され、ポインターの角度と表示時間が変更されます。コードは次のとおりです
（function（）{window.onload = initnumxy（200、160、40,40）; var hour_line = document.getelementbyid（ "hour-line"）; var minute_line = document.getelementbyid（ "minute-line"）; var second_line = document.getelementbyid（ "second-line"）; var_info = documentbyid（var info "）; 「日曜日」、「金曜日」、「金曜日」、「金曜日」、「日曜日」、「日曜日」、「日曜日」、「金曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、日曜日」、日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、日曜日」、日曜日」、日曜日、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「」、「」、「」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、 「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、日曜日」、日曜日、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、「日曜日」、日曜日document.getElement_time.getElementByid（ "second-time"）; this_day.getminutes（）; （this_day.getMonth + 1）; -90） + 'deg）' style.transform（ ' +（second*6-90） +' deg） this_day.gethours（）：minute_time.innerhtml =（）<10） + this_day.getminutes this_day.getSeconds（）; r -0.5 * r -0.5 * h}、{"left"：r + r -0.5 * w、 "top"：r -0.5 * h}、{"left"：r + r -0.5 * w、 "top"：r -0.5 * h}、{"left"：r + 0.5 * r * 1.73205 -0.5 * r + 0.5 * r -0.5 * w、 "top"：r + 0.5 * r * 1.732-0.5 * h}、{"left"：r -0.5 * w、 "top"：r + 0.5 * r * 1.732-0.5 * h}、{"left"：r -0.5 * r -0.5 * w、 " r -0.5 * r -0.5 * w、 "top"：r + 0.5 * r * 1.732-0.5 * h}、{"left"：r -0.5 * r * 1.73205-0.5 * w、 "top"：r + 0.5 * r -0.5 * h}、{"left"：r -0.5 * r -0.5 * h h ^ * W、 "TOP"：r -0.5 * r -0.5 * h}、{"left"：r -0.5 * r -0.5 * h}、{"left"：r -0.5 * r -0.5 * w、 "top"：r -0.5 * r * 1.73205-0.5 * h}、{左 "：r -0.5 * r -0.5 * 1. 0.5 * h}、{"left"：r -0.5 * r -0.5 * h}、{"left"：r -0.5 * r -0.5 * w、 "：r -0.5 * r * 1.73205-0.5 * h}、{"左 "：r -0.5 * w、" top "：r -0.5 * h}]; = 1 <= 12; document.getelementsby（ "clock-num"）; {clock.innerhtml + = "<div class = 'cloce-scale'>" <div class = 'scale-hidden'> </div class = 'scale-show'> </div> " +" </div> " scale [i] .style.transform = "rotate（" +（i * 6-90） + "deg）}}）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。