15-作业案例

最新推荐文章于 2024-08-13 22:07:58 发布
最新推荐文章于 2024-08-13 22:07:58 发布
阅读量98 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44808878/article/details/114835632
版权

十五.作业案例

  • 自定义多选框

需求：

  1. 当鼠标点击要选择的选项框，即勾选上，也可以取消；
  2. 点击全选按钮，全部勾选上；
  3. 点击反选按钮，取消已勾选的；
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";
      user-select: none;
    }
    #wrap{
      width: 300px;
      padding: 15px 0;
      border: 1px solid #999;
      border-radius: 10px;
      margin: 50px auto;
    }
    #wrap ul li{
      list-style: none;
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: #fff;
      font-size: 14px;
      text-indent: 80px;
      cursor: pointer;
      background: url("./img/ckbg1.jpg") no-repeat 20px center;
    }

    #wrap ul li.checked{
      background-image: url("./img/ckbg2.jpg");
      text-indent: 55px;
    }

    #wrap ul li:nth-child(4n+1){
      background-color: #000;
    }
    #wrap ul li:nth-child(4n+2){
      background-color: #333;
    }
    #wrap ul li:nth-child(4n+3){
      background-color: #666;
    }
    #wrap ul li:nth-child(4n+4){
      background-color: #999;
    }
    #wrap .btn{
      height: 50px;
      line-height: 50px;
    }
    #wrap .btn .all,#wrap .btn .reverse{
      float: left;
      cursor: pointer;
    }
    #wrap .btn .all{
      text-indent: 65px;
      background: url("./img/ckbg1.jpg") no-repeat 35px center;
    }
    #wrap .btn .all.checked{
      background-image: url("./img/ckbg2.jpg");
    }
    #wrap .btn .reverse{
      margin-left: 80px;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <ul>
      <li>薄荷</li>
      <li>皮卡</li>
      <li>bohe</li>
      <li>mint</li>
      <li>pika</li>
      <li>志远</li>
      <li>小希</li>
      <li>伟哥</li>
    </ul>
    <div class="btn">
      <div class="all">全选</div>
      <div class="reverse">反选</div>
    </div>
  </div>
  <script>

    //每一个功能用一个单独的作用域包装起来
    (function(){

      let aLi = document.querySelectorAll("#wrap ul li"),
        oAll = document.querySelector("#wrap .btn .all"),
        oReverse = document.querySelector("#wrap .btn .reverse"),
        len = aLi.length,
        num = 0
      ;

      //检测当前计数器，以决定oAll是否要加名字
      function allName(){
        if (num === len){
          oAll.classList.add("checked");
        }else{
          oAll.classList.remove("checked");
        }
      }

      //li的点击事件
      for (let i=0;i<len;i++){
        aLi[i].onclick = function(){
          //操作自己的名字
          this.classList.toggle("checked");

          //计算计数器
          // num += this.classList.contains("checked")?1:-1;
          if (this.classList.contains("checked")){
            num ++;
          }else{
            num --;
          }

          //执行all名字的修改
          allName();
        };
      }

      //全选按钮的点击
      oAll.onclick = function(){

        //改变自己的名字
        this.classList.toggle("checked");

        //根据当前名字决定所有li的选中状态
        let x = this.classList.contains("checked")?"add":"remove";
        for (let i=0;i<len;i++){
          aLi[i].classList[x]("checked");
        }

        //改变计数器
        num = this.classList.contains("checked")*len;
      };

      //反选按钮的点击、
      oReverse.onclick = function(){
        for (let i=0;i<len;i++){
          aLi[i].classList.toggle("checked");
        }

        //改变num
        num = len - num;

        //检测all的全选状态
        allName();
      };
      
    })();
  </script>
</body>
</html>

img

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PilJB0oR-1615793442172)(C:/Users/%E7%AB%B9%E9%9D%92%E6%9A%AE%E9%9B%A8/AppData/Roaming/Typora/typora-user-images/1590025749082.png)]

  • 选项卡

