操作例
1 ボタンクリックで色を変更
5 つのボタン、ボタンをクリックすると、背景色がピンクに変わり、他のボタンの色がデフォルトになります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0;i < btns.length ; i++){
btns[i].onclick = function(){
for(var j = 0; j< btns.length;j++){
btns[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>
2 スキンチェンジ効果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
body{
background: url(D:/image/img1.jpg) no-repeat center top;
}
li{
list-style: none;
}
.backChange{
overflow: hidden;
margin:100px auto;
background-color: aquamarine;
width: 410px;
padding-top: 3px;
}
.backChange li{
float: left;
margin: 0 1 px;
cursor: pointer;
}
.backChange img{
/* display:block; */
width: 100px;
margin-left: 1px;
/* height: 56.25px; */
}
</style>
</head>
<body>
<ul class="backChange">
<li><img src="D:\image\img1.jpg" alt=""></li>
<li><img src="D:\image\img2.jpg" alt=""></li>
<li><img src="D:\image\img3.jpg" alt=""></li>
<li><img src="D:\image\img5.jpg" alt=""></li>
<!-- <li><img src="D:\image\img5.jpg" alt=""></li> -->
</ul>
<script>
var imgs = document.querySelector('.backChange').querySelectorAll('img');
for(i = 0;i < imgs.length ;i++){
imgs[i].onclick = function(){
console.log(this.src);
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>
3 フォーム配置カラーチェンジエフェクト
マウスは線を通過すると色が変わり、離れると元の色に戻ります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr{
height: 30px;
background-color: rgb(218, 114, 114);
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #999;
font-size: 12px;
color: rgb(255, 64, 0);
}
.bg{
background-color: rgb(241, 138, 101);
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
<th>成绩</th>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0;i<trs.length;i++){
trs[i].onmouseover = function(){
this.className='bg';
}
trs[i].onmouseout = function(){
this.className='';
}
}
</script>
</body>
</html>
4 フォームのすべてを選択およびすべての選択を解除
要件 1: [すべて選択] ボタン - すべて選択
要件 2: すべての単一ボタンを選択 - 選択されたすべてを選択; 単一ボタンはすべてを選択しない - 選択されていないすべてを選択
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr{
height: 30px;
color: crimson;
background-color: rgb(253, 209, 209);
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #999;
font-size: 12px;
color: rgb(255, 64, 0);
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="cbAll">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="cb">
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPhone</td>
<td>10000</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>ipad</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>apple</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<script>
var cbAll =document.getElementById('cbAll');
var cb=document.getElementById('cb').getElementsByTagName('input');
//要求一:全选-所有选
cbAll.onclick=function(){
console.log(this.checked);
for(var i = 0 ; i < cb.length ; i++){
cb[i].checked = this.checked;
}
}
// 要求二:每一个都选了-全选;有一个没选-全选不选
for(var i = 0 ; i < cb.length ; i++){
cb[i].onclick = function(){
var flag = true;
for(var j = 0 ; j < cb.length ; j++){
if(!cb[j].checked){
flag = false;
break;
}
}
cbAll.checked = flag;
}
}
</script>
</body>
</html>
var flag = true;
for(var j = 0 ; j < cb.length ; j++){
if(!cb[j].checked){
flag = false;
break;
}
}
cbAll.checked = flag;
}
}
</script>
```