使用HTML、CSS和JavaScript制作模拟时钟（初学者教程）
鍦ㄦ湰鏂囦腑锛屾偍灏嗗涔犲浣曚娇鐢℉TML銆丆SS鍜孞avaScript缂栫▼浠ｇ爜鍒朵綔妯℃嫙鏃堕挓銆傚湪杩欓噷锛屾垜灏嗗悜鎮ㄥ睍绀哄浣曞埗浣滀竴涓畝鍗曠殑妯℃嫙鏃堕挓銆傛濡傛偍鍦ㄤ笂鍥句腑鐪嬪埌鐨勶紝杩欐槸涓€涓潪甯哥畝鍗曞拰鍩虹鐨勮璁★紝鎮ㄥ彲浠ュ湪杩欓噷杩涜鎵╁睍銆傚湪杩欓噷鎮ㄥ彲浠ョ敤鏃堕拡銆佸垎閽堝拰绉掗拡妫€鏌ユ椂闂淬€傛椂閽熻剦鍐蹭腑鏈?鍒?2鐨勬暟瀛椼€傛椂闂村彇鍐充簬鎮ㄨ澶囩殑鏃堕棿锛屽嵆鏃堕棿灏嗕笌鎮ㄨ澶囩殑鏃堕棿鐩稿悓銆傝鎵嬭〃鏈€鍒濇槸浣跨敤HTML缂栫▼浠ｇ爜鏋勫缓鐨勩€侰SS浠ｇ爜宸茶鐢ㄦ潵璁捐瀹冦€傛渶寮曚汉娉ㄧ洰鐨勫伐浣滄槸JavaScript缂栫▼浠ｇ爜銆傚綋鐒讹紝瑕佸埗浣滆繖娆炬墜琛紝鎮ㄩ渶瑕佸HTML銆丆SS鍜孞avaScript鏈夊熀鏈殑浜嗚В銆傚鏋滄偍鎯充簡瑙ｆ墜琛ㄧ殑宸ヤ綔鍘熺悊锛屽彲浠ヨ鐪嬩笅闈㈢殑鐜板満婕旂ず銆傚綋鐒讹紝鎴戝凡缁忔妸蹇呰鐨勬簮浠ｇ爜鏀惧湪閭ｉ噷浜嗭紝濡傛灉浣犳効鎰忥紝浣犲彲浠ュ鍒跺畠浠潵搴旂敤鍒颁綘鑷繁鐨勫涔犲拰宸ヤ綔涓€備絾濡傛灉浣犳槸鍒濆鑰咃紝鎯崇煡閬撴垜鏄浣曞埗浣滆繖鍙墜琛ㄧ殑锛岄偅涔堜綘蹇呴』鎸夌収涓嬮潰鐨勬暀绋嬭繘琛屾搷浣溿€傞鍏堬紝鎮ㄥ繀椤诲湪鎵╁睍姝ゆ墜琛ㄤ箣鍓嶅垱寤轰竴涓狧TML鍜孋SS鏂囦欢銆傚悎骞禜TML鍜孋SS鏂囦欢銆傛偍杩樺彲浠ヤ娇鐢ㄦ牱寮忔爣绛?)灏咰SS浠ｇ爜娣诲姞鍒癏TML鏂囦欢銆傜1姝ワ細鍒涘缓鍒朵綔姝ゆ椂閽熺殑鍩烘湰缁撴瀯鎴戜娇鐢ㄤ互涓婬TML浠ｇ爜鍒涘缓浜嗗熀鏈粨鏋勩€備互涓婬TML宸茬敤浜庡埗浣滄鎵嬭〃锛屽熀鏈笂灏辨槸鎮ㄥ湪鎵嬭〃涓湅鍒扮殑琛ㄧ洏銆?divid='clock'>
--姝ラ2锛氫娇鐢–SS浠ｇ爜璁捐鑳屾櫙浠ヤ笅CSS浠ｇ爜宸茬敤浜庤璁′笂杩癏TML浠ｇ爜銆傛坊鍔犱簡鑳屾櫙棰滆壊骞朵负鎵嬭〃娣诲姞浜?涓竟妗嗐€傚湪杩欑鎯呭喌涓嬶紝鎴戝湪鎵嬭〃涓娇鐢ㄤ簡鐧借壊锛屼互渚挎寚閽堝拰鏁板瓧鏇村姞娓呮櫚鍙銆傛偍鍙互鍦ㄤ笅鍥句腑鐪嬪埌鎴戝睍绀轰簡閫氳繃娣诲姞杩欎袱涓紪绋嬩唬鐮佸彲浠ュ疄鐜颁粈涔堟牱鐨勭粨鏋溿€備富浣搟鑳屾櫙锛歳gb(13,186,230);棰滆壊锛?333锛涢《閮ㄨ竟璺濓細50px锛沠ont-family:Helvetica,sans-serif;}#clock{鑳屾櫙:#fff;杈规锛?5pxsolid#222锛涜竟鐣屽崐寰勶細50%锛涗綅缃細鐩稿锛涘搴︼細320px锛涢珮搴︼細320px锛沵argin:auto;}绗笁姝ワ細浣跨敤CSS浠ｇ爜璁捐鑳屾櫙涓婇潰鎴戜滑宸茬粡鍩烘湰璁捐濂戒簡鎵嬭〃鐨勮儗鏅€傚悓鏃讹紝鎴戜滑灏?鍒?2鐨勬暟瀛楃浉鍔犮€傚熀鏈笂锛屾垜浠氨鏄潬杩欎簺鏁板瓧鏉ュ垽鏂椂闂寸殑銆傚湪杩欎釜渚嬪瓙涓紝鎴戦€氳繃HTML缂栫▼浠ｇ爜娣诲姞浜嗕粠1鍒?2鐨勬暟瀛椼€傛垜浣跨敤璺ㄥ害鏍囩锛?span>1,....,
12锛夊啓浜嗘暟瀛椼€?ulclass='灏忔椂'>
123456789101112绗洓姝ワ細鎸夌収涓€瀹氱殑璺濈瀵规暟瀛楄繘琛屾帓搴忔濡備綘鍦ㄤ笂闈㈢湅鍒扮殑锛孒TML浠ｇ爜鍐欎簡杩欎簺鏁板瓧鐜板湪鎴戜滑灏嗚璁¤繖浜涙暟瀛楀苟鎺掑垪浠栦滑鏍规嵁鎸囧畾鐨勮窛绂汇€傚湪璁稿鎯呭喌涓嬶紝璁稿浜轰娇鐢ㄨ儗鏅浘鍍忔潵涓嶅啓杩欎簺鏁板瓧銆傚湪杩欓噷锛屾垜浣跨敤nth-of-type()CSS浠ｇ爜绮剧編鍦版帓鍒椾簡鏁板瓧銆傜幇鍦ㄤ綘鑴戞捣涓诞鐜扮殑闂鍙兘鏄垜濡備綍鎸夌収瀹屽叏鐗瑰畾鐨勮窛绂绘帓鍒楄繖浜涙暟瀛椼€傝鎴戝憡璇変綘鈥斺€旀垜鐢ㄥ害鏁版潵娴嬮噺杩欎釜璺濈銆傛垜浠兘鐭ラ亾锛屽鏋滄垜浠敤搴︽暟鏉ヨ 閲忎竴涓渾锛屽畠鐨勫ぇ灏忓氨鏄?60搴︺€傚鏋滄垜浠皢360闄や互12锛屽垯姣忎釜瑙掑害鐨勫€煎皢涓?0銆傝繖鎰忓懗鐫€濡傛灉鎮ㄥ皢姣忎釜鏁板瓧鏀剧疆鍦?0搴︾殑璺濈澶勶紝鏁板瓧12灏嗗湪鍦嗗舰妗嗘灦涓簿纭浐瀹氱殑璺濈澶勬壘鍒板畠鐨勪綅缃€傚涓嬪浘锛屾垜鐢ㄧ涓€涓暟瀛楁棆杞簡30搴︺€傛垜浠€氳繃灏嗗叾鏃嬭浆60搴﹁鏉ヤ娇鐢ㄧ浉鍚岀殑鏁板瓧2銆倁l{鍒楄〃鏍峰紡锛氭棤锛涢《閮細0锛涗繚璇侀噾锛?锛涘～鍏咃細0锛涗綅缃細缁濆锛涙枃鏈榻愶細灞呬腑锛泒li{浣嶇疆锛氱粷瀵癸紱鍙樻崲鍘熺偣锛?0%100%锛沨eight:160px;}.hours{left:120px;瀛椾綋澶у皬锛?3.3333333333px锛涘瓧姣嶉棿璺濓細-1.6px锛沴ine-height:45px;}.hoursli{width:80px;}.hoursspan{display:block;}/*浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?*/.hoursli:nth-of-type(1){鍙樻崲锛氭棆杞紙30搴︼級锛泒.hoursli锛歯th-鈥嬧€媜f-type锛?锛塻pan{鍙樻崲锛氭棆杞紙-30deg锛夛紱}.hoursli锛歯th-鈥嬧€媜f-type锛?锛墈鍙樻崲锛氭棆杞紙60deg锛?}.hoursli:nth-of-type(2)span{transform:rotate(-60deg);}/*浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?*/.hoursli:nth-of-type(3){鍙樻崲锛氭棆杞紙90搴︼級锛泒.hoursli锛歯th-鈥嬧€媜f-type锛?锛塻pan{鍙樻崲锛氭棆杞紙-90deg锛夛紱}.hoursli锛歯th-鈥嬧€媜f-type锛?锛墈鍙樻崲锛氭棆杞紙120deg锛?}.hoursli:nth-of-type(4)span{transform:rotate(-120deg);}/*浠ヤ笅浠ｇ爜鏈夊姪浜庤璁℃暟瀛?*/.hoursli:nth-of-type(5){鍙樻崲锛氭棆杞紙150搴︼級锛泒.hoursli:nth-of-type(5)span{鍙樻崲锛氭棆杞紙-150deg锛夛紱}.hoursli:nth-of-type(6){transform:rotate(180deg);}.hoursli:nth-of-type(6)span{transform:rotate(-180deg);}/*涓嬮潰鐨勪唬鐮佹湁鍔╀簬璁捐缂栧彿7*/.hoursli:nth-of-type(7){transform:rotate(210deg);}.hoursli:nth-of-type(7)span{transform:rotate(-210deg);}銆俬oursli:nth-of-type(8){transform:rotate(240deg);}.hoursli:nth-of-type(8)span{transform:rotate(-240deg);}/*涓嬮潰鐨勪唬鐮佸府鍔╄璁＄紪鍙?*/.hoursli:nth-of-type(9){transform:rotate(270deg);}.hoursli:nth-of-type(9)span{transform:rotate(-270deg);}銆俬oursli:nth-of-type(10){transform:rotate(300deg);}.hoursli:nth-of-type(10)span{transform:rotate(-300deg);}/*涓嬮潰鐨勪唬鐮佸府鍔╄璁℃暟瀛?1*/.hoursli:nth-of-type(11){transform:rotate(330deg);}.hoursli:nth-of-type(11)span{transform:rotate(-330deg);}銆俬oursli:nth-of-type(12){transform:rotate(360deg);}.hoursli:nth-of-type(12)span{transform:rotate(-360deg);}姝ラ5:鍚戞椂閽熸坊鍔犱笁鏍规寚閽堬紙灏忔椂锛屽垎銆佺锛夎嚦姝わ紝鎴戜滑宸茬粡瀹屾垚浜嗘墜琛ㄧ殑鍩烘湰璁捐锛岀幇鍦ㄦ垜浠涓烘墜琛ㄦ坊鍔犱笁鏍规寚閽堛€傚綋鎴戜滑璁剧疆涓€浜涙椂闂存椂锛屾垜浠皢瀹冭缃负灏忔椂銆佸垎閽熷拰绉掋€傛墍浠ュ湪杩欑鎯呭喌涓嬶紝鎴戜篃浼氱敤涓夊彧鎵嬫潵鍒涘缓涓嬮潰鐨凥TML缂栫▼浠ｇ爜銆?divclass='hr-wrapper'>
