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

标签 javascript

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

设置它时

header.style.background = hexColor;

不行吗？

header.style.background = 'red';

这会起作用，或者如果 hexColor = 'red' 会起作用。我什至可以记录 hexColor 并查看十六进制值。有什么问题？

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 < 6 或 i <= 5。

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/

上一篇：javascript - 如何在移动浏览器中即时更改网站的默认视口(viewport)设置？

下一篇：javascript - 尝试制作一个可以正确更新价格的工作升级按钮

相关文章：

javascript - super 菜单 - 无法在悬停时选择子元素

javascript - 使用jquery显示ajax响应按钮id

Javascript Math.cos 和 Math.sin 不准确。有什么解决办法吗？

javascript - 在 WebSharper 中的整数类型之间转换

javascript - Node js 使用 request/request api 调用返回的数据

javascript - 如何从异步调用返回响应？

javascript - 从 DOM 闯入表单元素事件

javascript - EqualHeight 不适用于 Ajax

javascript - "Refill"一个数组

javascript - 使用 HTML 和 Phonegap 设置移动应用程序的大小

©2024 IT工具网  联系我们