Python_day21--练习--点亮灯泡、表格隔行变色

最新推荐文章于 2022-01-23 22:04:46 发布

Biu_Biu_0329

最新推荐文章于 2022-01-23 22:04:46 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/Biu_Biu_0329/article/details/80944158

版权

一、点亮灯泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_点亮灯泡</title>
    <script>
        function light() {
            document.getElementById("img").src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3933316975,2003679862&fm=27&gp=0.jpg"

        }

        function destroy() {
            document.getElementById("img").src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1681562466,1900177456&fm=27&gp=0.jpg"

        }



    </script>
</head>
<body>

<div>
    <br>
    <br>
    <br>
    <br>
    <br>

    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1681562466,1900177456&fm=27&gp=0.jpg" id="img" οnmοusemοve="light()" οnmοuseοut="destroy()">

</div>

</body>
</html>

二、表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_1_隔行换色</title>
    <style>
        table{
            text-align: center;
            width: 80%;
        }

        tr{
            width: 40px;
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var tb = document.getElementById("tb");
            var tbody = tb.getElementsByTagName("tbody")[0];
//            alert(tbody)
            var trs = tbody.getElementsByTagName("tr");

            for (var i = 1; i < trs.length; i++) {
                if (i % 2 == 0) {
                    trs[i].style.backgroundColor = "darkgrey";

                }
            }
            function light() {
                    trs.style.backgroundColor = "red"

        }

        };
    </script>
</head>



<body>

<table id="tb" border="1" >
    <tbody>
    <tr οnmοusemοve="light()" style="background-color: #888">
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr >
        <td>1</td>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr >
        <td>2</td>
        <td>李四</td>
        <td>25</td>
    </tr>
    <tr >
        <td>3</td>
        <td>王五</td>
        <td>27</td>
    </tr>
    <tr >
        <td>4</td>
        <td>赵六</td>
        <td>29</td>
    </tr>
    <tr >
        <td>5</td>
        <td>田七</td>
        <td>30</td>
    </tr>
    <tr >
        <td>6</td>
        <td>汾九</td>
        <td>20</td>
    </tr>
    </tbody>
</table>


</body>
</html>

Biu_Biu_0329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python_day21--练习--点亮灯泡、表格隔行变色

一、点亮灯泡&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;01_点亮灯泡&lt;/title&gt; &lt;script&gt; function light()
复制链接

扫一扫