22日分享内容

Collapsing World

已于 2023-09-25 19:14:38 修改

阅读量1.2k

点赞数

文章标签： javascript 前端开发语言

于 2023-09-25 19:02:34 首次发布

本文链接：https://blog.csdn.net/qq_64926847/article/details/133278690

版权

1.大纲

2.正则表达式案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
<script>
// 网易邮箱的规则
// 规则：字母开头，数字字母下划线组成，6~18位
// - 表示 到 的意思 3-6
// \ 表示转义
// var reg = /^[a-zA-Z]\w{5,17}@(163|126)\.com$/
// var str = 'zhaotianyin1@163.com'
// console.log( reg.test(str) );

// qq号规则
// 规则：不能用0开头，5~10位任意数字
// var reg = /^[1-9]\d{4,9}$/
// var reg = /^[1-9]\d{4,9}@qq\.com$/


// 手机号正则
// 规则：1开头，第二个数字3-9，其余9个数字是任意的
// var reg = /^1[3-9]\d{9}$/

// 提取字符串中所有的中文姓名
// var str = "张三：1000，李四：50000，王五：800。";
// [\u4e00-\u9fa5] 任意一个汉字
// var reg = /[\u4e00-\u9fa5]{2,}/g
// console.log( str.match(reg) );
// console.log( reg.exec(str) );
// console.log( reg.exec(str) );
// console.log( reg.exec(str) );
// console.log( reg.exec(str) );

// ^ 放在[]中就表示取反的意思
// var reg = /[^ab]/ // 非a和b
// var str = 'ab4'
// console.log(reg.exec(str));
</script>
</html>

