lovecoding
/
J250419


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .mydiv01{
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        button{
            width: 70px;
            height: 50px;
            color: #fff;
            background-color: #ff9500;
        }
        .mybtn{
            width: 143px;
        }
        .show{
            width: 290px;
            height: 50px;
            background-color: #0f0f00;
            color: #fff;
            font-size: 30px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="show">0</div>
    <div>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>*</button>
    </div>
    <div>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>-</button>
    </div>
    <div>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>+</button>
    </div>
    <div>
        <button class="mybtn">0</button>
        <button>.</button>
        <button>3</button>
    </div>

    <div>
        我的输入框： <input type="text" name="myText" class="myText" id="myText">
    </div>

    <div class="mydiv01" id="mydiv01"></div>
    <div class="mydiv01" id="mydiv02"></div>

    <script>
        //var 修饰符，是用来修饰变量的，var修饰的变量，这个变量就是全局变量。所有地方都可以访问它。
        //根据id获取DOM元素
        var myText = document.getElementById("myText");
        //获取焦点事件
        myText.onfocus=function (){
            console.log("我获得焦点了")
        }
        //失去焦点事件
        myText.onblur=function (){
            console.log("我失去焦点了")
        }
        //按下键盘后抬起事件
        myText.onkeyup=function (event){
            console.log(event);
            console.log(event.key); //获取按键的字符
        }


        //根据class获取DOM元素的集合
        //var mydivs=document.getElementsByClassName("mydiv01");
        //var mydiv=mydivs[0];
        //let let修饰的变量就是局部变量，只有函数内部才能访问。
        let mydiv=document.getElementById("mydiv01");
        mydiv.onclick=function (){
            console.log("鼠标点击了这个div")
        }
        mydiv.ondblclick=function (){
            console.log("鼠标 双 击了这个div")
        }

        mydiv.onmouseover=function (){
            console.log("鼠标移入这个div")
        }
        mydiv.onmouseout=function (){
            console.log("鼠标从这个div移出了")
        }

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