js小示例

1.点击切换颜色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            .my{
                background-color: red;
                width: 100px;
                height: 100px;
            }
    </style>

</head>
<body>
    <div class = "my"></div>
    <script>
        var flag = true;
        var oMy = document.getElementsByClassName("my")[0]
        oMy.onclick = function(){
            if (flag){
                oMy.style.backgroundColor = 'green';
                flag = false;
            }else{
                oMy.style.backgroundColor = 'red';
                flag = true;
            }
            

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

 2.显示和隐藏显示框.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class = "box"></div>
    <button class = "hide">隐藏1</button>
    <button>隐藏2</button>    
    <script>
        var oBe = document.getElementsByClassName("box")[0];
        var oHi = document.getElementsByClassName("hide")[0];
            flag = true;
        
        oHi.onclick =function(){

        if (flag){
            oBe.style.display = "none";
            flag = false;
            this.innerText ="显示"

        }else{
            oBe.style.display = "block";
            flag = true;
            this.innerText ="隐藏"
        }

        }

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

 

posted @ 2018-08-16 20:21  auxiaoliu  阅读(502)  评论(0)    收藏  举报