前端学习11 js基础02 复选框、数据类型

最新推荐文章于 2024-04-09 16:10:23 发布

花落墨山河

最新推荐文章于 2024-04-09 16:10:23 发布

阅读量306

点赞数

本文链接：https://blog.csdn.net/weixin_44189110/article/details/109462937

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .on{
            background-color: red;
        }
        .off{
            background-color: ivory;
        }
        .box2{
            width: 300px;
            height: 200px;
            border: 1px solid khaki;
            display: none;
        }
    </style>
    <script>
        window.onload = function(){
            var oR = document.getElementById('reverse');
            var oC = document.getElementById('c1');
            oR.onclick = function(){
            oC.checked = !oC.checked;
        };
        }
        window.onload = function(){
            var oCall = document.getElementById('all');
            var oBox = document.getElementById('box');
            var aCh = oBox.getElementsByTagName('input');
            oCall.onclick = function(){
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked = oCall.checked;
                }
            };
            for(var i=0;i<aCh.length;i++){
                aCh[i].onclick = function(){
                    var count = 0;
                    for(var i=0;i<aCh.length;i++){
                        if(aCh[i].checked){
                            count++;
                        }
                    }
                    if(count == aCh.length){
                        oCall.checked = true;
                    }else{
                        oCall.checked = false;
                    }    
                }
            
            }
            

        };
        window.onload = function(){
            
            var oBox2 = document.getElementById('box2');
            var aBtn =oBox2.getElementsByTagName
            ('input');
            var oBox3 = document.getElementById('box3');
            var adiv = oBox3.getElementsByTagName('div');
            for(var i = 0;i < aBtn.length; i++){
                aBtn[i].nnn = i;
                aBtn[i].onclick = function(){
                    //循环里面用事件i有问题  全是3 
                    //for循环一瞬间完成 点击前已经3 所以用this
                    
                    for(var j=0;j<aBtn.length;j++){
                        aBtn[j].className = '';
                        adiv[j].style.display = 'none';
                    }//for循环里的for循环没问题，不用用this
                    this.className = 'on';
                    adiv[this.nnn].style.display = 'block';
                } 
                

            }
        };
    </script>
</head>
<body>
    <input type="button" value="单个复选框反选" id = "reverse">
    <div id="box">
        <input type="checkbox" name="" id="c1">
        <input type="checkbox" name="" id="c2">
        <input type="checkbox" name="" id="c3">
    </div>
    <hr>
    <input type="checkbox" name="" id="all" value="全选">
<br>
    <div id="box2">
        <input type="button" value="aaa" class="on">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
    </div>
    <div id="box3">
        <div class="box2" style="display:block">aaa</div>
        <div class="box2">bbb</div>
        <div class="box2">ccc</div>
    </div>
</body>
</html>

JS基础-数据类型
基本数据类型
    12 数字 number
    ‘abc’ string
    0 1 boolean
    undefined

复合数据类型
    object对象

 alert（typeof **）可以看数据类型

显式数据转换
    parseFloat
    parseInt 12px-》12
    Number 更严格 12px-》NaN（not a number）
    NaN不是数组但是是数字类型  跟谁都不相等
    检测是不是NaN isNaN

隐式类型转化
    '12'+5-->'12'+'5'
    '12'-'5'->12-5 = 7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload =function(){
        var txt1 = document.getElementById('txt1');
        var txt2 = document.getElementById('txt2');
        var add = document.getElementById('add');
        add.onclick = function(){
            //alert(typeof txt1.value);
            var num1 = parseInt(txt1.value);
            var num2 = parseInt(txt2.value);
            alert(num1+num2);
        };
        var add2 = document.getElementById('add2');
        add2.onclick = function(){
            alert(txt1.value+txt2.value);
        };

    };
    </script>
</head>

<body>
    <hr>
    <input type="text" name="" id="txt1">+
    <input type="text" name="" id="txt2">
    <input type="button" value="和" id="add">
    <input type="button" value="和2" id="add2">

</body>
</html>

花落墨山河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习11 js基础02 复选框、数据类型

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .on{ b
复制链接

扫一扫