2024年这些前端案例看似很简单（内附动图）_前端经验案例(1)，前端开发面试解答之Handler

2401_84436058

于 2024-05-15 17:55:11 发布

阅读量246

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84436058/article/details/138917584

版权

程序员专栏收录该内容

167 篇文章 0 订阅

订阅专栏

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在这里插入图片描述

🍂🍂🍂1.代码🍂🍂🍂

<!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>
 button{
 border-radius: 10%;
 background-color:skyblue;
 }
 </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
 //排他思想
 var btn = document.querySelectorAll('button');
 for (var i=0;i<btn.length;i++){
 // 为每一个按钮注册事件
 btn[i].onclick = function(){
 //点击后添加背景色之前，清除之前以点击过的样式（干掉所有人）
 for (var i=0;i<btn.length;i++){
 btn[i].style.backgroundColor = '';
 }
 // 留下我自己
 this.style.backgroundColor = 'pink';
 }
 }
 </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃

请添加图片描述

🐋案例-换肤效果

分析：为列表框的图片循环注册事件就行，点击列表框的图片改变body的backgroundImage的属性值url就行。

🍂🍂🍂1.代码🍂🍂🍂

<!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;
 }
 li{
 list-style: none;
 }
 body{
 background:url('img/201.jpg') no-repeat;
 background-size: cover;
 }
 .box{
 overflow: hidden; /\*清除浮动\*/
 width: 410px;
 background-color: #fff;
 margin-top: 100px;
 margin-left: 70%;
 padding:3px 0;
 }
 .box li{
 float:left;
 width: 100px; 
 margin: 0 1px; 
 }
 img{
 width: 100%;
 vertical-align: bottom; /\*li盒子是图片按比例撑高的，图片和盒子下边默认是基线对齐，有间隙\*/
 }
 </style>
</head>
<body>
    <ul class="box">
        <li><img src="img/201.jpg" alt=""></li>
        <li><img src="img/202.jpg" alt=""></li>
        <li><img src="img/203.jpg" alt=""></li>
        <li><img src="img/204.jpg" alt=""></li>
    </ul>
    <script>
 // js实现换肤效果 循环注册事件就行，用不到排他思想
 var imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');
 for (var i=0;i<imgs.length;i++){
 imgs[i].onclick = function(){
 var arr = this.src.split('/');
 imgUrl = arr[arr.length-2] + '/' + arr[arr.length-1]; //切割链接为 img/\*\*\*.jpg
 document.body.style.backgroundImage = 'url(' + imgUrl + ')';
 }
 }
 </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃
请添加图片描述

🐋案例-表格隔行变色

分析：这个案例我们完全可以用css中的:hover实现而且非常简单，这里我们练一下js,同样的还是循环注册事件，当鼠标滑动到对应的行时，将该行的class属性改为带有背景色的bg,当鼠标滑出该行时，去除掉该行的class属性就行。

🍂🍂🍂1.代码🍂🍂🍂

<!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{
 border: 1px solid #999;
 border-collapse: collapse;
 text-align: center;
 margin: 0 auto;
 }
 th,td{
 border-bottom: 1px solid #999;
 padding: 5px;
 }
 .bg{
 background-color: #87ceeb8c;
 }
 </style>
</head>
<body>
    <table>
        <thead>
            <tr class="bg">
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0001</td>
                <td>公司1</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>公司2</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>公司3</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>公司4</td>
                <td>1075</td>
                <td>1086</td>
                <td>1023</td>
            </tr>
        </tbody>
    <table>
    <script>
 //表格隔行变色
 var trs = document.querySelector('tbody').getElementsByTagName('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>

🍃🍃🍃2.动图演示🍃🍃🍃
请添加图片描述

🐋案例-表单全选与取消全选（重要）

分析：这个案例十分重要，相比上面的案例来说也有点复杂，大概思路就是：
1.表单的全选,取消全选：做法就是循环让下面的复选框的checked属性跟随总复选框即可
2.为下面的小复选框注册事件：当全部选中时，总复选框也选中，当其中有一个没有选中时，复选框取消选中。

🍂🍂🍂1.代码🍂🍂🍂

<!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{
 border-collapse: collapse;
 text-align: center;
 margin: 100px auto;
 border: 1px solid #999;
 }
 thead th{
 background-color: #87ceeb8c;
 }
 th,td{
 border: 1px solid #999;
 padding: 0 10px;
 }
 </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="chAll"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>


### 最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。



不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4ca185a40a4f6eac37de401831294f15.jpeg#pic_center)  

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/22cc597411613c6c713ecbdff247e2b6.jpeg#pic_center)



![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ac182effbdb5915dfbd908d9ae101ff2.jpeg#pic_center)

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/550659059749365655787c6c04beb595.jpeg#pic_center)