1.1 商品全选
需求：商品全选
1. 全选 ：点击全选按钮,所有复选框都被选中
2. 全不选 ：点击全不选按钮,所有复选框都被取消选中
3. 反选 ： 点击反选按钮,所有复选框状态取反
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品全选</title>
</head>
<body>
<button id="btn1">1. 全选</button>
<button id="btn2">2. 全不选</button>
<button id="btn3">3. 反选</button>
<br />
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked>笔记本
<!--
商品全选
1. 全选 点击全选按钮,所有复选框都被选中
2. 全不选 点击全不选按钮,所有复选框都被取消选中
3. 反选 点击反选按钮,所有复选框状态取反
-->
</body>
<script>
// 1. 全选 点击全选按钮,所有复选框都被选中
document.getElementById("btn1").onclick = function(){
//获取到所有的复选框, 然后添加一个属性checked=true
let inputs = document.getElementsByTagName("input")
for(let item of inputs){
item.checked = true
}
}
//2. 全不选 点击全不选按钮,所有复选框都被取消选中
document.getElementById("btn2").onclick = function(){
//获取到所有的复选框, 然后添加一个属性checked=false
let inputs = document.getElementsByTagName("input")
for(let item of inputs){
item.checked = false
}
}
//3. 反选 点击反选按钮,所有复选框状态取反
document.getElementById("btn3").onclick = function(){
//获取到所有的复选框, 然后修改属性checked取反
let inputs = document.getElementsByTagName("input")
for(let item of inputs){
/*
if(item.checked){
item.checked = false
}else{
item.checked = true
}
*/
item.checked = !item.checked
}
}
</script>
</html>效果图：
1.2 隔行变色
需求：隔行变色
1. 表格奇偶行颜色不同(表头不参与)
2. 鼠标移入颜色高亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔行变色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>11</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script>
// 1. 表格奇偶行颜色不同(表头不参与)
//获取所有的tr(行标签)
let trArr = document.getElementsByTagName("tr")
//循环所有的tr，排除第一行
for (let i = 1; i < trArr.length; i++) {
if (i % 2 == 0) {
trArr[i].style.backgroundColor = "pink";
} else {
trArr[i].style.backgroundColor = "orange";
}
//2. 鼠标移入颜色变亮
//记录原始背景色
let oldColor
//给每一行添加一个鼠标移入 移除事件
trArr[i].onmouseover = function () {
oldColor = this.style.backgroundColor
this.style.backgroundColor = "blue"
}
//鼠标移出颜色恢复
trArr[i].onmouseout = function () {
this.style.backgroundColor = oldColor
}
}
</script>
</html>效果图：
1.3 省市级联
需求：省市级联
1. 页面加载完成后自动装载省数据
2. 当选中省时,装载该省的市数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市级联</title>
</head>
<body>
<select id="provinceId" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">辽宁</option>
<option value="3">天津</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
<option value="0">顺义区</option>
<option value="1">昌平区</option>
<option value="2">朝阳区</option>
</select>
<script type="text/javascript">
// 准备数据
var data = new Array();
data[0] = ['顺义区', '昌平区', '朝阳区'];
data[1] = ["保定", "石家庄", "廊坊"];
data[2] = ["沈阳", "铁岭", "抚顺"];
data[3] = ["滨海新区", "宝坻区", "南开区"];
let provinceSelect = document.getElementById("provinceId");//获取省下拉列表
let citySelect = document.getElementById("cityId");//获取市下拉列表
//1.给select绑定一个onchange事件，当选项发生变化时，执行方法
provinceSelect.onchange = function(){
//2.修改citySelect中所有的option选项
//2.1根据所选的省份的value，获取此省份下的所有地级市或地区
let citys = data[this.value]
//循环所有地级市或地区，拼接option
let ops = "<option>----请-选-择-市----</option>"
for(let i=0;i<citys.length;i++){
ops += "<option>"+citys[i]+"</option>"
}
//2.3将所有option替换到cityId的select下
citySelect.innerHTML = ops
}
</script>
</body>
</html>效果图：
1.4 年会抽奖
需求: 页面刷新,随机抽取一二三等奖,要求获奖人不能重复
<!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>年会抽奖</title>
<style>
.wrapper {
width: 840px;
height: 420px;
background: url(../images/bg01.jpg) no-repeat center / cover;
padding: 100px 250px;
box-sizing: border-box;
}
.wrapper span {
color: #b10e0d;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>年会抽奖</h1>
<h2>一等奖：<span id="one">待开奖</span></h2>
<h3>二等奖：<span id="two">待开奖</span></h3>
<h4>三等奖：<span id="three">待开奖</span></h4>
</div>
<script>
// 需求: 页面刷新,随机抽取一二三等奖,要求获奖人不能重复
const arr = ['波本', '琴酒', '基尔', '伏特加', '白兰地', '爱尔兰']
/*
方法1：
//从arr中随机获取一个
let num1 = Math.floor(Math.random()*arr.length);
let name = arr[num1];
//将内容填写到span中
document.getElementById("one").innerHTML=name
//从数组中删除
arr.splice(num1,1)
//2.生成二等奖
//从arr中随机获取一个
let num2 = Math.floor(Math.random()*arr.length);
name = arr[num2];
//将内容填写到span中
document.getElementById("two").innerHTML=name
//从数组中删除
arr.splice(num2,1)
//3.生成三等奖
//从arr中随机获取一个
let num3 = Math.floor(Math.random()*arr.length);
name = arr[num3];
//将内容填写到span中
document.getElementById("three").innerHTML=name
//从数组中删除
arr.splice(num3,1)
*/
//方法2：简便方法
//生成一等奖
huoj("one")
//生成一等奖
huoj("two")
//生成一等奖
huoj("three")
function huoj(id){
//从arr中随机获取一个
let num = Math.floor(Math.random()*arr.length);
let name = arr[num];
//将内容填写到span中
document.getElementById(id).innerHTML=name
//从数组中删除
arr.splice(num,1)
}
</script>
</body>
</html>
1.5 轮播图
需求：轮播图: 一共5张图片，实现每过2秒中切换一张图片的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img id="myImg" src="../images/L1.jpg" width="500px">
</div>
<script>
//定义一个索引，默认为1
let i=1
let si = setInterval(function(){
if(i>5){
i = 1;//图片复位
}
//更换照片路径
document.getElementById("myImg").src="../images/L"+i+".jpg";
//图片变更
i++;
},2000)
</script>
</body>
</html>
![input[type=checkbox]勾选框自定义样式](https://i-blog.csdnimg.cn/direct/100abf837dd6477d9ff52f0936d0cc33.png)
