鍦ㄦ湰鏂囦腑锛屾偍灏嗗涔犲浣曚娇鐢?HTML銆丆SS 鍜?JavaScript 缂栫▼浠ｇ爜鍒朵綔妯℃嫙鏃堕挓銆傚湪杩欓噷鎴戝皢鍚戞偍灞曠ず濡備綍鍒朵綔涓€涓畝鍗曠殑妯℃嫙鏃堕挓銆?姝ｅ鎮ㄥ湪涓婂浘涓墍鐪嬪埌鐨勶紝杩欐槸涓€涓潪甯哥畝鍗曞緢鍩虹鐨勮璁★紝浣犲彲浠ュ湪杩欓噷寤朵几鎵╁睍銆傝繖閲屾湁鏃堕拡銆佸垎閽堝拰绉掗拡锛屽彲浠ユ煡鐪嬫椂闂淬€傛椂閽熻剦鍐蹭腑鏈? 鍒?12 鐨勬暟瀛椼€傛椂闂村彇鍐充簬鎮ㄨ澶囩殑鏃堕棿锛屽嵆鏃堕棿灏嗕笌鎮ㄨ澶囩殑鏃堕棿鐩稿悓銆傛渶鍒濅娇鐢?HTML 缂栫▼浠ｇ爜鏉ユ瀯閫犺繖娆炬墜琛ㄣ€侰SS 浠ｇ爜宸茬敤浜庤璁″畠銆傛渶寮曚汉娉ㄧ洰鐨勫伐浣滄槸 JavaScript 缂栫▼浠ｇ爜銆傚綋鐒讹紝瑕佸埗浣滆繖娆炬墜琛紝鎮ㄩ渶瑕佸HTML銆丆SS鍜孞avaScript鏈変竴涓熀鏈殑浜嗚В銆傚鏋滄偍鎯充簡瑙ｈ繖娆炬墜琛ㄧ殑宸ヤ綔鍘熺悊锛屽彲浠ヨ鐪嬩笅闈㈢殑鐜板満婕旂ず銆傚綋鐒讹紝鎴戝凡缁忔妸蹇呰鐨勬簮浠ｇ爜鏀惧湪閭ｉ噷锛屽鏋滀綘鎰挎剰锛屼綘鍙互澶嶅埗瀹冧滑搴旂敤浣犺嚜宸辩殑瀛︿範鍜屽伐浣溿€備絾鏄紝濡傛灉鎮ㄦ槸鍒濆鑰呭苟鎯崇煡閬撴垜鏄浣曞埗浣滆繖娆炬墜琛ㄧ殑锛岄偅涔堟偍蹇呴』鎸夌収涓嬮潰鐨勬暀绋嬭繘琛屾搷浣溿€傞鍏堬紝鎮ㄥ繀椤诲湪鎵╁睍姝ゆ墜琛ㄤ箣鍓嶅垱寤轰竴涓?HTML 鍜?CSS 鏂囦欢銆傚悎骞?HTML 鏂囦欢鍜?CSS 鏂囦欢銆傛偍杩樺彲浠ヤ娇鐢ㄦ牱寮忔爣璁?( <style>css code</style> )灏?CSS 浠ｇ爜娣诲姞鍒?HTML 鏂囦欢銆傛楠?锛氬垱寤哄埗浣滄鏃堕挓鐨勫熀鏈粨鏋勬垜浣跨敤浠ヤ笅 HTML 浠ｇ爜鍒涘缓浜嗗熀鏈粨鏋勩€備笅闈㈢殑 HTML 宸茬粡琚敤鏉ュ埗浣滆繖娆炬墜琛紝鍩烘湰涓婂氨鏄綘鍦ㄦ墜琛ㄤ腑鐪嬪埌鐨勮〃鐩樸€?<div id='clock'> <!--鏃堕挓缂栧彿(1,2,....,12)--> <!--鏃堕挓鎸囬拡()--> </div>---姝ラ2锛氫娇鐢?CSS 浠ｇ爜璁捐鑳屾櫙浠ヤ笅 CSS 浠ｇ爜宸茬敤浜庤璁′笂杩?HTML 浠ｇ爜銆傛坊鍔犱簡鑳屾櫙棰滆壊骞朵负鎵嬭〃娣诲姞浜?1 涓竟妗嗐€傚湪杩欑鎯呭喌涓嬶紝鎴戝湪鎵嬭〃涓娇鐢ㄤ簡鐧借壊锛屼互渚挎洿娓呮櫚鍦扮湅鍒版寚閽堝拰鏁板瓧銆備綘鍙互鐪嬪埌涓嬮潰鐨勫浘鐗囷紝鎴戝睍绀轰簡閫氳繃娣诲姞杩欎袱涓紪绋嬩唬鐮佸彲浠ヨ幏寰椾粈涔堟牱鐨勭粨鏋溿€俠ody { background: rgb(13, 186, 230); color: #333; margin-top: 50px; font-family: Helvetica, sans-serif;}#clock { background: #fff; border: 15px solid #222; border-radius: 50%; position: relative; width: 320px; height: 320px; margin: auto;}姝ラ3锛氫娇鐢?CSS 浠ｇ爜璁捐鑳屾櫙涓婇潰鎴戜滑宸茬粡鍩烘湰璁捐浜嗘墜琛ㄧ殑鑳屾櫙銆傚悓鏃讹紝鎴戜滑灏嗘妸 1 鍒?12 鐨勬暟瀛楃浉鍔犮€傚熀鏈笂锛屾垜浠緷闈犺繖浜涙暟瀛楁潵鏌ョ湅鏃堕棿銆傚湪鏈緥涓紝鎴戦€氳繃 HTML 缂栫▼浠ｇ爜娣诲姞浜嗕粠 1 鍒?12 鐨勬暟瀛椼€傛垜浣跨敤 span 鏍囩锛?lt;span>1</span> ,...., <span>12</span>锛夊啓浜嗘暟瀛椼€? <ul class='hours'> <li> <span> 1 </span> </li> <li> <span> 2 </span> </li> <li> <span> 3 </span> </li> <li> <span> 4 </span> </li> <li> <span> 5 </span> </li> <li> <span> 6 </span> </li> <li> <span> 7 </span> </li> <li> <span> 8 </span> </li> <li> <span> 9 </span> </li> <li> <span> 10 </span> </li> <li> <span> 11 </span> </li> <li> <span> 12 </span> </li> </ul>姝ラ4锛氭牴鎹壒瀹氳窛绂诲鏁板瓧杩涜鎺掑簭姝ｅ鎮ㄥ湪涓婇潰鐪嬪埌鐨勶紝HTML 浠ｇ爜浼氬啓鍏ヨ繖浜涙暟瀛椼€傜幇鍦ㄦ垜浠皢璁捐杩欎簺鏁板瓧骞舵寜鐓ф寚瀹氱殑璺濈鎺掑垪瀹冧滑銆傚湪寰堝鎯呭喌涓嬶紝寰堝浜轰娇鐢ㄨ儗鏅浘鐗囨潵涓嶅啓杩欎簺鏁板瓧銆傚湪杩欓噷锛屾垜浣跨敤nth-of-type() CSS 浠ｇ爜绮剧編鍦版帓鍒椾簡杩欎簺鏁板瓧銆傜幇鍦ㄤ綘鑴戞捣涓嚭鐜扮殑闂鍙兘鏄垜鏄浣曟寜鐓у畬鍏ㄧ壒瀹氱殑璺濈鎺掑垪杩欎簺鏁板瓧鐨勩€傝鎴戝憡璇変綘 - 鎴戠敤搴︽暟鏉ユ祴閲忚繖涓窛绂汇€傛垜浠兘鐭ラ亾锛屽鏋滄垜浠敤搴︽暟鏉ユ祴閲忎竴涓渾锛屽畠鐨勫ぇ灏忔槸360搴︺€傚鏋滄垜浠皢 360 闄や互 12锛屽垯姣忎釜瑙掑害鐨勫€煎皢鏄?30銆傝繖鎰忓懗鐫€濡傛灉鎮ㄥ皢姣忎釜鏁板瓧鏀剧疆鍦?0 搴︾殑璺濈澶勶紝鏁板瓧 12 灏嗗湪鍦嗗舰妗嗘灦涓互瀹屽叏鍥哄畾鐨勮窛绂绘壘鍒板畠鐨勪綅缃€傚涓嬫墍绀猴紝鎴戜娇鐢ㄧ涓€涓暟瀛楁棆杞?30 搴︺€傛垜浠€氳繃浠?60 搴﹁鏃嬭浆瀹冩潵浣跨敤鐩稿悓鐨勬暟瀛?銆倁l { list-style: none; top: 0; margin: 0; padding: 0; position: absolute; text-align: center;}li { position: absolute; transform-origin: 50% 100%; height: 160px;}.hours { left: 120px; font-size: 23.3333333333px; letter-spacing: -1.6px; line-height: 45px;}.hours li { width: 80px;}.hours span { display: block;}/* 浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?1*/.hours li:nth-of-type(1) { transform: rotate(30deg);}.hours li:nth-of-type(1) span { transform: rotate(-30deg);}.hours li:nth-of-type(2) { transform: rotate(60deg);}.hours li:nth-of-type(2) span { transform: rotate(-60deg);}/* 浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?3*/.hours li:nth-of-type(3) { transform: rotate(90deg);}.hours li:nth-of-type(3) span { transform: rotate(-90deg);}.hours li:nth-of-type(4) { transform: rotate(120deg);}.hours li:nth-of-type(4) span { transform: rotate(-120deg);}/* 浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?5*/.hours li:nth-of-type(5) { transform: rotate(150deg);}.hours li:nth-of-type(5) span { transform: rotate(-150deg);}.hours li:nth-of-type(6) { transform: rotate(180deg);}.hours li:nth-of-type(6) span { transform: rotate(-180deg);}/* 浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?7*/.hours li:nth-of-type(7) { transform: rotate(210deg);}.hours li:nth-of-type(7) span { transform: rotate(-210deg);}.hours li:nth-of-type(8) { transform: rotate(240deg);}.hours li:nth-of-type(8) span { transform: rotate(-240deg);}/* 浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?9 */.hours li:nth-of-type(9) { transform: rotate(270deg);}.hours li:nth-of-type(9) span { transform: rotate(-270deg);}.hours li:nth-of-type(10) { transform: rotate(300deg);}.hours li:nth-of-type(10) span { transform: rotate(-300deg);}/* 浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?11*/.hours li:nth-of-type(11) { transform: rotate(330deg);}.hours li:nth-of-type(11) span { transform: rotate(-330deg);}.hours li:nth-of-type(12) { transform: rotate(360deg);}.hours li:nth-of-type(12) span { transform: rotate(-360deg);}姝ラ5锛氬湪鏃堕挓涓婃坊鍔犱笁涓寚閽堬紙灏忔椂銆佸垎閽熴€佺锛夎嚦姝わ紝鎴戜滑宸茬粡瀹屾垚浜嗘墜琛ㄧ殑鍩烘湰璁捐銆傜幇鍦ㄦ垜浠皢鍚戞墜琛ㄦ坊鍔犱笁涓寚閽堛€傚綋鎴戜滑璁剧疆涓€浜涙椂闂存椂锛屾垜浠皢鍏惰缃负灏忔椂銆佸垎閽熷拰绉掋€傛墍浠ュ湪杩欑鎯呭喌涓嬶紝鎴戜篃灏嗕娇鐢ㄤ笁鍙墜鏉ュ垱寤轰互涓?HTML 缂栫▼浠ｇ爜銆?<div class='hr-wrapper'> <div class='hand hr'></div> </div> <div class='min-wrapper'> <div class='hand min'></div> </div> <div class='sec-wrapper'> <div class='hand sec'></div> </div>姝ラ6锛氭妸姣忓彧鎵嬮兘鎽嗗ソ鎴戜娇鐢ㄤ簡浠ヤ笅 CSS锛屾垜鍙璁′簡鏃堕拡銆傜幇鍦ㄧ殑闂鍙兘鏄繖浜涙墜濡備綍瀹氭湡鏃嬭浆銆傝鎴戝憡璇変綘 - 濡傛灉浣犳煡鐪嬩綘鐨?CSS锛屼綘浼氭槑鐧借繖浜涙墜鐨勪竴渚х殑浣嶇疆鏄粷瀵圭殑銆傜粨鏋滐紝閭ｄ釜鏂瑰悜淇濇寔瀹屽叏绋冲畾锛屽彟涓€渚х户缁棆杞€?hr-wrapper, .min-wrapper, .sec-wrapper { position: absolute; width: 320px; height: 320px;}.hand { position: absolute; bottom: 50%; transform-origin: 50% 100%;}.hr { background: #222; left: 152px; width: 13px; height: 105px; border-radius: 10px; animation: rotateHand 43200s linear infinite;}.hr:after { background: #222; border-radius: 50%; content: ""; display: block; position: absolute; bottom: -8px; width: 13px; height: 16px;}鎴戜娇鐢ㄤ互涓嬩唬鐮佹潵璁捐鍒嗛拡銆傝鎴戝憡璇変綘涓€浠朵簨锛屽鏋滀綘鎯冲鍔犺繖浜涘垏鍙ｇ殑闀垮害鍜岄珮搴︼紝浣犲彲浠ュ緢瀹规槗鍦板仛鍒般€?min { background: #222; left: 155px; width: 9px; height: 125px; border-radius: 8px; animation: rotateHand 3600s linear infinite;}.min:after { background: #222; border-radius: 50%; content: ""; display: block; position: absolute; bottom: -8px; width: 9px; height: 16px;}鎴戝凡缁忎娇鐢ㄤ互涓嬩唬鐮佽繘琛屼簡浜屾墜璁捐銆傛偍浼氭敞鎰忓埌锛屾垜宸插湪姝ゅ鎸囩ず浣跨敤@keyframes rotateHand鏃嬭浆姝ょ閽堛€?sec { background: #d00; left: 156.5px; width: 5px; height: 132px; border-radius: 8px; animation: rotateHand 60s linear infinite;}.sec:after { background: #d00; border-radius: 50%; content: ""; display: block; position: absolute; bottom: -3.5px; width: 5px; height: 7px;}@keyframes rotateHand { to { transform: rotate(1turn); }}姝ラ7锛氭坊鍔?JavaScript 浠ｇ爜浠ユ縺娲绘椂閽熷埌鐩墠涓烘锛屾垜浠彧璁捐浜嗗畠銆傜幇鍦ㄦ垜浠皢婵€娲昏繖涓墜琛ㄣ€?// 鑾峰彇褰撳墠鏃堕棿var dateInfo = new Date();var hr = dateInfo.getHours() > 12 ? dateInfo.getHours() - 12 : dateInfo.getHours(), min = dateInfo.getMinutes(), sec = dateInfo.getSeconds(), milsec = dateInfo.getMilliseconds();姝ラ8锛氱‘瀹氭墜鍔ㄦ椂閽熺殑鏃嬭浆鎴戝厛鍛婅瘔杩囦綘锛屾墜琛ㄧ殑鎸囬拡涓€閮ㄥ垎鏄浐瀹氱殑锛屽彟涓€閮ㄥ垎鏄棆杞殑銆傝鏃嬭浆灏嗙敱 JavaScript 浠ｇ爜鎺у埗銆?姝ｅ鎴戜箣鍓嶆墍璇达紝涓€灏忔椂绛変簬 30 搴︼紙1 hr = 30掳锛夛紝涓€鍒嗛挓绛変簬 6 搴︼紙1 min = 6掳锛夛紝涓€绉掔瓑浜?6 搴︼紙1 sec = 6掳锛夈€傛垜灏嗘墜鍔ㄥ皢褰撳墠鏃堕挓涔樹互 30 浠ユ牴鎹寚瀹氭椂闂存棆杞椂閽熺殑鍒囧壊銆傚亣璁炬垜浠鍔犱簡鍒嗛挓鏁帮紝浠ュ皢鏃堕挓鎸囬拡淇濇寔鍦ㄦ洿鏁存磥鍜岀簿纭殑浣嶇疆銆備緥濡傦紝濡傛灉鎴戝憡璇変綘锛屽鏋滄椂閽熷綋鍓嶅湪 03:30锛岄偅涔堟牴鎹鍒欙紝鏃堕拡灏嗗湪 90 搴︺€傚湪杩欑鎯呭喌涓嬶紝姘歌繙涓嶄細鏄剧ず纭垏鐨勬椂闂淬€傚洜涓烘垜浠煡閬撳湪 03:30 鐨勬儏鍐典笅锛屾椂閽熺殑鎸囬拡灏嗗湪 3 鍜?4 涔嬮棿鐨勬煇涓綅缃€傝繖鎰忓懗鐫€鎸囬拡灏嗙暐楂樹簬 90 搴︺€備负浜嗙‘瀹氳繖浠朵簨锛屾垜浠坊鍔犱簡鏃堕拡鍒板垎閽堢殑璺濈銆傝繖鏍锋椂閽熺殑鎸囬拡灏变細鍦ㄦ纭殑浣嶇疆銆傛垜宸茬粡鎸囩ず浜嗙浉鍚岀殑鍒嗛挓鍜岀閽堟棆杞柟娉曘€傚鏋滄偍浜嗚В鍩烘湰鐨?JavaScript 缂栫▼浠ｇ爜锛岄偅涔堝笇鏈涙偍鑳界悊瑙ｈ繖绉嶈璁°€倂ar hrAngle = hr * 30 + (min * 6 / 12), minAngle = min * 6 + (sec * 6 / 60), secAngle = sec * 6 + (milsec * 0.36 / 1000);// 璁剧疆鎵嬮儴鍖呰绾哥殑鍒濆瑙掑害function setAngle(wrapper, angle) { document.querySelector("." + wrapper).style.transform = "rotate(" + angle + "deg)";}setAngle("hr-wrapper", hrAngle);setAngle("min-wrapper", minAngle);setAngle("sec-wrapper", secAngle);甯屾湜閫氳繃鏈枃锛屾偍宸茬粡瀛︿細浜嗗浣曚娇鐢?HTML銆丆SS 鍜?JavaScript浠ｇ爜鍒朵綔杩欎釜鏃堕挓銆?椤堕儴鐨勭浜岀鏃堕挓鎴戜笅涓€绡囨枃绔犲彂璇︾粏鏁欑▼浠ｇ爜涓嬭浇CSDN绉垎涓嬭浇https://download.csdn.net/download/qq_44273429/19694888鎴栬€呭叧娉ㄤ綔鑰呭叕浼楀彿銆愭捣鎷ャ€戝洖澶嶃€愯繘缇ゃ€戯紝鍏嶈垂涓嬭浇CSDN璧勬簮鍜岀櫨搴︽枃搴撹祫婧愷煕?wuhu ! 璧烽 !甯屾湜閫氳繃鏈枃锛屾偍宸茬粡瀛︿細浜嗗浣曚娇鐢?HTML銆丆SS 鍜?JavaScript 鍒朵綔妯℃嫙鏃堕挓(鍒濆鑰呮暀绋?銆傞渶瑕佸畬鏁存簮鐮佸彲浠ュ叧娉ㄥ叕浼楀彿銆愭捣鎷ャ€戝洖澶嶃€愪唬鐮併€戞垜宸茬粡鍐欎簡寰堥暱涓€娈垫椂闂寸殑鎶€鏈崥瀹紝杩欐槸鎴戠殑涓€绡?Web 搴旂敤绋嬪簭鏁欑▼銆傛垜鍠滄閫氳繃鏂囩珷鍒嗕韩鎶€鏈笌蹇箰銆傛偍鍙互璁块棶鎴戠殑鍗氬锛?鎬濆惁-娴锋嫢 浠ヤ簡瑙ｆ洿澶氫俊鎭€傚笇鏈涗綘浠細鍠滄锛侌煒婐煉?娆㈣繋澶у鍦ㄨ瘎璁哄尯鎻愬嚭鎰忚鍜屽缓璁紒馃拰濡傛灉浣犵湡鐨勪粠杩欑瘒鏂囩珷涓鍒颁簡涓€浜涙柊涓滆タ锛屽枩娆㈠畠锛屾敹钘忓畠骞朵笌浣犵殑灏忎紮浼村垎浜€傪煠楁渶鍚庯紝涓嶈蹇樹簡鉂ゆ垨馃搼鏀寔涓€涓嬪摝銆?/p>
