04 23

73560

已于 2023-04-23 16:54:59 修改

阅读量49

点赞数

文章标签： html javascript 前端

于 2023-04-23 11:02:40 首次发布

本文链接：https://blog.csdn.net/chengj73/article/details/130316397

版权

全选单选按钮

<!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>
    <script src="./jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 100px;
        }

        .content {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <input type="checkbox" class="all">全选
    <div class="content">
        <input type="checkbox" class="single">羽毛球
        <input type="checkbox" class="single">篮球
        <input type="checkbox" class="single">乒乓球
        <input type="checkbox" class="single">足球
        <input type="checkbox" class="single">排球
    </div>

    <!-- js -->
    <!-- <script>
        const all = document.querySelector('.all')
        const btns = document.querySelectorAll('.single')
        // 当所有小按钮的值为true时，将全选框的值设为true
        for (let i = 0; i < btns.length; i++) {
            // 为每个按钮添加一个change事件
            btns[i].addEventListener('change', function () {
                // console.log(btns[i].checked);
                let num = 0
                //change事件发生一次，则循环遍历一次，得到为true的按钮数量
                for (let i = 0; i < btns.length; i++) {
                    if (btns[i].checked) {
                        num++
                    }
                }
                // console.log(num);
                all.checked = (num == btns.length)
            })
        }
        // 点击全选框，让小按钮的值和全选框一致
        all.addEventListener('change', function () {
            flag = all.checked
            // console.log(flag);
            for (let i = 0; i < btns.length; i++) {
                btns[i].checked = flag
            }
        })

    </script> -->

    <script>
        // 全选按钮控制
        $('.all').change(function () {
            $('.single').prop('checked', $(this).prop('checked'))
        })
        // 小按钮控制全选按钮
        $('.single').change(function () {
            if ($('.single:checked').length === 5) {
                $('.all').prop('checked', true)
            } else {
                $('.all').prop('checked', false)
            }
            console.log($('.single:checked').length);
        })

    </script>
</body>

</html>

map和join方法

<!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>
</head>

<body>
    <script>
        const arr = ['red', 'blue', 'green']

        // map方法，可返回新的数组
        const newArr = arr.map(function (ele, index) {
            console.log(ele)  // 数组元素
            console.log(index)  //索引号
            return ele + '颜色'
        })
        console.log(newArr);

        // join方法，把数组中所有元素转换为一个字符串
        // 默认用逗号分割
        console.log(newArr.join());
        // 无分隔符
        console.log(newArr.join(''));
    </script>
</body>

</html>

tab栏切换

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .tab-nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .tab-nav h3 {
            font-size: 24px;
            font-weight: normal;
            margin-left: 20px;
        }

        .tab-nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }

        .tab-nav ul li a {
            text-decoration: none;
            color: #333;
        }

        .tab-nav ul li a.active {
            border-bottom: 2px solid red;
            color: red;
        }

        .tab-content {
            padding: 0 16px;
        }

        .tab-content .item {
            display: none;
        }

        .tab-content .item.active {
            display: block;
        }

        .tab-content .item img {
            width: 100%;
            height: 270px;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-nav">
            <h3>每日特价</h3>
            <ul>
                <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
                <li><a href="javascript:;" data-id="1">美食</a></li>
                <li><a href="javascript:;" data-id="2">百货</a></li>
                <li><a href="javascript:;" data-id="3">个护</a></li>
                <li><a href="javascript:;" data-id="4">预告</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item active"><img src="abc.jpg" alt=""></div>
            <div class="item"><img src="de.jpg" alt=""></div>
            <div class="item"><img src="abc.jpg" alt=""></div>
            <div class="item"><img src="de.jpg" alt=""></div>
            <div class="item"><img src="abc.jpg" alt=""></div>
        </div>
    </div>


    <!-- <script>
        // 5个链接绑定鼠标经过事件
        // 获取a元素
        const as = document.querySelectorAll('.tab-nav a')
        for (let i = 0; i < as.length; i++) {
            as[i].addEventListener('mouseenter', function () {
                // 排他思想
                document.querySelector('.tab-nav .active').classList.remove('active')
                // 显示对应的盒子图片
                document.querySelector('.tab-content .active').classList.remove('active')
                document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
            })
        }

    </script> -->

    <!-- 事件委托 -->
    <script>
        // mouseenter没有冒泡效果，无法使用
        const ul = document.querySelector('.tab-nav ul')
        ul.addEventListener('click', function (e) {
            // console.log(e.target.tagName)
            if (e.target.tagName === 'A') {
                // 排他思想
                document.querySelector('.tab-nav .active').classList.remove('active')
                // 不能使用this，this指向ul
                e.target.classList.add('active')
                // 没有i，利用自定义属性（标签.dataset.自定义属性名）
                // 大盒子模块
                // console.log(e.target.dataset.id);
                const i = +e.target.dataset.id
                // 移除原来的active
                document.querySelector('.tab-content .active').classList.remove('active')
                // 对应的盒子添加active
                // 取过来的i为字符串类型，拼接字符串得到01
                // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')

                // 法二：
                const items = document.querySelectorAll('.item')
                items[i].classList.add('active')

            }
        })
    </script>
</body>

</html>

查找字符串中某个字符出现的次数


<!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>查找字符串中某个字符出现的次数</title>
    <script>
        // indexOf进行查找，若返回结果不是-1，则索引+1
        var str = 'abceabcfabda';
        var index = str.indexOf('a');
        var num = 0;// 计算出现次数
        while (index !== -1){
            console.log(index);// 打印每一次出现的索引号
            num++;
            index = str.indexOf('a' , index+1);// 如果找到出现一次，就将index+1，从新的索引号开始遍历
        }
        console.log('a出现的次数：'+num);
    </script>
</head>
<body>
    
</body>
</html>

倒计时

<!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>倒计时效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display:inline-block;
            text-align: center;
            width: 100px;
            height: 100px;
            background-color: black;
            color: white;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        // 获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        // 输入倒计时结束时间
        var inputTime = +new Date('2023-3-15 00:00:00');
        // 调用一次，防止第一次出现空白
        countDown();
        // 开启定时器
        setInterval(countDown , 1000);
        function countDown(){
            var nowTime = +new Date(); // 获取当前时间的毫秒数
            var times = (inputTime - nowTime)/1000;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0'+h:h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m<10 ? '0'+m : m;
            minute.innerHTML = m;
            var s = parseInt(times %60);
            s = s<10 ? '0'+s:s;
            second.innerHTML =s;
        }

    </script>
</body>
</html>

动态创建表格

<!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>动态生成表格</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,
        th{
            border: 1px solid #333;
        }
        thead tr{
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>

    <script>
        // 模拟数据，用对象形式存储;多个对象利用数组的形式存储
        var datas = [
            {
            name:'zhang',
            subject:'js',
            score:100
        },{
            name:'lia',
            subject:'js',
            score:100
        },{
            name:'wang',
            subject:'js',
            score:100
        }
    ];
    // datas放到tbody中，先有行
    var tbody = document.querySelector('tbody');
    // 创建表格
    for(var i =0;i<datas.length;i++){//外面的for循环管行，tr
        // 创建tr行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        // 行里面创建单元格（和数据有关），单元格数量取决于对象的属性
        for(var k in datas[i] ){//里面的for循环管列td
            //循环几次，就创建几个单元格
            var td = document.createElement('td');
            // 把对象的属性值填充到td
            td.innerHTML = datas[i][k];
            tr.appendChild(td);
        }
        // 创建有删除的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>';
        tr.appendChild(td);
    }
    // 删除操作
    var as = document.querySelectorAll('a');
    for(var i =0;i<as.length;i++){
        as[i].onclick = function(){
            // 删除链接a所在的行 a的parentNode是td；td的parentNode是tr
            tbody.removeChild(this.parentNode.parentNode);
        }
    }


    // for(k in obj){
    //     k为属性名
    //     obj[k]为属性值
    // }
    </script>
</body>
</html>