需求：

  1. 鼠标滑过想要查看的呢容显示对应的页面图片，同时显示选项卡下方的红色下滑线特效
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
  <style>
    body{font-family: "Microsoft YaHei",serif;}
    body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
    ol,ul,li{margin:0;padding:0;list-style:none;}
    img{border:none;}

    #wrap{
      width: 1080px;
      height: 350px;
      margin: 50px auto;
    }

    #wrap .nav{
      position: relative;
      width: 100%;
      height: 40px;
      background-color: #f5f5f5;
      line-height: 40px;
      font-size: 14px;
    }
    #wrap .nav p{
      position: absolute;
      top: 0;
      left: 0;
      width: 130px;
      height: 40px;
      background-color: #000;
      color: #fff;
      text-align: center;
    }
    #wrap .nav ul{
      box-sizing: border-box;
      width: 100%;
      padding-left: 200px;
    }
    #wrap .nav ul li{
      position: relative;
      float: left;
      margin-right: 32px;
      cursor: pointer;
      transition: color .3s;
    }
    #wrap .nav ul li:hover{
      color: #db3a45;
    }
    #wrap .nav ul li::after{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      content: "";
      width: 0%;
      height: 2px;
      margin: auto;
      background-color: #db3a45;
      transition: width .3s;
    }
    #wrap .nav ul li.active::after{
      width: 100%;
    }
    #wrap .content{
      width: 100%;
      height: 255px;
      margin-top: 20px;
    }
    #wrap .content>ul{
      position: relative;
      width: 100%;
      height: 100%;
    }
    #wrap .content>ul li.first{
      display: none;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #wrap .content>ul li.first.show{
      display: block;
    }
    #wrap .content>ul li.first ul{
      width: 150%;
    }
    #wrap .content>ul li.first ul li{
      float: left;
      width: 340px;
      height: 255px;
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div class="nav">
      <p class="title">独家精品策划</p>
      <ul>
        <li class="active">全部</li>
        <li>列表一6666</li>
        <li>列表二5254</li>
        <li>列表三000</li>
        <li>列表四333</li>
      </ul>
    </div>

    <div class="content">
      <ul>
        <li class="first show">
          <ul>
            <li class="second"><img src="img2/1.jpg" alt=""></li>
            <li class="second"><img src="img2/2.jpg" alt=""></li>
            <li class="second"><img src="img2/3.jpg" alt=""></li>
          </ul>
        </li>
        <li class="first">
          <ul>
            <li class="second"><img src="img2/4.jpg" alt=""></li>
            <li class="second"><img src="img2/5.jpg" alt=""></li>
            <li class="second"><img src="img2/6.jpg" alt=""></li>
          </ul>
        </li>
        <li class="first">
          <ul>
            <li class="second"><img src="img2/7.jpg" alt=""></li>
            <li class="second"><img src="img2/8.jpg" alt=""></li>
            <li class="second"><img src="img2/9.jpg" alt=""></li>
          </ul>
        </li>
        <li class="first">
          <ul>
            <li class="second"><img src="img2/10.jpg" alt=""></li>
            <li class="second"><img src="img2/11.jpg" alt=""></li>
            <li class="second"><img src="img2/12.jpg" alt=""></li>
          </ul>
        </li>
        <li class="first">
          <ul>
            <li class="second"><img src="img2/3.jpg" alt=""></li>
            <li class="second"><img src="img2/10.jpg" alt=""></li>
            <li class="second"><img src="img2/4.jpg" alt=""></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <script>
    (function(){

      let aNavLi = document.querySelectorAll(".nav ul li"),
        len = aNavLi.length,
        aContentLi = document.querySelectorAll(".content ul li.first")
      ;

      for (let i=0;i<len;i++){
        aNavLi[i].onmouseenter = function(){

          for (let j=0;j<len;j++){
            aNavLi[j].classList.remove("active");
            aContentLi[j].classList.remove("show");
          }

          this.classList.add("active");
          aContentLi[i].classList.add("show");
        };
      }


    })();
  </script>
