❤ js玩法小集合

林太白

已于 2023-12-22 17:45:18 修改

阅读量624

点赞数 11

于 2023-12-08 17:16:36 首次发布

林太白

本文链接：https://blog.csdn.net/weixin_43615570/article/details/134882295

版权

SQL|Linux|数据结构|服务器|PHP|Java 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Javascript基础

9 篇文章 0 订阅

订阅专栏

❤ js玩法小集合

1、js原生实现轮播图

利用function函数封装和for循环遍历来写轮播图

先来看看H5部分

1、html 结构部分如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
</head>
<body>

</body>
</html>

body里面写入样式结构：
1、结构部分

最外面定义主容器banner

<div class="banner"></div>

里面写入存放图片最大容器banner-con 和放置轮播图片的容器 ul
图片可以自己随便找图写（这里我找了颜色直接放上去）

<div class="banner-con">
     // 图片列表
    <ul>
      // 每个li之中1个图
        <li><img src="./img/11.png" id=list alt=""></li>
        <li><img src="./img/12.png" id=list alt=""></li> 
        <li><img src="./img/13.png" id=list alt=""></li>
        <li><img src="./img/14.png" id=list alt=""></li>
        <li><img src="./img/15.jpg" id=list alt=""></li>
    </ul>
</div>

里面无序存放图片容器ol，active类名控制【目的就是为了实现选中效果】

   <ol>
      <li id=11 class="active"></li>
      <li id=12></li>
      <li id=13></li>
      <li id=14></li>
      <li id=15></li>
  </ol>

左箭头和右箭头切换左右页

<div class="left-arrow show"> < </div> 
<div class="box"></div>
<div class="right-arrow show"> > </div>
<div class="box"></div>

完整html


<div class="banner">
    <div class="banner-con">
            <ul>
                <li>
                    <img src="./img/11.png" id=list alt="">
                </li>
                <li>
                    <img src="./img/12.png" id=list alt="">
                </li>
                <li>
                    <img src="./img/13.png" id=list alt="">
                </li>
                <li>
                    <img src="./img/14.png" id=list alt="">
                </li>
                <li>
                    <img src="./img/15.jpg" id=list alt="">
                </li>
            </ul>
            <ol>
                <li id=11 class="active"></li>
                <li id=12></li>
                <li id=13></li>
                <li id=14></li>
                <li id=15></li>
            </ol>
            <div class="left-arrow show">
                < </div> <div class="box">
            </div>
            <div class="right-arrow show">
                > </div>
            <div class="box">
            </div>
    </div>
</div>

2、css 样式部分如下：

重置一下样式[去掉margin和padding]

* {
      margin: 0;
      padding: 0;
}

定义外容器的宽和高

.banner {
      margin-top: 100px;
      width: 100%;
      height: 480px;
      background: rgba(144, 196, 254, 0.8);
      position: relative;
  }

定义内容器的宽和高

 .banner-con {
      width: 890px;
      margin: auto;
      position: relative;
      list-style: none;
  }
  .banner-con img {
      top: 0;
      left: 0;
       position: absolute;
      height: 100%;
      width: 890px;
      height: 480px;
      /* transform: 1s linear ; */
      /* xiaoguo */
  }

  ul {
      list-style: none;
  }

  ol {
      list-style: none;
      position: absolute;
      height: 15px;
      width: 240px;
       left: 50%;
      margin-left: -120px;
      margin-top: 400px;
      text-decoration: none;
  }
  ol li {
      background-color: #fffFFF80;
      width: 30px;
      height: 10px;
      float: left;
      margin-left: 15px;
      line-height: 15px;
      color: white;
  }
  ol li:hover {
      background-color: orange;
  }

左箭头右箭头样式

  .left-arrow {
      position: absolute;
      /* position: relative; */
      background-color: #00000040;
      width: 20px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      left: 0;
      top: 190px;
      color: white;
      border-radius: 5px;
  }
  .right-arrow {
      position: absolute;
      background-color: #00000040;
      width: 20px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      right: 0;
      top: 190px;
      color: white;
      border-radius: 5px;
  }
  .active {
      background-color: yellow;
  }

完整css

* {
      margin: 0;
      padding: 0;
  } 
  .banner {
      margin-top: 100px;
      width: 100%;
      height: 480px;
      background: rgba(144, 196, 254, 0.8);
      position: relative;
  }
  .banner-con {
      width: 890px;
      margin: auto;
      position: relative;
      list-style: none;
  }
  .banner-con img {
      top: 0;
      left: 0;
       position: absolute;
      height: 100%;
      width: 890px;
      height: 480px;
      /* transform: 1s linear ; */
      /* xiaoguo */
  }

  ul {
      list-style: none;
  }

  ol {
      list-style: none;
      position: absolute;
      height: 15px;
      width: 240px;
       left: 50%;
      margin-left: -120px;
      margin-top: 400px;
      text-decoration: none;
  }
  ol li {
      background-color: #fffFFF80;
      width: 30px;
      height: 10px;
      float: left;
      margin-left: 15px;
      line-height: 15px;
      color: white;
  }
  ol li:hover {
      background-color: orange;
  }
  .left-arrow {
      position: absolute;
      /* position: relative; */
      background-color: #00000040;
      width: 20px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      left: 0;
      top: 190px;
      color: white;
      border-radius: 5px;
  }
  .right-arrow {
      position: absolute;
      background-color: #00000040;
      width: 20px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      right: 0;
      top: 190px;
      color: white;
      border-radius: 5px;
  }
  .active {
      background-color: yellow;
  }

