从零开始学前端：九九乘法表+全选，全不选，反选 --- 今天你学习了吗？（JS：Day8）

Coisini_甜柚か

已于 2022-11-16 09:49:55 修改

阅读量690

点赞数

分类专栏：从零开始学前端文章标签：前端学习 javascript

于 2022-04-10 03:41:04 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/124071550

版权

从零开始学前端专栏收录该内容

48 篇文章 10 订阅

订阅专栏

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：数据类型转换、运算符 — 今天你学习了吗？（JS：Day7）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

前言

补的有点简陋了，大家见谅，等我毕设搞完，再好好整理一下。

第八节课：九九乘法表+全选，全不选，反选

一、九九乘法表

例图：
请添加图片描述

代码：

<!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>
        *{
            margin:0;
            padding:0
        }
        body{
            background-color: #abc;
        }
        span{
            /* float: left; */
            display: inline-block;
            width:80px;
            height:30px;
            background-color: #90f;
            line-height: 30px;
            text-align: center;
            color:#fff;
            font-weight: bold;
            margin:5px;
        }
    </style>
</head>
<body style="height:2000px;">

    <div id="box">
        <!-- <span>1*1=1</span> -->
        <!-- <span>1*1=1</span>
        <span>1*1=1</span> -->
    </div>

    <script>

        // <span>1*1=1</span>
        var box = document.getElementById('box');
        var str = '';
        
        //外层for循环作为行；
        for( var i = 1; i < 10; i++){
            // console.log( i )
            //里层for循环代表是的列
            for( var j = 1;j<=i;j++ ){
                // console.log( i )
                // console.log( j )
                str += "<span>"+i+"*"+j+"="+i*j+"</span>"
            }
            str += '<br>'
        }
        
        str += "<hr/>"

        //第二种
        for( var i = 1; i < 10; i++){
            // console.log( i )
            for( var j = i;j<10;j++ ){
                //1 2 3 4 5 6 7 8 9 
                //2 3 4 5 6 7 8 9
                //9
                // console.log( i )
                // console.log( j )
                str += "<span>"+i+"*"+j+"="+i*j+"</span>"
            }
            str += '<br>'
        }

        str += "<hr/>"

        //第三种
        for( var i = 9;i>=1;i-- ){

            for( var j = 1;j<=i;j++ ){
                str += "<span>"+i+"*"+j+"="+i*j+"</span>"
            }
            str += '<br>'
        }

        str += "<hr/>"
        //第四种：
        for( var i = 9;i>=1;i-- ){

            for( var j = i;j<10;j++ ){
                str += "<span>"+i+"*"+j+"="+i*j+"</span>"
            }
            str += '<br>'
        }

        for( var i = 0;i<1;i++ ){
            console.log( i )
            for( var j = 0;j<10;j++ ){
                console.log( j )
            }
            console.log( 999 )
        }
        box.innerHTML = str;
    </script>
</body>
</html>

二、全选反选全不选

例图：
在这里插入图片描述

用checkbox的话比较好做，这里用的是图片素材，也可以使用checkbox，我记得很久之前有例子：全选和全不选（管理员列表）----html文件。
在这里插入图片描述

and
在这里插入图片描述

代码：

<!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>
    
        *{
            margin:0;
            padding:0;
        }
        #wrap{
            width:400px;
            margin:50px auto 0;
            user-select: none;
        }
        ul li{
            list-style:None;
            border:1px dashed #000;
            padding:20px;
            cursor:pointer;
        }
        ul li span{
            float:left;
            width:20px;
            height:20px;
            background-image:url( 'images/ck.png' );
            margin-right:10px;
            margin-top:2px;
        }
        ul li span.active{
            background-image:url( 'images/cked.jpg' );
        }
        button{
            width: 50px;
            height:30px;
        }
        button.active{
            background-color: #90f;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul>
            <li><span>1</span>option1</li>
            <li><span>2</span>option2</li>
            <li><span>3</span>option3</li>
            <li><span>4</span>option4</li>
            <li><span></span>option5</li>
            <li><span></span>option6</li>
            <li><span></span>option7</li>
        </ul>    
        <div class="box">

            <button>全选</button>
            <button class='active'>全不选</button>
            <button>反选</button>
        </div>
    </div>
    <script>
        var Lis = document.getElementsByTagName('li');
        var Btns = document.getElementsByTagName('button');
        var spans = document.getElementsByTagName('span');
        var len = spans.length;
        var count = 0;
        for( var i = 0; i < len; i++){
            // console.log( i )
            spans[i].i = i;
            spans[i].kaiguan = false;
            spans[i].onclick = function(){
                // alert( 1 ) 
                // alert(this.i)
                if( this.kaiguan ){
                    spans[this.i].className = ''
                    // this.kaiguan = false
                    count--
                }else{
                    spans[this.i].className = 'active'
                    // this.kaiguan = true
                    count++;
                }
                this.kaiguan = !this.kaiguan;
                console.log( 1 )
                // console.log( spans[this.i].kaiguan )

                if( count === len ){

                    //全勾上 ， 个数等于7
                    console.log( '7个' )
                    Btns[0].className = 'active'
                    Btns[1].className = ''

                }else if( count === 0 ){
                    console.log( '0个' )
                    Btns[1].className = 'active'
                    Btns[0].className = ''
                    //个数等于0的时候，是全不选

                }else{
                    console.log( '已经勾选上'+count+'个' )
                    //不管你勾选上几个（0-7）
                    //[0，7]:这种写法是包含0跟7;
                    Btns[1].className = ''
                    Btns[0].className = ''
                }
            }
        }
        //全选
        Btns[0].onclick = function(){
            this.className = 'active'
            Btns[1].className = ''
            count = len;
            console.log( count )
            for( var i = 0; i < spans.length; i++){

                if( spans[i].className !== 'active' ){
                    //这里因为是已经勾选上了，所以开关也需要跟着改变
                    spans[i].kaiguan = true;
                    spans[i].className = 'active'
                }
            }
        }
        //全不选
        Btns[1].onclick = function(){
            this.className = 'active'
            Btns[0].className = ''
            count = 0;
            console.log( count )
            for( var i = 0; i < spans.length; i++){

                spans[i].kaiguan = false;
                spans[i].className = ''
            
            }
        }
        //反选
        Btns[2].onclick = function(){

            for( var i = 0; i < spans.length; i++){

                if( spans[i].kaiguan){
                    spans[i].className = ''
                    count--
                }else{
                    spans[i].className = "active"
                    count++
                }
                spans[i].kaiguan = !spans[i].kaiguan

            }

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