十六进制值

十六进制值

关注
发信
关注(28)粉丝(399)

javascript - 为什么不能将标题背景设置为十六进制值？

因此，最初我想在单击导航按钮之一时将标题背景设置为红色两秒钟。现在，我想每次单击导航按钮将其更改为随机颜色两秒钟。所以我创建了一个随机的十六进制值。但是当我尝试使用

header.style.background = hexColor;

它行不通吗？

header.style.background = 'red';

这将起作用，或者如果hexColor ='red'将起作用。我什至可以登录hexColor并查看hex值。怎么了



const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links a'));
const header = document.querySelector('header');


for (var i = 0; i < navLinks.length; i++) {
	navLinks[i].addEventListener('click', changeColor);
}

for (var i = 0; i < linksArray.length; i++) {
	linksArray[i].addEventListener('click', shuffle);
}

function changeColor() {
	let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
	let hexColor = '#';

	for(let i = 0; i <= 6; i++) {
		let random = Math.floor(Math.random()*hexArray.length);
		hexColor += hexArray[random];
	}

	header.style.background = hexColor;

	setTimeout(function() {
		header.style.backgroundImage = 'url(img/canada.jpeg)';
	}, 2000);
}

function shuffle() { //  Fisher-Yates shuffle algorithm
  for (let i = linksArray.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
    [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; // swap elements
  }
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Verdana';
	box-sizing: border-box;
	color: #63889b;
}

/** {
	outline: 1px solid red;
}*/

/*------NAV-----*/

nav {
	display: flex;
	justify-content: space-between;
	font-size: 1.8rem;
	padding: 25px 0;
	position: fixed;
	background-color: #fff;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.brand, .nav-links {
	display: flex;
	align-items: center;
}

.brand {
	margin-left: 6%;
}

.logo {
	max-width: 70px;
	max-height: 45px;
	margin-right: 25px;
}

.nav-links {
	position: relative;
	margin-right: 6%;
}

.nav-links .link {
	text-transform: uppercase;
	margin-right: 20px;
	cursor: pointer;
	transition: all .2s ease;
}

.nav-links .link:hover {
	color: #014263;
}

/*-----HEADER-----*/

header {
	margin-top: 92px;
	background-image: url(img/canada.jpeg);
	/*background-position: center;
	background-size: cover;*/
	padding-top: 7%;
	padding-bottom: 25%;
}

.header-info {
	color: #fff;
	font-size: 1.5rem;
	width: 26%;
	background-color: rgba(0,0,0,0.6);
	padding: 25px 0 25px 55px;
	margin-left: 10%;
}

header p {
	margin: 8px;
}


/*-----MAIN-----*/

main {
	display: flex;
	background-color: #fff;

}

.col {
	flex-basis: 33.33%;
	padding: 50px 0;
}

.col p {
	width: 65%;
	font-size: 1.25rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.col img {
	display: block;
	margin: 0 auto;
}

.col-3 img {
	width: 280px;
	height: 155px;
}

.col-3 img, .col-3 h3, .col-3 p {
	position: relative;
	top: -8px;
}

.col-2 img, .col-2 h3, .col-2 p {
	position: relative;
	top: 30px;
}

.col-1 {
	margin-left: 7%;
}

.col-3 {
	margin-right: 7%;
}

h3 {
	text-align: center;
}

/*------FOOTER-----*/

footer {
	font-family: 'Helvetica';
	background-color: #63889b;
	display: flex;
	justify-content: space-between;
	color: #fff;
	padding-bottom: 30px;
}

.internal-links {
	padding-left: 20%;
	font-size: 1.5rem;
}

a {
	text-decoration: none;
	margin:2px 0;
	color: #fff;
	cursor: pointer;
}

.internal-links h4 {
	text-decoration: underline;
	text-align: center;
	margin-bottom: 8px;
	margin-top: 30PX;
	color: #fff;
}

.links {
	font-size: 1.2rem;
	display: flex;
	flex-direction: column;
}

.form-wrap {
	padding-top: 30px;
	display: flex;
	align-items: flex-end;
	flex-basis: 50%;
}

form {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	width: 80%;
}

input {
	border: none;
	outline: none;
	font-size: 1.6rem;
}

label {
	font-size: 1.3rem;
	padding: 3px 0;
}

button {
	margin-top: 20px;
	border: 1px solid #fff;
	width: 50%;
	font-size: 1.3rem;
	background-color: #1090d1;
	align-self: flex-end;
	color: #fff;
	padding: 4px 30px;
}

body {
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Chapman Automotive Skills Assessment</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<nav>
		<div class="brand">
		<img src="img/Logo.png" alt="logo" class="logo">
		<div class="comp-name">CHAPMAN</div>
		</div>

		<div class="nav-links">
			<div class="link">Home</div>
			<div class="link">Sales</div>
			<div class="link">Blog</div>
			<div class="link">Login</div>
		</div>
	</nav>
	<header>
		<div class="header-info">
			<p>We are a company that does stuff.</p>
			<p>Car and web stuff.</p>
		</div>
	</header>
	<main>
		<div class="col col-1">
			<img src="img/car1.jpg" alt="car1">

			<h3>Some Header</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
		</div>

		<div class="col col-2">
			<img src="img/car2.jpg" alt="car2">

			<h3>More Stuff</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
		</div>

		<div class="col col-3">
			<img src="img/car3.jpg" alt="car3">

			<h3>Last Column</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
		</div>
	</main>
	<footer id="footer">
		<div class="internal-links">
			<h4>Internal Links</h4>

			<div class="links">
				<a href="#footer">Page One</a>
				<a href="#footer">Another Page</a>
				<a href="#footer">Sales Page</a>
				<a href="#footer">Page Three</a>
				<a href="#footer">Keep Going</a>
				<a href="#footer">Last One</a>
				<a href="#footer">Just Kidding</a>
			</div>
		</div>

		<div class="form-wrap">
			<form>
				<label for="Name">Name</label>
				<input type="text" id="Name">
				<label for="Name">Address</label>
				<input type="text" id="Address">
				<label for="Name">City</label>
				<input type="text" id="City">

				<button type="submit">Submit Form</button>
				</form>

				<div class="dialog-wrap">
					<dialog close>
						<div class="name-field">Name:<span class="name">Seth</span></div>
						<div class="name-field">Address:<span class="address">1013 N Arvada</span></div>
						<div class="name-field">City:<span class="city">Mesa</span></div>
					</dialog>
				</div>
	</footer>
	<script src="script.js"></script>
</body>
</html>

最佳答案

在您的更改颜色函数中，您有一个for循环，该循环在添加7个值后停止。

将for循环更改为i 


const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links a'));
const header = document.querySelector('header');


for (var i = 0; i < navLinks.length; i++) {
	navLinks[i].addEventListener('click', changeColor);
}

for (var i = 0; i < linksArray.length; i++) {
	linksArray[i].addEventListener('click', shuffle);
}

function changeColor() {
	let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
	let hexColor = '#';

	for(let i = 0; i <= 5; i++) {
		let random = Math.floor(Math.random()*hexArray.length);
		hexColor += hexArray[random];
	}

	header.style.background = hexColor;

	setTimeout(function() {
		header.style.backgroundImage = 'url(img/canada.jpeg)';
	}, 2000);
}

function shuffle() { //  Fisher-Yates shuffle algorithm
  for (let i = linksArray.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
    [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; // swap elements
  }
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Verdana';
	box-sizing: border-box;
	color: #63889b;
}

/** {
	outline: 1px solid red;
}*/

/*------NAV-----*/

nav {
	display: flex;
	justify-content: space-between;
	font-size: 1.8rem;
	padding: 25px 0;
	position: fixed;
	background-color: #fff;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.brand, .nav-links {
	display: flex;
	align-items: center;
}

.brand {
	margin-left: 6%;
}

.logo {
	max-width: 70px;
	max-height: 45px;
	margin-right: 25px;
}

.nav-links {
	position: relative;
	margin-right: 6%;
}

.nav-links .link {
	text-transform: uppercase;
	margin-right: 20px;
	cursor: pointer;
	transition: all .2s ease;
}

.nav-links .link:hover {
	color: #014263;
}

/*-----HEADER-----*/

header {
	margin-top: 92px;
	background-image: url(img/canada.jpeg);
	/*background-position: center;
	background-size: cover;*/
	padding-top: 7%;
	padding-bottom: 25%;
}

.header-info {
	color: #fff;
	font-size: 1.5rem;
	width: 26%;
	background-color: rgba(0,0,0,0.6);
	padding: 25px 0 25px 55px;
	margin-left: 10%;
}

header p {
	margin: 8px;
}


/*-----MAIN-----*/

main {
	display: flex;
	background-color: #fff;

}

.col {
	flex-basis: 33.33%;
	padding: 50px 0;
}

.col p {
	width: 65%;
	font-size: 1.25rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.col img {
	display: block;
	margin: 0 auto;
}

.col-3 img {
	width: 280px;
	height: 155px;
}

.col-3 img, .col-3 h3, .col-3 p {
	position: relative;
	top: -8px;
}

.col-2 img, .col-2 h3, .col-2 p {
	position: relative;
	top: 30px;
}

.col-1 {
	margin-left: 7%;
}

.col-3 {
	margin-right: 7%;
}

h3 {
	text-align: center;
}

/*------FOOTER-----*/

footer {
	font-family: 'Helvetica';
	background-color: #63889b;
	display: flex;
	justify-content: space-between;
	color: #fff;
	padding-bottom: 30px;
}

.internal-links {
	padding-left: 20%;
	font-size: 1.5rem;
}

a {
	text-decoration: none;
	margin:2px 0;
	color: #fff;
	cursor: pointer;
}

.internal-links h4 {
	text-decoration: underline;
	text-align: center;
	margin-bottom: 8px;
	margin-top: 30PX;
	color: #fff;
}

.links {
	font-size: 1.2rem;
	display: flex;
	flex-direction: column;
}

.form-wrap {
	padding-top: 30px;
	display: flex;
	align-items: flex-end;
	flex-basis: 50%;
}

form {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	width: 80%;
}

input {
	border: none;
	outline: none;
	font-size: 1.6rem;
}

label {
	font-size: 1.3rem;
	padding: 3px 0;
}

button {
	margin-top: 20px;
	border: 1px solid #fff;
	width: 50%;
	font-size: 1.3rem;
	background-color: #1090d1;
	align-self: flex-end;
	color: #fff;
	padding: 4px 30px;
}

body {
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Chapman Automotive Skills Assessment</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<nav>
		<div class="brand">
		<img src="img/Logo.png" alt="logo" class="logo">
		<div class="comp-name">CHAPMAN</div>
		</div>

		<div class="nav-links">
			<div class="link">Home</div>
			<div class="link">Sales</div>
			<div class="link">Blog</div>
			<div class="link">Login</div>
		</div>
	</nav>
	<header>
		<div class="header-info">
			<p>We are a company that does stuff.</p>
			<p>Car and web stuff.</p>
		</div>
	</header>
	<main>
		<div class="col col-1">
			<img src="img/car1.jpg" alt="car1">

			<h3>Some Header</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
		</div>

		<div class="col col-2">
			<img src="img/car2.jpg" alt="car2">

			<h3>More Stuff</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
		</div>

		<div class="col col-3">
			<img src="img/car3.jpg" alt="car3">

			<h3>Last Column</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
		</div>
	</main>
	<footer id="footer">
		<div class="internal-links">
			<h4>Internal Links</h4>

			<div class="links">
				<a href="#footer">Page One</a>
				<a href="#footer">Another Page</a>
				<a href="#footer">Sales Page</a>
				<a href="#footer">Page Three</a>
				<a href="#footer">Keep Going</a>
				<a href="#footer">Last One</a>
				<a href="#footer">Just Kidding</a>
			</div>
		</div>

		<div class="form-wrap">
			<form>
				<label for="Name">Name</label>
				<input type="text" id="Name">
				<label for="Name">Address</label>
				<input type="text" id="Address">
				<label for="Name">City</label>
				<input type="text" id="City">

				<button type="submit">Submit Form</button>
				</form>

				<div class="dialog-wrap">
					<dialog close>
						<div class="name-field">Name:<span class="name">Seth</span></div>
						<div class="name-field">Address:<span class="address">1013 N Arvada</span></div>
						<div class="name-field">City:<span class="city">Mesa</span></div>
					</dialog>
				</div>
	</footer>
	<script src="script.js"></script>
</body>
</html>

关于javascript - 为什么不能将标题背景设置为十六进制值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56503205/

10-13 01:55
Powered by LMLPHP ©2024 十六进制值 0.030609