3、js逻辑部分如下：

定义js加载函数

    window.onload = function () {}

函数内部方法逻辑过程

//页面加载
//1.获取所有的图片列表
//2.默认第一张
// 设置默认下表为0
//3.每隔两秒切换图片
// 切换当前图片下标记
//4.让当前下表对应的图片显示
// 让其他图片消失
//5.由于图片走到第五章以后会报错,需要临界值进行判断
// 淡入淡出效果 Transform
//6. 切换我们的图片对应的背景颜色
// 放到一个数组里面，背景颜色对应图片
//7.图片切换的时候切换背景颜色
//8.获取整个banner事件
//9.给banner设置鼠标移入，停止定时器
//10.鼠标移出，计需定时器
//11.获取所有的图片
// 点击右箭头和默认定时器一致
//12点击左键头，下标-1，临界值判断，小于第一张的时候自动跳转
//13.默认第一个轮播点高亮显示
//14.获取轮播点，图片切换的时候轮播点也跟着切换
//15 给每一个轮播点设置点击事件，
//16.点击哪个轮播点，轮播点高亮，其他取消高亮，
//17.当前轮播点对应的图片显示，其他图片消失

完整js如下

 window.onload = function() {
        var imgs = document.querySelectorAll(".banner> .banner-con > ul > li"); //获取所有图片小容器
        var banner = document.querySelector(".banner") //获渠banner背景色
        var color = ['rgba(217, 217, 217,0.2)', 'rgba(217, 217, 217,0.4)', 'rgba(217, 217, 217,0.6)', 'rgba(217, 217, 217,0.8)', 'rgba(217, 217, 217,1)']; //自定义五个颜色   
        var piece = document.querySelectorAll("ol > li"); //获取轮播点
        var leftrow = document.querySelector(".left-arrow"); //左箭头
        var rightrow = document.querySelector(".right-arrow"); //右箭头
        var index = 0; //下标设置为0
        //图片移动函数封装
        function move() {
            index++;
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.opacity = 0; //图片全部隐藏
                piece[i].classList.remove("active") //清除所有的轮播点
                if (index == 5) {
                    index = 0; //图片返回到开头
                }
                imgs[index].style.opacity = 1; //让当前下标对应的图片显示
                banner.style.background = color[index]; //改变最大的背景色
                piece[index].classList.add("active"); // 添加当前轮播点的颜色高亮
            }
        }
        //左键头
        function move1() {
            index--;
            for (var j = 0; j < imgs.length; j++) { //循环次数
                imgs[j].style.opacity = 0;
                piece[index].classList.remove("active"); //移除所有的高亮
            }
            if (index < 0) {
                index = imgs.length - 1;
            }
            //让当前下表对应的图片显示
            imgs[index].style.opacity = 1;
            banner.style.background = color[index];
            piece[index].classList.add("active"); //给所有的轮播点添加色块
        }

        function move2() {
            //右键头
            index++;
            for (var j = 0; j < imgs.length; j++) {
                imgs[j].style.opacity = 0;
                if (index > imgs.length - 1) {
                    index = 0;
                }
            }
            //让当前下表对应的图片显示
            imgs[index].style.opacity = 1;
            banner.style.background = color[index];
        }

        var t = setInterval(move, 2000);
        // 鼠标移入 清除定时器
        banner.onmouseover = function() {
            clearInterval(t);
        }
        //鼠标移出 开始定时器
        banner.onmouseout = function() {
            t = setInterval(move, 2000);
        }
        //左右鼠标点击事件
        leftrow.onclick = function() {
            move1();
        }
        rightrow.onclick = function() {
            move2();
        }
        //轮播点移入移出             
        for (var k = 0; k < piece.length; k++) { //轮播点循环次数
            piece[k].setAttribute("name", k); //设置下标
            piece[k].onclick = function() { //小轮播点的点击事件
                var int = this.getAttribute("name"); //获取当前下标
                for (var m = 0; m < imgs.length; m++) {
                    imgs[m].style.opacity = 0; //图片显示消失 
                    piece[m].classList.remove("active"); //移除色块的高亮
                }
                imgs[int].style.opacity = 1;
                piece[int].classList.add("active");
                banner.background = color[int];
            }
        }}

完整资源链接地址：

链接

2、鼠标拖拽（利用事件监听和事件对象完成色块的随意移动）

HTML之中写一个小色块

 <div class="box">11111</div>

写好box的style样式方面

  .box {
     width: 200px;
       height: 200px;
       background-color: black;
       position: absolute;
   }