</body>
</html>
1590026252723

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QYilEdQK-1615793442176)(C:/Users/%E7%AB%B9%E9%9D%92%E6%9A%AE%E9%9B%A8/AppData/Roaming/Typora/typora-user-images/1590026286397.png)]

  • 全选与反选-皮卡版
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选与反选</title>
</head>
<body>
<input id="btn1" type="button" value="全选"/>
<input id="btn2" type="button" value="不选"/>
<input id="btn3" type="button" value="反选"/>
<div id="div1">
    <input type="checkbox"/>人生若只如初见<br>
    <input type="checkbox"/>何事秋风悲画扇<br>
    <input type="checkbox"/>等闲变却故人心<br>
    <input type="checkbox"/>却道故人心易变<br>
    <input type="checkbox"/>骊山语罢清宵半<br>
    <input type="checkbox"/>泪雨霖铃终不怨<br>
    <input type="checkbox"/>何如薄幸锦衣郎<br>
    <input type="checkbox"/>比翼连枝当日愿<br>

</div>

<script>
	function pika() {
		let oBtn1 = document.getElementById('btn1'),
			oBtn2 = document.getElementById('btn2'),
			oBtn3 = document.getElementById('btn3'),
			oDiv = document.getElementById('div1'),
			aCh = oDiv.getElementsByTagName('input');

		oBtn1.onclick = function () {
			for (let i = 0; i < aCh.length; i++) {
				aCh[i].checked = true;
			}
		};

		oBtn2.onclick = function () {
			for (let i = 0; i < aCh.length; i++) {
				aCh[i].checked = false;
			}
		};

		oBtn3.onclick = function () {
			for (let i = 0; i < aCh.length; i++) {
				if (aCh[i].checked == true) {
					aCh[i].checked = false
				} else {
					aCh[i].checked = true;
				}

			}
		}
	}

	pika();
</script>

</body>
</html>
  • 鼠标过相对应的图片-皮卡版
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过显示对应的图片</title>
    <style>
       *{
           margin: 0;
           padding: 0;
           list-style: none;
       }

        img {
            border: none;
        }

        #wrap {
            width: 1080px;
            height: 350px;
            margin: 50px auto;
        }

        #wrap .nav {
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #f5f5f5;
            line-height: 40px;
            font-size: 14px;
        }

        #wrap .nav p {
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 40px;
            background-color: #000;
            color: #fff;
            text-align: center;
        }

        #wrap .nav ul {
            box-sizing: border-box;
            width: 100%;
            padding-left: 200px;
        }

        #wrap .nav ul li {
            position: relative;
            float: left;
            margin-right: 32px;
            cursor: pointer;
            transition: color .3s;
        }

        #wrap .nav ul li:hover {
            color: #db3a45;
        }

        #wrap .nav ul li::after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            content: "";
            width: 0%;
            height: 2px;
            margin: auto;
            background-color: #db3a45;
            transition: width .3s;
        }

        #wrap .nav ul li.active::after {
            width: 100%;
        }

        #wrap .content {
            width: 100%;
            height: 255px;
            margin-top: 20px;
        }

        #wrap .content > ul {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #wrap .content > ul li.first {
            display: none;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #wrap .content > ul li.first.show {
            display: block;
        }

        #wrap .content > ul li.first ul {
            width: 150%;
        }

        #wrap .content > ul li.first ul li {
            float: left;
            width: 340px;
            height: 255px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="nav">
        <p class="title">独家精品策划</p>
        <ul>
            <li class="active">全部</li>
            <li>列表一</li>
            <li>列表二</li>
            <li>列表三</li>
            <li>列表四</li>
        </ul>
    </div>

    <div class="content">
        <ul>
            <li class="first show">
                <ul>
                    <li class="second"><img src="images/1.jpg" alt=""></li>
                    <li class="second"><img src="images/2.jpg" alt=""></li>
                    <li class="second"><img src="images/3.jpg" alt=""></li>
                </ul>
            </li>
            <li class="first">
                <ul>
                    <li class="second"><img src="images/4.jpg" alt=""></li>
                    <li class="second"><img src="images/5.jpg" alt=""></li>
                    <li class="second"><img src="images/6.jpg" alt=""></li>
                </ul>
            </li>
            <li class="first">
                <ul>
                    <li class="second"><img src="images/7.jpg" alt=""></li>
                    <li class="second"><img src="images/8.jpg" alt=""></li>
                    <li class="second"><img src="images/9.jpg" alt=""></li>
                </ul>
            </li>
            <li class="first">
                <ul>
                    <li class="second"><img src="images/10.jpg" alt=""></li>
                    <li class="second"><img src="images/11.jpg" alt=""></li>
                    <li class="second"><img src="images/12.jpg" alt=""></li>
                </ul>
            </li>
            <li class="first">
                <ul>
                    <li class="second"><img src="images/13.jpg" alt=""></li>
                    <li class="second"><img src="images/14.jpg" alt=""></li>
                    <li class="second"><img src="images/15.jpg" alt=""></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<script>
	let Afirst=document.querySelectorAll('.content>ul>li');
	let Alist=document.querySelectorAll('.nav li');
	for (let i = 0; i < Alist.length; i++) {
		Alist[i].onmouseenter=function(){
			for (let j = 0; j < Alist.length; j++) {
				Alist[j].classList.remove('active');
			}
			for (let j = 0; j < Afirst.length; j++) {
				Afirst[j].classList.remove('show');
			}
			Alist[i].classList.add('active');
			Afirst[i].classList.add('show');
		}
	}
