JS练习

JS原生代码实现简单的二级联动

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<select id="province">
    <option value="">请选择省份</option>
    <!-- <option value="四川">四川</option>
    <option value="湖北">湖北</option>
    <option value="江苏">江苏</option> -->
</select>

<select name="" id="citys">
    <option value>请选择城市</option>
</select>

<script type="text/javascript">


    data={"四川":["资阳","城都","南充"],"山西":["大同","太原"],"山东":["潍坊","菏泽","济南"]}
    console.log(typeof(data))
    var pro=document.getElementById('province')
    var city_ele=document.getElementById("citys")

    //循环遍历对象
    for(var i in data){
        var ele=document.createElement("option")//创建option节点
        ele.innerHTML=i;
        pro.appendChild(ele);//循环遍历将省份添加到select省份下面

        // console.log(i)
    }

    //onchange 域的内容被改变
    //onselect 文本被选中

    pro.onchange=function (argument) {
        // body...
        //console.log(this.selectedIndex);//选择索引值
        console.log(this.options[this.selectedIndex])
　　　　　//this这里的this代指pro标签，this.options指的是option标签集合，this.selectedIndex获取被选中的元素下标

        var citys=data[this.options[this.selectedIndex].innerHTML]//通过选中的省份获取城市数组

        city_ele.options.length=1;//初始化城市长度
        
        for (var i = 0;i<citys.length;i++) {
　　　　　　//遍历城市长度

            var ele=document.createElement("option")
            ele.innerHTML=citys[i]
            city_ele.appendChild(ele)//添加option标签
        }

        
    }

</script>

</body>
</html>

 

JS实现正反选

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>

<table border="1px">
    <tr>
        <td><input type="checkbox" name=""></td>
        <td>111</td>
        <td>111</td>
    </tr>

    <tr>
        <td><input type="checkbox" name=""></td>
        <td>222</td>
        <td>222</td>
    </tr>

    <tr>
        <td><input type="checkbox" name=""></td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
function selectAll(){
    var inputs=document.getElementsByTagName("input")
    for (var i=0;i<inputs.length;i++){
        //var input=input[i]
        //input.checked=true全选

        inputs[i].checked="checked";
    }
}

function cancel(){
    var inputs=document.getElementsByTagName("input")
    for (var i=0;i<inputs.length;i++){
        //var input=input[i]
        //input.checked=true 取消

        inputs[i].checked="";
    }
}

function reverse(){
    var inputs=document.getElementsByTagName("input")
    for (var i=0;i<inputs.length;i++){
        var input=inputs[i];
        //input.checked=true 反选

        if(input.checked){
            input.checked=false;
        }

        else{input.checked=true;}
    }
}
</script>

</body>
</html>
View Code

 

JS事件传播(冒泡事件)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .outer{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .inner{
            width: 100px;
            height: 100px;
            background:green;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="inner"></div>
</div>

<script>
var inner=document.getElementsByClassName('inner')[0];
//console.log(inner);
//冒泡事件
inner.onclick=function(event){
    alert("inner")
    //阻止事件向外层传播传播
    event.stopPropagation()
    //console.log(this)
}

var outer=document.getElementsByClassName("outer")[0];
outer.onclick=function(){
    alert("outer")
}

/*
Event对象代表事件状态，比如事件在其中发生的元素，键盘按键的状态
鼠标的位置，鼠标按钮的状态，事件通常与函数结合使用，函数不会再事件发生前
被执行！event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们获得仅仅需要接受一下就好

比如onkeydown，我们想知道那个键按下，需要问下event对象的属性，这里就KeyCode

 */


</script>

</body>
</html>
View Code

 

JS模态对话框

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .content{
            height: 1800px;
            background-color: pink;
        }

        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
            //opacity 透明度
        }

    .model{
        width: 200px;
        height: 200px;
        background-color: bisque;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;

        /*height: 50%*/
    }

    .hide{
        display: none;
    }
    </style>

</head>
<body>

<div class="content">
    <button onclick="func()">show</button>
    hello world
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">show</button>
</div>

<script type="text/javascript">

function func (argument) {
    var ele_shade=document.getElementsByClassName('shade')[0]
    var ele_model=document.getElementsByClassName('model')[0]

    ele_model.classList.remove("hide")
    ele_shade.classList.remove("hide")
}

function cancel(){
    var ele_shade=document.getElementsByClassName("shade")[0]
    var ele_model=document.getElementsByClassName("model")[0]

    ele_model.classList.add("hide")
    ele_shade.classList.add("hide")
}
</script>
</body>
</html>
View Code

 

posted @ 2019-11-23 11:17  coldplaycode  阅读(549)  评论(0)  编辑  收藏  举报

coldplaycode