亚洲日韩中文字幕久热_青青草国产_四虎网站最新网址_亚洲色欲或者高潮影院_亚洲极色_99福利片_和搜子居同的日子hd高清看_国产精品久久久久7777按摩_啪啪国产视频_黄色www._色六月婷婷亚洲婷婷六月_亚洲成在人线在线播放无码_免费黄色亚洲_日产精品卡二卡三卡四卡乱码视频_欧美亚洲色帝国_国产二区免费视频_国产做a爰片久久毛片a片白丝_巨骚综合_无遮挡国产高潮视频免费观看_午夜精品久久久久9999高清

Discuz! 官方交流社區(qū)

標(biāo)題: 利用chatgpt5分鐘實現(xiàn)了網(wǎng)站的暗黑主題切換功能 [打印本頁]

作者: qzuser1212 時間: 2023-3-26 23:51
標(biāo)題: 利用chatgpt5分鐘實現(xiàn)了網(wǎng)站的暗黑主題切換功能
本帖最后由 qzuser1212 于 2023-3-27 00:04 編輯

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

先上效果圖，還不是很完美，有些細(xì)節(jié)還需要優(yōu)化
效果圖

(, 下載次數(shù): 102) (, 下載次數(shù): 144) (, 下載次數(shù): 133) (, 下載次數(shù): 149) (, 下載次數(shù): 111) (, 下載次數(shù): 81)

提問

如何快速讓網(wǎng)頁支持暗黑模式
怎么實現(xiàn)切換呢
可以弄好看一點么
怎么保存用戶選擇是否啟用暗黑模式
可以把check換成兩個圖標(biāo)切換么樣式更美觀一些
用了你的代碼提示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>

復(fù)制代碼

應(yīng)用到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圖標(biāo)，一般放在common/header.htm里
2、<style>...</style>代碼是切換主題圖標(biāo)的css，放common/extend_common.css里
3、<button id="dark-mode-toggle">...</button>是切換主題圖標(biāo)的代碼，放到你想顯示的位置，我是放到common/header.htm導(dǎo)航欄的右側(cè)
4、<script>...</script>是用來切換主題、圖標(biāo)及保存用戶選擇的主題的代碼，放到common/footer.htm里的</body>之前，最后一個問題就是因為我放到了header導(dǎo)致了錯誤，ai糾正了我
[/hide]

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

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

作者: s77 時間: 2023-3-27 15:06
學(xué)習(xí)學(xué)習(xí)。

作者: 小花 時間: 2023-3-27 16:30
謝謝謝謝謝尋尋

作者: 276397082 時間: 2023-3-27 21:06
提示: 作者被禁止或刪除內(nèi)容自動屏蔽

作者: gulaibai 時間: 2023-3-27 22:06
以后都不會有站長了

作者: yezirui 時間: 2023-3-29 02:35
感謝分享

作者: Guoyuh78 時間: 2023-3-29 22:04
利用chatgpt5分鐘實現(xiàn)了網(wǎng)站的暗黑主題切換

作者: Guoyuh78 時間: 2023-3-29 22:07
我搭建了一個ChatGPT 網(wǎng)頁可以直接用 ailiao.wang

作者: 276397082 時間: 2023-3-30 16:06
提示: 作者被禁止或刪除內(nèi)容自動屏蔽

作者: qzuser1212 時間: 2023-3-30 19:28

Guoyuh78 發(fā)表于 2023-3-29 22:07
我搭建了一個ChatGPT 網(wǎng)頁可以直接用 ailiao.wang

好的我的經(jīng)常掉線

作者: Jugaad 時間: 2023-3-31 12:13
下載試用一下，如果用著不錯就給樓主頂貼！

作者: 影子江湖 時間: 2023-4-1 19:37
謝謝分享

作者: 276397082 時間: 2023-4-1 22:38
提示: 作者被禁止或刪除內(nèi)容自動屏蔽

歡迎光臨 Discuz! 官方交流社區(qū) (http://www.letianbiye.cn/)