利用chatgpt5分钟实现了网站的暗黑主题切换功能

qzuser1212 發表於 2023-3-26 23:51:28

利用chatgpt5分钟实现了网站的暗黑主题切换功能

用的还是3.5版本的，没有付费不能用最新版本，听说最新版更强大。 因为不会提问，问了很多个问题才得到想要的效果 这里我直接把贴出全部过程和效果图。 先上效果图，还不是很完美，有些细节还需要优化 效果图 <img title="mi.xcxgy.cn_forum.php (1).png" id="aimg_21184" aid="21184" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/26/233402o71974ibiir692u1.png" src="https://www.dismall.com/data/attachment/forum/202303/26/233402o71974ibiir692u1.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="mi.xcxgy.cn_forum.php.png" id="aimg_21183" aid="21183" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/26/233402wr4aff4cfibwhzf0.png" src="https://www.dismall.com/data/attachment/forum/202303/26/233402wr4aff4cfibwhzf0.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="mi.xcxgy.cn_forum.php_mod=viewthread&amp;tid=61&amp;extra=page=1 (1).png" id="aimg_21188" aid="21188" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/26/233404arslwrsjg7jsojlk.png" src="https://www.dismall.com/data/attachment/forum/202303/26/233404arslwrsjg7jsojlk.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="mi.xcxgy.cn_forum.php_mod=viewthread&amp;tid=61&amp;extra=page=1.png" id="aimg_21187" aid="21187" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/26/233403h5bi58n8tj65hn01.png" src="https://www.dismall.com/data/attachment/forum/202303/26/233403h5bi58n8tj65hn01.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="mi.xcxgy.cn_index.php(iPhone XR) (1).png" id="aimg_21189" aid="21189" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/27/000429kysz3qal6zl22qqx.png" src="https://www.dismall.com/data/attachment/forum/202303/27/000429kysz3qal6zl22qqx.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="mi.xcxgy.cn_index.php(iPhone XR).png" id="aimg_21190" aid="21190" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/27/000429ig02ija3u3230opa.png" src="https://www.dismall.com/data/attachment/forum/202303/27/000429ig02ija3u3230opa.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> 提问 <ul><li>如何快速让网页支持暗黑模式<li>怎么实现切换呢<li>可以弄好看一点么<li>怎么保存用户选择是否启用暗黑模式<li>可以把check换成两个图标切换么样式更美观一些<li>用了你的代码提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener') </ul>哈哈，能看到我提问了很多废话，其实有时候提问真的需要技巧，会提问也是一种能力 但是最终它还是给了我完整代码 <ol><li><!DOCTYPE html> <li><html lang="en"> <li><head> <li>  <meta charset="UTF-8"> <li>  <title>Dark Mode Toggle</title> <li>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <li>  <style> <li>    :root { <li>      --background-color: #fff; <li>      --text-color: #333; <li>    } <li> <li>    .dark { <li>      --background-color: #222; <li>      --text-color: #fff; <li>    } <li> <li>    body { <li>      background-color: var(--background-color); <li>      color: var(--text-color); <li>    } <li> <li>    #dark-mode-toggle { <li>      background: transparent; <li>      border: none; <li>      color: #333; <li>      cursor: pointer; <li>      font-size: 1.5rem; <li>      position: fixed; <li>      right: 20px; <li>      top: 20px; <li>      z-index: 9999; <li>    } <li> <li>    #dark-mode-toggle i { <li>      display: none; <li>    } <li> <li>    #dark-mode-toggle.dark i:first-child { <li>      display: block; <li>    } <li> <li>    #dark-mode-toggle:not(.dark) i:last-child { <li>      display: block; <li>    } <li>  </style> <li></head> <li><body> <li>  <h1>Dark Mode Toggle</h1> <li>  This is a simple example of how to toggle dark mode using JavaScript and CSS. <li>  <button id="dark-mode-toggle"> <li>    <li>    <li>  </button> <li>  <script> <li>    var button = document.getElementById("dark-mode-toggle"); <li>    var theme = localStorage.getItem('theme'); // get saved theme, if any <li>    if (theme) { <li>      document.documentElement.classList.add(theme); // apply saved theme <li>    } <li>    button.addEventListener("click", function() { <li>      document.documentElement.classList.toggle("dark"); <li>      var theme = document.documentElement.classList.contains('dark') ? 'dark' : ''; <li>      localStorage.setItem('theme', theme); // save current theme <li>    }); <li>  </script> <li></body> <li></html> <li></ol> 应用到dz模板 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纠正了我 我问：用了你的代码提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener') AI：这个错误通常表示JavaScript代码尝试访问一个不存在的DOM元素。可能是因为DOM元素尚未加载到页面中，或者元素ID或类名错误。您可以检查以下内容：          确保<button>元素具有正确的ID属性，即id="dark-mode-toggle"。          确保您的JavaScript代码位于<body>元素的末尾，以确保在DOM元素加载完毕之后再运行代码。          如果问题仍然存在，您可以在浏览器的开发者工具中打开控制台，查看更详细的错误信息。 代码, rgb, 切换 <img title="mi.xcxgy.cn_index.php(iPhone XR).png" id="aimg_21185" aid="21185" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/26/233403i4etfxmm8w3cibwt.png" src="https://www.dismall.com/data/attachment/forum/202303/26/233403i4etfxmm8w3cibwt.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" alt="mi.xcxgy.cn_forum.php_mod=forumdisplay&amp;fid=3 (1).png" title="mi.xcxgy.cn_forum.php_mod=forumdisplay&amp;fid=3 (1).png" w="2880" /><img title="mi.xcxgy.cn_index.php(iPhone XR).png" id="aimg_21186" aid="21186" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202303/26/233403o84zxgxmghkav1v8.png" src="https://www.dismall.com/data/attachment/forum/202303/26/233403o84zxgxmghkav1v8.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" alt="mi.xcxgy.cn_forum.php_mod=forumdisplay&amp;fid=3.png" title="mi.xcxgy.cn_forum.php_mod=forumdisplay&amp;fid=3.png" w="2880" />

s77 發表於 2023-3-27 15:06:31

学习学习。

小花發表於 2023-3-27 16:30:34

谢谢谢谢谢寻寻

276397082 發表於 2023-3-27 21:06:29

以后都不会有站长了

gulaibai 發表於 2023-3-27 22:06:14

感谢分享

yezirui 發表於 2023-3-29 02:35:22

利用chatgpt5分钟实现了网站的暗黑主题切换

Guoyuh78 發表於 2023-3-29 22:04:18

我搭建了一个ChatGPT 网页可以直接用   ailiao.wang

Guoyuh78 發表於 2023-3-29 22:07:57

好的我的经常掉线

頁: [1]

琼殿技术论坛's Archiver

利用chatgpt5分钟实现了网站的暗黑主题切换功能