lovecoding
/
J250913


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--用户名:<input type="text" id="input" onfocus="fun1()" onblur="fun2()"><span id="msg"></span><br>-->

<!--<button onclick="fun()">按钮</button>-->
<!--<button id="btn">按钮1</button>-->

<!--<div id="div" onmouseenter="enter()" onmouseout="out()"></div>-->
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>10</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>10</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>10</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>10</td>
    </tr>
</table>

</body>
<script>
    // 先获取所有tr
    var trs = document.getElementsByTagName("tr")
    // 拿到每一个tr
    for (let i = 0; i < trs.length; i++) {
        let tr = trs[i];
        // 给tr 绑定鼠标移入时间和移出时间
        tr.onmouseenter = function (){
            console.log("移入")
            tr.style.background = "gray"
        }
        tr.onmouseleave = function (){
            console.log("移出")
            tr.style.background = ""
        }
    }
    /**
     * 当鼠标移入进去时候把div 背景颜色变成黄色
     * 当鼠标移出时候把背景颜色变回红色
     *
     *
     * 创一个table 表格
     * 鼠标移入莫一行的时候这行的背景颜色变成浅灰色
     * 鼠标移出时候变回之前颜色
     */

    // function enter(){
    //     var div = document.getElementById("div")
    //     div.style.background = "yellow"
    // }
    //
    // function out(){
    //     var div = document.getElementById("div")
    //     div.style.background = "red"
    // }


    /**
     * 已知数据库当中用户名[zhangsan,lisi ,wangwu ,zhaoliu]
     * 注册用户输入用户名,当失去焦点时候需要检查用户名是否已存在 如果已存在就需要再
     * 输入框后面提醒用户名已存在
     */
    // function fun2(){
    //     var arr = ["zhangsan","lisi","wangwu"]
    //     // 获取输入框内容
    //     var username = document.getElementById("input").value
    //     // 循环遍历看输入内容是否在数组中
    //     var flag = false
    //     for (let i = 0; i < arr.length; i++) {
    //         if(arr[i] == username){
    //              flag = true;
    //         }
    //     }
    //     var span = document.getElementById("msg")
    //     if(flag){
    //         span.innerText= "已存在";
    //         span.style.color = "red";
    //     }else{
    //         span.innerText= "可使用";
    //         span.style.color = "green";
    //     }
    // }
    //
    // function fun1(){
    //     console.log("触发了聚焦时间")
    // }
    // // 想要给按钮绑定事件
    // /**
    //  * 第一种方式: 利用元素当中时间属性比如onclik 就是点击事件属性
    //  */
    // function fun(){
    //     console.log("123123")
    // }
    //
    // /**
    //  * 第二种方式
    //  * 1 先获取元素
    //  * 2 调用元素时间属性
    //  */
    // var btn = document.getElementById("btn")
    // btn.onclick = function () {
    //     console.log("!11111")
    // }
</script>
</html>