尝试在单击颜色跨度后随机选择一个颜色类，然后将其应用于主体，不确定如何在数组选择中随机化或使用math.random()，并在每次单击时应用新的彩色主题。
// 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>尝试在单击颜色跨度后随机选择一个颜色类，然后将其应用于主体，不确定如何随机化阵列选择并每次单击应用。
测试地点位于：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>
解决这一问题的关键概念是：
- 事件委派和Event.target
- Math.floor((
- Math.random((
.classListAPI
请参阅下面的联机注释，了解如何使其工作。
// 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>