3.轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .carousel{
            width: 600px;
            height: 300px;
            border: 3px solid #f00;
            margin: 50px auto;
            position: relative;
        }
        ul,ol{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul li a img{
            width: 600px;
            height: 300px;
        }
        ul li{
            display: none;
        }
        ul li.active{
            display: block;
        }
        ol{
            width: 60px;
            height: 20px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255,255,255,.3);
            border-radius: 10px;
        }
        ol li{
            width: 10px;
            height: 10px;
            background-color: #000;
            border-radius: 50%;
            margin: 5px;
            float: left;
        }
        ol li.active{
            background-color: #f00;
        }
        .carousel>a{
            text-decoration: none;
            color: #fff;
            position: absolute;
            width: 20px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: rgba(0,0,0,0.6);
            font-weight: bold;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .carousel>a.leftBtn{
            left: 0;
        }
        .carousel>a.rightBtn{
            right: 0;
        }
    </style>
</head>
<body>
<div class="carousel">
    <ul>
        <li class="active">
            <a href="">
                <img src="./images/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/3.jpg" alt="">
            </a>
        </li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <a href="" class="leftBtn">&lt;</a>
    <a href="" class="rightBtn">&gt;</a>
</div>
</body>
<script>
// 任何轮播图都是根据下标进行切换的
let index = 0 // 定义当前正在显示的图片所在li的下标
// 获取标签
const carousel = document.querySelector('.carousel')
const ulis = document.querySelectorAll('ul li')
const olis = document.querySelectorAll('ol li')
const leftBtn = document.querySelector('.carousel>a.leftBtn')
const rightBtn = document.querySelector('.carousel>a.rightBtn')
// 轮播图书写从右箭头开始
rightBtn.onclick = function() {
    // 切换下标
    index++
    // 限制最大值
    if (index === ulis.length) {
        index = 0
    }
    // 让所有li都去掉active类名
    for (let a = 0; a < ulis.length; a++) {
        ulis[a].className = ''
    }
    // 让index下标对应的图片显示 - 给li添加active类名
    ulis[index].className = 'active'

    // 让所有li都去掉active类名
    for (let a = 0; a < olis.length; a++) {
        olis[a].className = ''
    }
    // 让index下标对应的图片显示 - 给li添加active类名
    olis[index].className = 'active'
    // 阻止a标签的默认行为
    return false
}

// 轮播图书写从右箭头开始
leftBtn.onclick = function() {
    // 切换下标
    index--
    // 限制最大值
    if (index < 0) {
        index = ulis.length - 1
    }
    // 让所有li都去掉active类名
    for (let a = 0; a < ulis.length; a++) {
        ulis[a].className = ''
    }
    // 让index下标对应的图片显示 - 给li添加active类名
    ulis[index].className = 'active'

    // 让所有li都去掉active类名
    for (let a = 0; a < olis.length; a++) {
        olis[a].className = ''
    }
    // 让index下标对应的图片显示 - 给li添加active类名
    olis[index].className = 'active'
    // 阻止a标签的默认行为
    return false
}

// 小圆点点击
// 遍历所有小圆点li
for (let i = 0; i < olis.length; i++) {
    olis[i].onclick = function() {
        index = i
        // 让所有li都去掉active类名
        for (let a = 0; a < ulis.length; a++) {
            ulis[a].className = ''
        }
        // 让index下标对应的图片显示 - 给li添加active类名
        ulis[index].className = 'active'

        // 让所有li都去掉active类名
        for (let a = 0; a < olis.length; a++) {
            olis[a].className = ''
        }
        // 让index下标对应的图片显示 - 给li添加active类名
        olis[index].className = 'active'
    }
}

// 自动轮播
let timer = setInterval(() => {
    // 切换下标
    index++
    // 限制最大值
    if (index === ulis.length) {
        index = 0
    }
    // 让所有li都去掉active类名
    for (let a = 0; a < ulis.length; a++) {
        ulis[a].className = ''
    }
    // 让index下标对应的图片显示 - 给li添加active类名
    ulis[index].className = 'active'

    // 让所有li都去掉active类名
    for (let a = 0; a < olis.length; a++) {
        olis[a].className = ''
    }
    // 让index下标对应的图片显示 - 给li添加active类名
    olis[index].className = 'active'
}, 1000)

// 移入停止
carousel.onmouseover = e => clearInterval(timer)
// 移出继续自动轮播
carousel.onmouseout = e => {
    timer = setInterval(() => {
        // 切换下标
        index++
        // 限制最大值
        if (index === ulis.length) {
            index = 0
        }
        // 让所有li都去掉active类名
        for (let a = 0; a < ulis.length; a++) {
            ulis[a].className = ''
        }
        // 让index下标对应的图片显示 - 给li添加active类名
        ulis[index].className = 'active'

        // 让所有li都去掉active类名
        for (let a = 0; a < olis.length; a++) {
            olis[a].className = ''
        }
        // 让index下标对应的图片显示 - 给li添加active类名
        olis[index].className = 'active'
    }, 1000)
}
</script>
</html>

4.tab切换汇总

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        .tab{
            width: 600px;
            height: 300px;
            border: 3px solid #000;
            margin: 50px auto;
        }
        ul,ol{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ol li img{
            width: 600px;
            height: 250px;
        }
        ul{
            height: 50px;
            background-color: pink;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        ul li{
            width: 100px;
            height: 30px;
            background-color: #fff;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        ol li{
            display: none;
        }
        ol li.active{
            display: block;
        }
        ul li.on{
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
<!-- 
    布局：上面3个按钮，下面3个图片
    效果：点击每个按钮，就在下面显示对应的图片
-->
<div class="tab">
    <ul>
        <li class="on">图片一</li>
        <li>图片二</li>
        <li>图片三</li>
    </ul>
    <ol>
        <li class="active">
            <img src="./images/1.jpg" alt="">
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
        </li>
    </ol>
</div>
</body>
<script>
// 获取标签
var ulis = document.querySelectorAll('ul li')
var olis = document.querySelectorAll('ol li')
/********************* 将下标存储在标签的属性中 **************************/
// // 给所有ul下li添加事件
// for (var a = 0; a < ulis.length; a++) {
//     // 将每个li的下标存储在标签的属性中
//     ulis[a].setAttribute('index', a)
//     ulis[a].onclick = function() {
//         // 让所有li去掉on类名
//         for (var b = 0; b < ulis.length; b++) {
//             ulis[b].className = ''
//         }
//         // 当前li添加on类名
//         this.className = 'on'
//         // 将所有li的active类名去掉
//         for (var b = 0; b < olis.length; b++) {
//             olis[b].className = ''
//         }
//         // 找到当前li的下标
//         var index = this.getAttribute('index')
//         // 给下标对应的li设置active类名
//         olis[index].className = 'active'
//     }
// }
/********************* 给标签对象添加属性 ********************/
// 给所有ul下li添加事件
// for (var a = 0; a < ulis.length; a++) {
//     // 将每个li的下标存储在标签的属性中
//     ulis[a].index = a
//     ulis[a].onclick = function() {
//         // 让所有li去掉on类名
//         for (var b = 0; b < ulis.length; b++) {
//             ulis[b].className = ''
//         }
//         // 当前li添加on类名
//         this.className = 'on'
//         // 将所有li的active类名去掉
//         for (var b = 0; b < olis.length; b++) {
//             olis[b].className = ''
//         }
//         // 找到当前li的下标
//         var index = this.index
//         // 给下标对应的li设置active类名
//         olis[index].className = 'active'
//     }
// }

// var t = document.querySelector('.tab')
// console.log(t);
// console.log(typeof t); // object
// // dom标签都是对象，只不过我们输出的时候以标签的形式展示的
// // 要看到标签对象的形式，使用console.dir输出
// // console.dir(t)
// 根据对象的语法，可以给他添加属性
// t.index = 666
// 访问对象的属性
// console.log(t.index);

/***** 使用自调用函数给事件嵌套一层作用域，让循环中的变量可以在事件函数中使用 ****/
// 给所有ul下li添加事件
// for (var a = 0; a < ulis.length; a++) {
//     (function(a) {
//         ulis[a].onclick = function() {
//             // 让所有li去掉on类名
//             for (var b = 0; b < ulis.length; b++) {
//                 ulis[b].className = ''
//             }
//             // 当前li添加on类名
//             this.className = 'on'
//             // 将所有li的active类名去掉
//             for (var b = 0; b < olis.length; b++) {
//                 olis[b].className = ''
//             }
//             // 找到当前li的下标
//             var index = a
//             // 给下标对应的li设置active类名
//             olis[index].className = 'active'
//         }
//     })(a)
// }

/********** 使用es6的let，让循环的变量可以在事件函数中使用 **********/
// for (let a = 0; a < ulis.length; a++) {
//     ulis[a].onclick = function() {
//         // 让所有li去掉on类名
//         for (var b = 0; b < ulis.length; b++) {
//             ulis[b].className = ''
//         }
//         // 当前li添加on类名
//         this.className = 'on'
//         // 将所有li的active类名去掉
//         for (var b = 0; b < olis.length; b++) {
//             olis[b].className = ''
//         }
//         // 找到当前li的下标
//         var index = a
//         // 给下标对应的li设置active类名
//         olis[index].className = 'active'
//     }
// }

/********** 每次点击让带有类名的标签去掉类名 ************/
// for (let a = 0; a < ulis.length; a++) {
//     ulis[a].onclick = function() {
//         // 让带有on类名的标签去掉on类名
//         document.querySelector('ul li.on').className = ''
//         // 当前li添加on类名
//         this.className = 'on'
//         // 将所有li的active类名去掉
//         document.querySelector('ol li.active').className = ''
//         // 找到当前li的下标
//         var index = a
//         // 给下标对应的li设置active类名
//         olis[index].className = 'active'
//     }
// }

// var onLi = document.querySelector('ul li.on')
// var activeLi = document.querySelector('ol li.active')
// for (let a = 0; a < ulis.length; a++) {
//     ulis[a].onclick = function() {
//         // 让带有on类名的标签去掉on类名
//         onLi.className = ''
//         // 当前li添加on类名
//         this.className = 'on'
//         // 将带有on类名的li赋值给onLi变量
//         onLi = this

//         // 将所有li的active类名去掉
//         activeLi.className = ''
//         // 找到当前li的下标
//         var index = a
//         // 给下标对应的li设置active类名
//         olis[index].className = 'active'
//         activeLi = olis[index]
//     }
// }
</script>
</html>