JS案例复习-day02

最新推荐文章于 2023-08-03 23:16:25 发布
最新推荐文章于 2023-08-03 23:16:25 发布
阅读量117 收藏
点赞数
分类专栏： JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wingchiehpih/article/details/107450967
版权

JS案例复习-day02

1、仿新浪下拉菜单功能
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style-type: none;
      }

      a {
        text-decoration: none;
        font-size: 14px;
      }

      .nav {
        margin: 100px;
      }

      .nav > li {
        position: relative;
        float: left;
        width: 80px;
        height: 41px;
        text-align: center;
      }

      .nav li a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 41px;
        color: #333;
      }

      .nav > li > a:hover {
        background-color: #eee;
      }

      .nav ul {
        display: none;
        position: absolute;
        top: 41px;
        left: 0;
        width: 100%;
        border-left: 1px solid #fecc5b;
        border-right: 1px solid #fecc5b;
      }

      .nav ul li {
        border-bottom: 1px solid #fecc5b;
      }

      .nav ul li a:hover {
        background-color: #fff5da;
      }
    </style>
  </head>

  <body>
    <ul class="nav">
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
    </ul>
    <script>
      // 1. 获取元素
      var nav = document.querySelector('.nav');
      var lis = nav.children; // 得到4个小li
      // 2.循环注册事件
      for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
          this.children[1].style.display = 'block';
        };
        lis[i].onmouseout = function () {
          this.children[1].style.display = 'none';
        };
      }
    </script>
  </body>
</html>

核心要点：

鼠标经过li时，显示ul，鼠标离开隐藏ul

2、留言板案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        padding: 100px;
      }

      textarea {
        width: 200px;
        height: 100px;
        border: 1px solid pink;
        outline: none;
        resize: none;
      }

      ul {
        margin-top: 50px;
      }

      li {
        width: 300px;
        padding: 5px;
        background-color: rgb(245, 209, 243);
        color: red;
        font-size: 14px;
        margin: 15px 0;
      }

      li a {
        float: right;
      }
    </style>
  </head>

  <body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
      // 1. 获取元素
      var btn = document.querySelector('button');
      var text = document.querySelector('textarea');
      var ul = document.querySelector('ul');
      // 2. 注册事件
      btn.onclick = function () {
        if (text.value == '') {
          alert('您没有输入内容');
          return false;
        } else {
          // console.log(text.value);
          // (1) 创建元素
          var li = document.createElement('li');
          // 先有li 才能赋值
          li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
          // (2) 添加元素
          // ul.appendChild(li);
          ul.insertBefore(li, ul.children[0]);
          // (3) 删除元素 删除的是当前链接的li  它的父亲
          var as = document.querySelectorAll('a');
          for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
              // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
              ul.removeChild(this.parentNode);
            };
          }
        }
      };
    </script>
  </body>
</html>

3、tab栏切换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style-type: 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 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);
        lis[i].onclick = function () {
          // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
          // 干掉所有人 其余的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 i = 0; i < items.length; i++) {
            items[i].style.display = 'none';
          }
          // 留下我自己 让对应的item 显示出来
          items[index].style.display = 'block';
        };
      }
    </script>
  </body>
