利用chatgpt5分钟实现了网站的暗黑主题切换功能
2023/03/27 07:42:18
鐢ㄧ殑杩樻槸3.5鐗堟湰鐨勶紝 娌℃湁浠樿垂涓嶈兘鐢ㄦ渶鏂扮増鏈紝鍚鏈鏂扮増鏇村己澶с
鍥犱负涓嶄細鎻愰棶锛岄棶浜嗗緢澶氫釜闂鎵嶅緱鍒版兂瑕佺殑鏁堟灉
杩欓噷鎴戠洿鎺ユ妸璐村嚭鍏ㄩ儴杩囩▼鍜屾晥鏋滃浘銆
鍏堜笂鏁堟灉鍥撅紝杩樹笉鏄緢瀹岀編锛屾湁浜涚粏鑺傝繕闇瑕佷紭鍖
鏁堟灉鍥
鎻愰棶
浣嗘槸鏈缁堝畠杩樻槸缁欎簡鎴戝畬鏁翠唬鐮
搴旂敤鍒癲z妯℃澘
鎴戦棶锛鐢ㄤ簡浣犵殑浠ｇ爜 鎻愮ずuncaught TypeError: Cannot read properties of null (reading 'addEventListener')
AI锛杩欎釜閿欒閫氬父琛ㄧずJavaScript浠ｇ爜灏濊瘯璁块棶涓涓笉瀛樺湪鐨凞OM鍏冪礌銆傚彲鑳芥槸鍥犱负DOM鍏冪礌灏氭湭鍔犺浇鍒伴〉闈腑锛屾垨鑰呭厓绱營D鎴栫被鍚嶉敊璇傛偍鍙互妫鏌ヤ互涓嬪唴瀹癸細
纭繚<button>鍏冪礌鍏锋湁姝ｇ‘鐨処D灞炴э紝鍗砳d="dark-mode-toggle"銆
纭繚鎮ㄧ殑JavaScript浠ｇ爜浣嶄簬<body>鍏冪礌鐨勬湯灏撅紝浠ョ‘淇濆湪DOM鍏冪礌鍔犺浇瀹屾瘯涔嬪悗鍐嶈繍琛屼唬鐮併
濡傛灉闂浠嶇劧瀛樺湪锛屾偍鍙互鍦ㄦ祻瑙堝櫒鐨勫紑鍙戣呭伐鍏蜂腑鎵撳紑鎺у埗鍙帮紝鏌ョ湅鏇磋缁嗙殑閿欒淇℃伅銆
鍥犱负涓嶄細鎻愰棶锛岄棶浜嗗緢澶氫釜闂鎵嶅緱鍒版兂瑕佺殑鏁堟灉
杩欓噷鎴戠洿鎺ユ妸璐村嚭鍏ㄩ儴杩囩▼鍜屾晥鏋滃浘銆
鍏堜笂鏁堟灉鍥撅紝杩樹笉鏄緢瀹岀編锛屾湁浜涚粏鑺傝繕闇瑕佷紭鍖
鏁堟灉鍥
鎻愰棶
- 濡備綍蹇熻缃戦〉鏀寔鏆楅粦妯″紡鎬庝箞瀹炵幇鍒囨崲鍛鍙互寮勫ソ鐪嬩竴鐐逛箞鎬庝箞淇濆瓨鐢ㄦ埛閫夋嫨鏄惁鍚敤鏆楅粦妯″紡鍙互鎶奵heck鎹㈡垚涓や釜鍥炬爣鍒囨崲涔 鏍峰紡鏇寸編瑙備竴浜涚敤浜嗕綘鐨勪唬鐮 鎻愮ずuncaught TypeError: Cannot read properties of null (reading 'addEventListener')
浣嗘槸鏈缁堝畠杩樻槸缁欎簡鎴戝畬鏁翠唬鐮
- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Dark Mode Toggle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <style> :root { --background-color: #fff; --text-color: #333; } .dark { --background-color: #222; --text-color: #fff; } body { background-color: var(--background-color); color: var(--text-color); } #dark-mode-toggle { background: transparent; border: none; color: #333; cursor: pointer; font-size: 1.5rem; position: fixed; right: 20px; top: 20px; z-index: 9999; } #dark-mode-toggle i { display: none; } #dark-mode-toggle.dark i:first-child { display: block; } #dark-mode-toggle:not(.dark) i:last-child { display: block; } </style></head><body> <h1>Dark Mode Toggle</h1> <p>This is a simple example of how to toggle dark mode using JavaScript and CSS.</p> <button id="dark-mode-toggle"> <i class="fas fa-sun"></i> <i class="fas fa-moon"></i> </button> <script> var button = document.getElementById("dark-mode-toggle"); var theme = localStorage.getItem('theme'); // get saved theme, if any if (theme) { document.documentElement.classList.add(theme); // apply saved theme } button.addEventListener("click", function() { document.documentElement.classList.toggle("dark"); var theme = document.documentElement.classList.contains('dark') ? 'dark' : ''; localStorage.setItem('theme', theme); // save current theme }); </script></body></html>
搴旂敤鍒癲z妯℃澘
鎴戦棶锛鐢ㄤ簡浣犵殑浠ｇ爜 鎻愮ずuncaught TypeError: Cannot read properties of null (reading 'addEventListener')
AI锛杩欎釜閿欒閫氬父琛ㄧずJavaScript浠ｇ爜灏濊瘯璁块棶涓涓笉瀛樺湪鐨凞OM鍏冪礌銆傚彲鑳芥槸鍥犱负DOM鍏冪礌灏氭湭鍔犺浇鍒伴〉闈腑锛屾垨鑰呭厓绱營D鎴栫被鍚嶉敊璇傛偍鍙互妫鏌ヤ互涓嬪唴瀹癸細
纭繚<button>鍏冪礌鍏锋湁姝ｇ‘鐨処D灞炴э紝鍗砳d="dark-mode-toggle"銆
纭繚鎮ㄧ殑JavaScript浠ｇ爜浣嶄簬<body>鍏冪礌鐨勬湯灏撅紝浠ョ‘淇濆湪DOM鍏冪礌鍔犺浇瀹屾瘯涔嬪悗鍐嶈繍琛屼唬鐮併
濡傛灉闂浠嶇劧瀛樺湪锛屾偍鍙互鍦ㄦ祻瑙堝櫒鐨勫紑鍙戣呭伐鍏蜂腑鎵撳紑鎺у埗鍙帮紝鏌ョ湅鏇磋缁嗙殑閿欒淇℃伅銆