实现js效果部分

 var box = document.body.firstElementChild;
    //1.获取父元素下面的第一个子元素，利用DOM对象下的第一个子元素
   //2. 直接获取
var  box=document.querryselector(".box");
//按下事件时开始监听在文档之中鼠标移动的事件
        box.onmousedown = function (e1) {   //按下事件
              document.onmousemove = function (e) {   //按下之后移动鼠标事件
              box.style.left = e.clientX-e1.offsetX + "px";   
              //box的宽度变成了点击地方宽度-盒子宽度
                box.style.top = e.clientY -e1.offsetY + "px";
                //box的高度变成了点击地方高度-盒子高度度
            }
            //  当释放按键时候，删除鼠标移动时间和删除鼠标施放事件
            document.onmouseup = function (e) {  //按键松开事件
                document.onmousemove = null;    //释放按键移动值
                document.onmouseup = null;      //释放按键松开值
            }
}

在这里插入图片描述
鼠标可以随意拖拽

3、事件流的捕获和冒泡

认识

事件流
是指事件在捕获的过程之中按照一定的顺序进行传播的传播方式
分为捕获型事件流和冒泡型事件流

事件的三个阶段

   - 处于捕获阶段
   - 目标阶段
   - 冒泡阶段

可以通过事件对象之中的event.enentPhase来判断当前元素处于什么阶段：

捕获型事件：像捕鱼一样（从大到小）

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <title>事件的捕获流练习</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
          background-color: teal;
            border-radius: 50%;
        }
        .inner{
            width: 150px;
            height: 150px;
            background: orange;
            border-radius: 50%;
            float: left;
            margin: 75px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner"></div>
    </div>
    <script>

        var inner=document.querySelector('.inner');
        var box=document.querySelector('.box');


        inner.addEventListener('click',function(event){
            alert("小");
        },true);  //冒泡阶段 从大到小
        box.addEventListener('click',function(event){
            alert("大");          //true冒泡，从外层的BOX到里面的inner
        },true);
    </script>
</body>
</html>w

冒泡型事件：像鱼吐泡泡一样（从小到大）

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <title>冒泡流事件</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background:teal;
            border-radius: 50%;
           
        }
        ul{
            width: 300px;
            height: 300px;
            background: pink;
           
            margin: auto;
            border-radius: 50%;
           

        }
        li{
            width: 50px;
            height: 50px;
            background: lightpink;
             list-style-type: none;
            border-radius: 50%;
           
        }
    </style>
</head>
<!-- //冒泡阶段依次为：div→body→html→document→window （由小到大）； -->
<body οnclick="test(event,'我是body标签')">


    <div class="box" οnclick="test(event,'我是div标签')">
        <ul οnclick="test(event,'我是ul标签')">
            <li οnclick="test(event,'我是li标签')">001</li>
            <li οnclick="test(event,'我是li标签')">002</li>
            <li οnclick="test(event,'我是li标签')">003</li>
        </ul>
    </div>
    <script>
        function test(event,aa){
            alert(aa);
        }     
    </script>     
    //显示结果会从小到大的顺序来显示出来，类似鱼的泡泡 
</body>
</html>

4、JavaScript-递归函数

认识递归函数

递归就是一个函数直接或间接地调用自身，是为直接或间接递归。

案列

一到5的阶乘

  function fn(num){
   if(num==1){return 1}
   	else{
   		return num*fn(num-1)
   	}
   }
  var result=fn(5);
  console.log(num);

1到10相加

 ///函数加减
        // function add(n) {

        //     if (n === 1) { // 当n==1时值为1
        //         return 1;
        //     } else {  //不为1，调用函数
        //         return add(n - 1) + n; //add（n）=add(n-1)+n;
        //     }
        // }
        // var result = add(10); // 将add为10的值赋值给result;
        // console.log(result);

斐波那锲数列

 num = 0;
 function beibo(num) {
       if (num == 1 || num == 2) {
           return 1;
       } else {
           num = beibo(num - 1) + beibo(num - 2)
           return num;
       }
   }
 var result=beibo(20);
 console.log(result);

5、数字加减

实现简单的计数

css部分

<style>
        .text {
            width: 200px;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            border-radius: 5px;
            text-align: center;
            float: left;
        }

        button {
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 22px;
            text-decoration: none;
            margin: 0 10px;
            color: #fff;
            position: relative;
            display: inline-block;
            background-color: #55acee;
            box-shadow: 0px 5px 0px 0px #3C93D5;
            border: none 0;
            float: left;
        }

        button:active {
            transform: translate(0px, 5px);
            box-shadow: 0px 1px 0px 0px;
            outline: none 0;
        }
    </style>

HTML部分

 <div id="demo">
        <button @click="num++">+</button>
        <div class="text">{{num}}</div>
        <button @click="{num--}">-</button>
</div>

Script 部分首先引入Vue

    <script src="../vue.js"></script>

VUE使用

<script type="text/javascript">
        var vm = new Vue({
            el: '#demo',
            data: {
                num: 0,
            },
            methods: {}
        })
 </script>