day04--js的综合案例

草莓屁屁不酸

于 2024-08-16 21:44:48 发布

阅读量160

点赞数 4

分类专栏： html 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_58478983/article/details/141270382

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>