1.七彩背景開關
<style>
.box {
width: 100%;
height: 700px;
}
button {
border: none;
font-size: 16px;
color: #000;
border: 1px solid #ccc;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="box">
<button class="status">開關</button>
<button class="red">red</button>
<button class="orange">orange</button>
<button class="yellow">yellow</button>
<button class="green">green</button>
<button class="cyan">cyan</button>
<button class="blue">blue</button>
<button class="purple">purple</button>
</div>
<script>
// 綁定事件
var box = document.querySelector('.box');
var statu = document.querySelector('.status');
var flag = 0;
statu.onclick = function() {
if (flag === 0) {
box.style.backgroundColor = '#000';
flag = 1
} else {
box.style.backgroundColor = '#000';
flag = 0;
}
}
var box = document.querySelector('.box');
var red = document.querySelector('.red');
// var flag = 0;
red.onclick = function() {
box.style.backgroundColor = 'red';
}
var box = document.querySelector('.box');
var orange = document.querySelector('.orange');
// var flag = 0;
orange.onclick = function() {
box.style.backgroundColor = 'orange';
}
var box = document.querySelector('.box');
var yel = document.querySelector('.yellow');
// var flag = 0;
yel.onclick = function() {
box.style.backgroundColor = 'yellow';
}
var box = document.querySelector('.box');
var gre = document.querySelector('.green');
// var flag = 0;
gre.onclick = function() {
box.style.backgroundColor = 'green';
}
var box = document.querySelector('.box');
var cyan = document.querySelector('.cyan');
// var flag = 0;
cyan.onclick = function() {
box.style.backgroundColor = 'cyan';
}
var box = document.querySelector('.box');
var blue = document.querySelector('.blue');
// var flag = 0;
blue.onclick = function() {
box.style.backgroundColor = 'skyblue';
}
var box = document.querySelector('.box');
var pur = document.querySelector('.purple');
// var flag = 0;
pur.onclick = function() {
box.style.backgroundColor = 'purple';
}
</script>
2.切換背景圖
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
background: url(images/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/kobe1.jpg"></li>
<li><img src="images/k2.jpg"></li>
<li><img src="images/k3.jpg"></li>
<li><img src="images/k4.jpg"></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>