尝试从数组中随机 select 一个 class 并应用于 body （JS NOOB）

Question

点击颜色范围后尝试随机 select 颜色类，然后将其应用到 body，不确定如何随机化或使用 math.random() 在数组 selection 上，每次点击应用一个新的彩色主题。

// Select the element
var body = document.querySelector('body');

// Array of color Classes
var classColorArray = ['tan-red', 'orange-green', 'deep-green-orange'];

// Apply the new classes
var cl = body.classList;

document.querySelector('span.reverse').addEventListener('click', (e) => {
  body.className = ''; // Clear
  cl.add('reverse'); // Add
});
document.querySelector('span.default').addEventListener('click', (e) => {
  body.className = ''; // Clear
});
document.querySelector('span.color').addEventListener('click', (e) => {
  body.className = ''; // Clear
  cl.add.apply(cl, classColorArray);
});

h1 {
  font-family: helvetica;
}

.color-selector {
  display: flex;
  margin-bottom: 15px;
}

.color-selector span {
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
}

.color-selector span.reverse {
  background: #080808;
}

.color-selector span.default {
  border: 1px solid #080808;
  box-sizing: border-box;
}

.color-selector span.color {
  background: rgb(0, 16, 255);
  background: -moz-linear-gradient(135deg, rgba(0, 16, 255, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(230, 242, 77, 1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(0, 16, 255, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(230, 242, 77, 1) 100%);
  background: linear-gradient(135deg, rgba(0, 16, 255, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(230, 242, 77, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0010ff", endColorstr="#e6f24d", GradientType=1);
}

.color-selector span:hover {
  cursor: pointer;
}

body.tan-red {
  color: rgb(239, 232, 216);
  background-color: rgb(255, 69, 82);
}

body.orange-green {
  color: rgb(255, 81, 0);
  background-color: rgb(179, 225, 41);
}

body.deep-green-orange {
  background-color: rgb(252, 108, 17);
  color: rgb(30, 59, 52);
}

body.reverse {
  color: #FFFDFA;
  background: #080808;
}

body.reverse .color-selector span.reverse {
  border: 1px solid #FFFDFA;
  box-sizing: border-box;
}

body.reverse .color-selector span.default {
  background: #FFFDFA;
  border: 0;
}

<body>
  <div class="color-selector">
    <span class="default"></span>
    <span class="reverse"></span>
    <span class="color"></span>
  </div>
  <h1>Testing This Thing</h1>
  <p>lorem ispum dolor sit amet</p>
</body>

点击颜色范围后尝试随机 select 颜色类然后将其应用于 body，不确定如何随机化数组 selection 并按点击应用。

测试站点位于： http://alexcoven.com/type/

<script type="text/javascript">
    // Select the element
    var body = document.querySelector('body');

    // Array of color Classes
    var classColorArray = ['tan-red', 'orange-green', 'deep-green-orange'];

    // Apply the new classes
    var cl = body.classList;

    document.querySelector('span.reverse').addEventListener('click', (e) => {
        body.className = ''; // Clear
        cl.add('reverse'); // Add
          event.preventDefault();
    });
    document.querySelector('span.default').addEventListener('click', (e) => {
        body.className = ''; // Clear
          event.preventDefault();
    });
    document.querySelector('span.color').addEventListener('click', (e) => {
        body.className = ''; // Clear
        cl.add.apply(cl, classColorArray);
          event.preventDefault();
    });
</script>

Answer 1

解决这个问题的关键概念是：

请参阅下面的内嵌评论，了解如何进行这项工作。

// Select the body element
var body = document.querySelector('body');

// Array of color Classes
var classColorArray = ['tan-red', 'orange-green', 'deep-green-orange'];

// Just set up one event handler at the document level.
// Any clicks within the document will trigger events
// that "bubble" up the DOM and be handled here.
// This is a better approach than setting up 3 event handlers
// that all basically do the same thing.
document.addEventListener("click", e => {

  // Check to see if the event was triggered by one of the spans
  // that we care about. Instead of each span having a different
  // class, they all that the same one, so we'll know which ones
  // we care about. The event (e) in this case .target is a 
  // reference to the element that originated the event.
  if(e.target.classList.contains("colorSpan")){
  
    // We generate a random between 0 and 1 (exclusive) with Math.random()
    // then we multiply that by the length of the array to get a number that 
    // is between 0 and the highest index used in the array. The we 
    // round that down to the nearest whole number with Math.floor()
    let random = Math.floor(Math.random() * classColorArray.length);
    
    // Keep looping as long as the random is the same as what's already in use
    while(body.classList.contains(classColorArray[random])){
      // Random in use already, pick another random and check again
      random = Math.floor(Math.random() * classColorArray.length);
    }
    // Finally have a new color
    // Clear the current styles from the body
    body.classList = "";
    body.classList.add(classColorArray[random]);
  }
});

h1 {
  font-family: helvetica;
}

.color-selector {
  display: flex;
  margin-bottom: 15px;
}

.color-selector span {
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
}

.color-selector span.reverse {
  background: #080808;
}

.color-selector span.default {
  border: 1px solid #080808;
  box-sizing: border-box;
}

.color-selector span.color {
  background: rgb(0, 16, 255);
  background: -moz-linear-gradient(135deg, rgba(0, 16, 255, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(230, 242, 77, 1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(0, 16, 255, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(230, 242, 77, 1) 100%);
  background: linear-gradient(135deg, rgba(0, 16, 255, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(230, 242, 77, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0010ff", endColorstr="#e6f24d", GradientType=1);
}

.color-selector span:hover {
  cursor: pointer;
}

body.tan-red {
  color: rgb(239, 232, 216);
  background-color: rgb(255, 69, 82);
}

body.orange-green {
  color: rgb(255, 81, 0);
  background-color: rgb(179, 225, 41);
}

body.deep-green-orange {
  background-color: rgb(252, 108, 17);
  color: rgb(30, 59, 52);
}

body.reverse {
  color: #FFFDFA;
  background: #080808;
}

body.reverse .color-selector span.reverse {
  border: 1px solid #FFFDFA;
  box-sizing: border-box;
}

body.reverse .color-selector span.default {
  background: #FFFDFA;
  border: 0;
}

<body>
  <div class="color-selector">
    <span class="colorSpan">a</span>
    <span class="colorSpan">b</span>
    <span class="colorSpan">c</span>
  </div>
  <h1>Testing This Thing</h1>
  <p>lorem ispum dolor sit amet</p>
</body>

尝试从数组中随机 select 一个 class 并应用于 body （JS NOOB）

Trying to randomly select an class from an array and apply to body (JS NOOB)

javascript

arrays

random

fonts

colors