时间戳

首页 > 解决方案 > 使用下拉框更改背景 [JavaScript]

javascript - 使用下拉框更改背景 [JavaScript]

问题描述

我正在尝试制作一个使用下拉框更改背景图像的简单程序。一旦用户做出选择并且后台保存，它会保存一个 cookie，当用户再次加入站点时会记住并使用该 cookie。它应该显示他们最后选择的背景选择。这就是我到目前为止所得到的，但我真的在 cookie 部分苦苦挣扎。你能帮忙吗？

密码笔

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Cookies!</title>
    <link href="cookies.css" rel="stylesheet" />
  </head>
  <body onLoad="setCookie(this.value)">
    <div class="container">
      <h1>User Preferences</h1>
      <div class="test">
        skin description placeholder
      </div>
      <div class="skinSelection">
        <select
          class="skinChoice"
          id="skinChoice"
          name="skinChoice"
          onChange="skinChanged(this.value)"
        >
          <option class="defaultChoice"
            >Choose Your Skin</option
          >
          <option value="water">Water</option>
          <option value="wood">Wood</option>
          <option value="fire">Fire</option>
          <option value="space">Space</option>
        </select>
      </div>
    </div>
    <script>
         const dropDownChoice =
  "document.skinChoice.value";

function setCookie() {
  if (document.cookie != "") {
    dropDownChoice = document.skinChoice.value;
    document.cookie = "dropDownChoice=";
  }
}

function skinChanged(dropDownChoice) {
  if (dropDownChoice == "water") {
    document.body.background =
      "/images/water.jpg";
  } else if (dropDownChoice == "wood") {
    document.body.background = "/images/wood.jpg";
  } else if (dropDownChoice == "fire") {
    document.body.background = "/images/fire.jpg";
  } else if (dropDownChoice == "space") {
    document.body.background =
      "/images/space.jpg";
  }
}
    </script>
  </body>
</html>```

标签： javascripthtml

解决方案

Because it uses localStorage you'll have to run this on your localhost instead of here:

//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
  return x;
}
post = function(url, send, success, context){
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('POST', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(send instanceof FormData){
      x.send(send);
    }
    else{
      const fd = new FormData;
      let s;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' && s)s = JSON.stringify(s);
        fd.append(k, s);
      }
      x.send(fd);
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
aC = function(){
  const a = [].slice.call(arguments);
  a.shift().classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments);
  a.shift().classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments);
  a.shift().classList.toggle(...a);
  return tC;
}
// you can put the following on another page using a load Event - besides the end load
const sets = localStorage.settings ? JSON.parse(localStorage.settings) : {bg:'water'};
const bg_set = I('bg_set');
bg_set.value = sets.bg; aC(bod, sets.bg);
bg_set.onchange = function(){
  rC(bod, 'water', 'wood', 'fire', 'space');
  let v = this.value;
  sets.bg = v; localStorage.settings = JSON.stringify(sets); aC(bod, v);
}
}); // end load
//]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%; background:#ccc;
}
.main{
  padding:10px;
}
body{
  background-size:cover;
}
body.water{
  background-image:url(https://images.pexels.com/photos/734973/pexels-photo-734973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
body.wood{
  background-image:url(https://images.pexels.com/photos/172289/pexels-photo-172289.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
body.fire{
  background-image:url(https://images.pexels.com/photos/57461/fire-burn-hell-warm-57461.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
body.space{
  background-image:url(https://images.pexels.com/photos/1341279/pexels-photo-1341279.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <select id='bg_set'>
      <option value='water'>Water</option>
      <option value='wood'>Wood</option>
      <option value='fire'>Fire</option>
      <option value='space'>Space</option>
    </select>
  </div>
</body>
</html>

推荐阅读