1页面刷新时默认显示一种主题
2用户点击主题更换按钮,显示主题选择页面
3用户打开主题选择页面后,若选中主题背景后点击确定,则将主题背景更换,并隐藏主题选择面板
4用户打开选择界面后,若选点击取消,则不可对主题背景做任何修改,并隐藏主题选择面板

解决方案 »

  1.   


    <body>
      <div onclick="Theme()">主题</div>
      <div class="theme-list" id="themes">
        <form name="themeForm">
          <input type="radio" name="theme" value="red">red</input><br><br>
          <input type="radio" name="theme" value="yellow">yellow</input><br><br>
          <input type="radio" name="theme" value="green">green</input><br><br>
          <input type="radio" name="theme" value="">none</input><br><br>
          <input type="button" value="确定" onclick="setTheme()">
          <input type="button" value="取消" 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配置背景图