</html>
wingchiehpih
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS案例复习-day01
wingchiehpih的博客
07-18 116
JS案例复习-day01 1、仿注册页面输入密码判断与显示隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" cont
js day（3）各种小样例
yiyiyixin的博客
07-11 192
一、图片隐藏（点击图片可选择是否显示该图片）    五、滑过被隐藏的图片也仍然显示图片二、模拟相册（点击哪个图片，呈现哪个图片在大屏幕上）    六、滑过哪个图片，呈现哪个图片在大屏幕上    七、点击哪个图片，哪个图片变成背景（如果想让div和浏览器没有距离，要自己设置一下margin，marg默认值不是0.调用body标签可以直接使用document.body）    PS：由于同步异步问题，...
JS day29 操作元素练习
qq_34620296的博客
09-24 95
一.表格隔行变色效果 效果如下: 1.分析: ①.使用 鼠标经过onmouseover 鼠标离开onmouseout ②.鼠标经过tr行,当前的行改变背景颜色,鼠标离开去掉当前背景色 ③.第一行(thead里面的行)不需要变颜色,因此我们获取的是tbody里面的行 2.代码如下 <style> thead{ background-color: ...
day03关于JavaScript 基础的一些小案例整理（多种方法解题）
fightingLKP的博客
04-13 882
案例一：（3种写法）求100以内所有能被3和7整除的数的和； 案例二：把1-100之间所有能够被3和7同时整除的数找出来，计算累加和 案例三：（4种写法）使用for循环打印三角形 案例四：（2种写法）使用for循环，打印99乘法表 案例五：（2种写法）求1-100之间个位数不为3的数的累加和。
JS案例复习-day03
wingchiehpih的博客
07-24 125
JS案例复习-day03 1、跟随鼠标的天天使 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=
vue仿制PHi静态页面--day02
m0_66711291的博客
04-23 1462
是不是放一些二次元小姐姐会好看一点呢
JS进阶-Day2
weixin_56498069的博客
08-03 402
JavaScript进阶：深入对象（构造函数、实例成员、静态成员），内置构造函数（引用类型、包装类型）
JavaScript-day10
最爱谭先森的博客
06-17 138
复习 1、Element类型 --->标签 div、span、h1~h5... 属性 id name href src alt style 只能获取到标签的行内样式 innerHTML 获取或设置一个元素内的html内容，包括行换 ...
高级软件人才培训专家-day02-JavaScript-Vue
最新发布
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
FE21-JS-DAY02-Vendula-Bettina
03-04
【标题】"FE21-JS-DAY02-Vendula-Bettina"是一个课程或者教程的名字，可能指的是一个关于JavaScript编程的第二天课程内容，由Vendula和Bettina两位讲师主讲。这个课程可能重点围绕着JavaScript的核心概念、语法和...
Java基础复习-基本类型day02
12-08
以下是对标题“Java基础复习-基本类型day02”及描述中提及的知识点的详细说明： ### Java基本数据类型 #### 一、基本数据类型（8种） Java中有8种基本数据类型，分为两类：整数类型和浮点数类型。 - **整数类型*...
FME学习之旅-day02
03-06
在"FME学习之旅-day02"的压缩包中，我们主要关注的是FME软件的学习与应用。FME，全称Feature Manipulation Engine，是由Safe Software公司开发的一款强大的数据转换工具，广泛应用于地理空间数据的处理、整合和转换...
FE21-JS-DAY02-Demel-Mauritz
03-04
【标题】"FE21-JS-DAY02-Demel-Mauritz"指的是一个关于JavaScript的培训课程或研讨会，可能由Demel-Mauritz主持，面向FE21（可能是2021年的一个前端工程师培训项目）进行。这个主题暗示我们将深入探讨JavaScript语言...
JSON详解与JSON深拷贝
wingchiehpih的博客
12-12 2745
JSON详解与JSON深拷贝 文章目录JSON详解与JSON深拷贝1、JSON简介2、JSON基本语法3、JSON序列化4、Stringify补充5、Parse补充6、JSON序列化实现深拷贝 1、JSON简介 JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。 JSON的全称是JavaScript Object Notation（JavaScript对象符号），主要应用于JavaScript中，但是目前已经独立于编程语言，在各个编程语言中都可以使用。 目
JS遍历数组中的对象用逗号连接（取出数组中对象的最大值）
wingchiehpih的博客
07-18 2464
1、js遍历数组用逗号连接 var arr = [{ name: 'Tony' }, { name: 'Echo' }]; function getTextByJs() { var str = ''; for (var i = 0; i < arr.length; i++) { str += arr[i].name + ','; } //去掉最后一个逗号(如果不需要去掉，就不用写) if (str.length &gt
前端JS字符串数组数字数组相互转换
wingchiehpih的博客
09-05 1582
字符串数组转化数字数组 let values = ['0', '1', '5', '10', '15', '2']; let valueArr = values.map((item) => { return Number(item); }); console.log(valueArr); //[0, 1, 5, 10, 15] 数字数组转化为字符串数组 let strArr = valueArr.map((item) => { return String(item); }); cons
深拷贝函数
wingchiehpih的博客
12-26 1546
深拷贝函数 1、深拷贝基础 对象赋值的三种方式 引用赋值：指向同一个对象，相互之间会影响； 浅拷贝：浅层的拷贝，内部引入对象时，依然会相互影响； 深拷贝：两个对象不再有任何关系，不会相互影响； 实现深拷贝的方式： 通过JSON序列化 但是会存在bug 对函数、Symbol等无法处理 如果存在对象循环引用，会报错 自定义深拷贝函数 实现深拷贝基本功能 对Symbol的key做处理 对其他数据类型的值进行处理：数组、函数、Symbol、Set、Map 对循环引用做处理 2、基本实现 //
JS实现前端本地Excel表格上传到网页显示并实现反向导出（解决乱码问题）
wingchiehpih的博客
08-29 1308
演示效果 使用到的第三方库： 导入：xlsx.full.min.js 导出：export.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxim
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值