1頁面重繪時默認顯示一種主題
2用戶點擊主題更換按鈕，顯示主題選擇頁面
3用戶打開主題選擇頁面后，若選中主題背景后點擊確定，則將主題背景更換，并隱藏主題選擇面板
4用戶打開選擇界面后，若選點擊取消，則不可對主題背景做任何修改，并隱藏主題選擇面板
uj5u.com熱心網友回復：
<body>
<div onclick="Theme()">主題</div>
<div class="theme-list" id="themes">
<form name="themeForm">
<input type="radio" name="theme" value="https://bbs.csdn.net/topics/red">red</input><br><br>
<input type="radio" name="theme" value="https://bbs.csdn.net/topics/yellow">yellow</input><br><br>
<input type="radio" name="theme" value="https://bbs.csdn.net/topics/green">green</input><br><br>
<input type="radio" name="theme" value="">none</input><br><br>
<input type="button" value="https://bbs.csdn.net/topics/確定" onclick="setTheme()">
<input type="button" value="https://bbs.csdn.net/topics/取消" onclick="Theme()">
</form>
</div>
</body>
<style>
.theme-list {
display: none;
}
</style>
<script>
let themeEl = document.getElementById('themes')
let themeV = document.themeForm.theme
if (localStorage.theme) {
themeV.value = localStorage.theme
setTheme('init')
}
function Theme () {
if (themeEl.style.display == 'none' || !themeEl.style.display) {
themeEl.style.display = 'block'
} else {
themeEl.style.display = 'none'
}
}
function setTheme (type) {
document.body.style.background = themeV.value
localStorage.theme = themeV.value
if (!type) {
Theme()
}
}
</script>
背景要換圖片可以改radio的value 用class名然后樣式里面用background配置背景圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/129825.html
標籤：JavaScript
下一篇：vue ui