</script>
</body>
</html>
皮卡卡卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scratch编程项目源代码文件案例素材-作业大作战.zip
05-16
这个名为“作业大作战”的压缩包文件提供了一个完整的Scratch编程项目案例，旨在通过游戏的形式激发孩子们的兴趣，让他们在玩乐中学习编程。 源代码文件“作业大作战.sb2”是Scratch项目的原始文件，使用的是 ...
4-2案例操作要求.docx
11-08
- 在空白行下方，输入“语音提示”作为标题，设置字体为楷体，字号15磅，加粗。 - 其他文本保持楷体，字号13磅。 - 文本拼音的对齐方式设为“1-2-1”，偏移量2磅，字体依然为楷体，字号9磅。 - 编号格式按照“...
起重机坠江事故-事故案例-案例分析-淹溺事故.docx
02-12
### 起重机坠江事故案例分析与安全管理要点 #### 一、事故概况与特点 2008年某月某日，在一次桥梁施工过程中发生了一起起重机坠江的重大安全事故。该事故发生在起重作业阶段，事故类型为溺水伤害，主要原因为违章...
桫哥-GOlang基础-15作业与练习
06-12
在本资源中，“桫哥-GOlang基础-15作业与练习”是一个关于Go语言学习的教程，旨在帮助初学者从零开始掌握Go语言的基础知识，并通过一系列的作业和练习来提升技能。教程分为基础部分和进阶部分，旨在不仅教授语法，还...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 478
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 633
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 145
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
Electron学习与总结
song854601134的博客
08-12 175
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
【vue教程】五. Vue 的路由管理
最新发布
前端探索者
08-13 634
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 416
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 652
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Ajax使用说明】Ajax、Axios以及跨域
aaaa_aaab的博客
08-12 781
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 463
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 429
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 230
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1709
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 916
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 304
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
ps作业案例20个步骤
05-12
15. 局部特效：根据作业要求，添加形状特效、模糊滤镜、浮动图层和调整层等动态效果。 16. 增加细节：利用数码涂鸦、马赛克效果、亮度噪音效果等的小细节加强单张效果的效果。 17. 编辑剪辑：将各个细节处理完之后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值