网页设计实例学习 | 字节青训营笔记

拿奖去喝AD钙
146 阅读2分钟

👀 这是我参与「第四届青训营 」笔记创作活动的的第9天！

😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻1、百度换肤案例

题目：实现点击图片切换桌面壁纸

分析：

  1. 这个案例练习的是给一组元素注册事件；

  2. 给四个小图片利用循环注册点击事件；

  3. 当我们点击了这个图片，让我们页面背景改为当前图片；

  4. 核心算法：把当前图片的src 路径取过来，给body 作为背景即可。

代码如下：

<!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(./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/1.jpg"></li>
        <li><img src="./images/2.jpg"></li>
        <li><img src="./images/3.jpg"></li>
        <li><img src="./images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
 
        // 2. 循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                // console.log(this.src);  获得当前图片路径
 
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
 
 
 
    </script>
</body>
 
</html>

效果展示

image.png

image.png

动态效果

Screenshot_2022_0817_172527.gif

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻2、表格换色案例

用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout 。

思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色。

注意：

  • 使用新的标签将表头中的行和表格中的行区分 <thead></thead>和<tbody></tbody>

  • 第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行

HTML

<!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>
    <link rel="stylesheet" href="./表格隔行换色.css">
</head>
<body>
    <table class='first' border='1px solid black'>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>想喝AD钙</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047h</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>想喝AD钙</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047h</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>想喝AD钙</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047h</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>想喝AD钙</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047h</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>想喝AD钙</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047h</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>想喝AD钙</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047h</td>
            </tr>
        </tbody>
    </table>
    
</body>
<script src="./表格隔行换色.js"></script>
</html>

CSS

.first{
    border-collapse:collapse;
    margin:100px auto;
    text-align:center;
    width: 700px;
    height: 400px;
    color: rgb(200, 24, 24);
}
.first th{
    color: #000;
    background-color: rgb(125, 136, 221);
    height: 50px;
}
.first tbody{
    height: 50px;
}
.bc{
    background-color: pink;
}

JavaScript

var trs=document.querySelector('tbody').querySelectorAll('tr');
for(var i=0;i<trs.length;i++){
    trs[i].onmouseover=function(){
        this.className='bc';
    }
    trs[i].onmouseout=function(){
        this.className='';
    }
}

效果如下：

image.png

image.png

动态效果

Screenshot_2022_0817_172127.gif

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻3、全选反选+换色案例

案例分析：

全选和取消全选做法： 让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 （ this.checked 可以得到当前复选框的选中状态，如果是true 就是选中，如果是false，就是未选中）

下面复选框需要全部选中，上面全选按钮才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有复选框是否有未选中的，如果有一个未选中的，上面的全选就不选中 （可以设置一个变量来控制全选是否选中）

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./全选反选.css">
</head>
<body>
    <table border="1px soild black" class="first">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tbs">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone9</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone8</td>
                <td>7000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone6</td>
                <td>6000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone5</td>
                <td>5000</td>
            </tr>
        </tbody>

    </table>
</body>
<script src="./全选反选.js"></script>
</html>

CSS

.first{
    border-collapse: collapse;
    margin: 150px auto;
    width: 300px;
    height: 200px;
    text-align: center;
}
.first thead{
    background-color: rgb(79, 112, 183);
    height: 35px;
}
.bg
{
    background-color: pink;
}

JavaScript

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='';
    }
}


var j_cbAll=document.getElementById('j_cbAll');//全选按钮
var j_tbs=document.getElementById('j_tbs').getElementsByTagName('input');//下面的所有复选框
j_cbAll.onclick=function(){
//this.checked 可以得到当前复选框的选中状态，如果是true 就是选中，如果是false，就是未选中
    for(var i=0;i<j_tbs.length;i++)
    {
        j_tbs[i].checked=this.checked;
    }
}

//2. 下面复选框需要全部选中，上面全选按钮才能选中做法：
//给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有复选框是否有未选中的
//如果有一个未选中的，上面的全选就不选中
//可以设置一个变量来控制全选是否选中
for(var i=0;i<j_tbs.length;i++)
{
    j_tbs[i].onclick=function(){
    //flag控制全选按钮是否被选中
        var flag=true;
        //每次点击下面的复选框都要循环检查这4个按钮是否全部被选中
        for(var i=0;i<j_tbs.length;i++)
        {
            if(!j_tbs[i].checked){
                flag=false;//如果下面的按钮有没有选中的，上面的全选按钮就不选择
                break;//退出for循环，提高执行效率，因为只要有一个未选中，剩下的就不用循环判断了
            }
        }
        j_cbAll.checked=flag;//最后，让上面的全选按钮的结果等于flag
    }
}

效果展示

image.png

image.png

image.png

动态效果

Screenshot_2022_0817_173237.gif

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻4、tab 栏切换（重点案例）

当鼠标点击上面相应的选项卡（tab），下面内容跟随变化。

在这里插入图片描述

在这里插入图片描述

案例分析：

（1）Tab 栏切换有2个大的模块。

（2）上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） ，修改类名的方式。

（3）下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

（4）规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。

（5）核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从0开始编号。

（6）当我们点击tab_list里面的某个小 li，让 tab_con 里面对应序号的内容显示，其余隐藏（排他思想）。

代码如下:

<!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>案例：tab栏切换（重点案例）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
    </div>

    <script>
        // 获取元素
        // var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for 循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li设置索引号 
            lis[i].setAttribute('index', i);
            // 2.上面的模块选项卡
            lis[i].onclick = function () {
                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己
                this.className = 'current';

                // 2.下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div隐藏
                for (var j = 0; j < items.length; j++) {
                    items[j].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';

            }
        }
    </script>
</body>

</html>

效果展示：

image.png

image.png

动态效果

Screenshot_2022_0817_174222.gif

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻5、总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今日学习了网页常见的基本布局，学习了css的布局实现，主要学习了如何使用JavaScript来控制页面，使页面成为一个动态效果。这些布局在网页中是常见的，学习这些基本布局可以对我们开发网页有很大的帮助。

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

avatar
文章
阅读
粉丝