久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區

標題: 利用chatgpt5分鐘實現了網站的暗黑主題切換功能 [打印本頁]
作者: qzuser1212    時間: 2023-3-26 23:51
標題: 利用chatgpt5分鐘實現了網站的暗黑主題切換功能
本帖最后由 qzuser1212 于 2023-3-27 00:04 編輯

用的還是3.5版本的， 沒有付費不能用最新版本，聽說最新版更強大。
因為不會提問，問了很多個問題才得到想要的效果
這里我直接把貼出全部過程和效果圖。

先上效果圖，還不是很完美，有些細節還需要優化
效果圖

(, 下載次數: 99) (, 下載次數: 142) (, 下載次數: 131) (, 下載次數: 149) (, 下載次數: 109) (, 下載次數: 79)

提問

哈哈，能看到我提問了很多廢話，其實有時候提問真的需要技巧，會提問也是一種能力
但是最終它還是給了我完整代碼
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Dark Mode Toggle</title>
  6.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  7.   <style>
  8.     :root {
  9.       --background-color: #fff;
  10.       --text-color: #333;
  11.     }

  13.     .dark {
  14.       --background-color: #222;
  15.       --text-color: #fff;
  16.     }

  18.     body {
  19.       background-color: var(--background-color);
  20.       color: var(--text-color);
  21.     }

  23.     #dark-mode-toggle {
  24.       background: transparent;
  25.       border: none;
  26.       color: #333;
  27.       cursor: pointer;
  28.       font-size: 1.5rem;
  29.       position: fixed;
  30.       right: 20px;
  31.       top: 20px;
  32.       z-index: 9999;
  33.     }

  35.     #dark-mode-toggle i {
  36.       display: none;
  37.     }

  39.     #dark-mode-toggle.dark i:first-child {
  40.       display: block;
  41.     }

  43.     #dark-mode-toggle:not(.dark) i:last-child {
  44.       display: block;
  45.     }
  46.   </style>
  47. </head>
  48. <body>
  49.   <h1>Dark Mode Toggle</h1>
  50.   <p>This is a simple example of how to toggle dark mode using JavaScript and CSS.</p>
  51.   <button id="dark-mode-toggle">
  52.     <i class="fas fa-sun"></i>
  53.     <i class="fas fa-moon"></i>
  54.   </button>
  55.   <script>
  56.     var button = document.getElementById("dark-mode-toggle");
  57.     var theme = localStorage.getItem('theme'); // get saved theme, if any
  58.     if (theme) {
  59.       document.documentElement.classList.add(theme); // apply saved theme
  60.     }
  61.     button.addEventListener("click", function() {
  62.       document.documentElement.classList.toggle("dark");
  63.       var theme = document.documentElement.classList.contains('dark') ? 'dark' : '';
  64.       localStorage.setItem('theme', theme); // save current theme
  65.     });
  66.   </script>
  67. </body>
  68. </html>
復制代碼


應用到dz模板


[hide=d14]
1、<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
這段代碼是引入font-awesome圖標，一般放在common/header.htm里
2、<style>...</style>代碼是切換主題圖標的css，放common/extend_common.css里
3、<button id="dark-mode-toggle">...</button>是切換主題圖標的代碼，放到你想顯示的位置，我是放到common/header.htm導航欄的右側
4、<script>...</script>是用來切換主題、圖標及保存用戶選擇的主題的代碼，放到common/footer.htm里的</body>之前，最后一個問題就是因為我放到了header導致了錯誤，ai糾正了我
[/hide]

我問：用了你的代碼 提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

AI：這個錯誤通常表示JavaScript代碼嘗試訪問一個不存在的DOM元素。可能是因為DOM元素尚未加載到頁面中，或者元素ID或類名錯誤。您可以檢查以下內容：
         確保<button>元素具有正確的ID屬性，即id="dark-mode-toggle"。
         確保您的JavaScript代碼位于<body>元素的末尾，以確保在DOM元素加載完畢之后再運行代碼。
         如果問題仍然存在，您可以在瀏覽器的開發者工具中打開控制臺，查看更詳細的錯誤信息。



作者: s77    時間: 2023-3-27 15:06
學習學習。
作者: 小花    時間: 2023-3-27 16:30
謝謝謝謝謝尋尋
作者: 276397082    時間: 2023-3-27 21:06
提示: 作者被禁止或刪除 內容自動屏蔽
作者: gulaibai    時間: 2023-3-27 22:06
以后都不會有站長了
作者: yezirui    時間: 2023-3-29 02:35
感謝分享
作者: Guoyuh78    時間: 2023-3-29 22:04
利用chatgpt5分鐘實現了網站的暗黑主題切換
作者: Guoyuh78    時間: 2023-3-29 22:07
我搭建了一個ChatGPT 網頁 可以直接用   ailiao.wang
作者: 276397082    時間: 2023-3-30 16:06
提示: 作者被禁止或刪除 內容自動屏蔽
作者: qzuser1212    時間: 2023-3-30 19:28
Guoyuh78 發表于 2023-3-29 22:07
我搭建了一個ChatGPT 網頁 可以直接用   ailiao.wang

好的 我的經常掉線
作者: Jugaad    時間: 2023-3-31 12:13
下載試用一下，如果用著不錯就給樓主頂貼！
作者: 影子江湖    時間: 2023-4-1 19:37
謝謝分享         
作者: 276397082    時間: 2023-4-1 22:38
提示: 作者被禁止或刪除 內容自動屏蔽



歡迎光臨 Discuz! 官方交流社區 (http://www.9999xn.com/) Powered by Discuz! W1.0