js中一种简单的随机颜色实现

最新推荐文章于 2022-08-30 19:16:50 发布

同志该起来敲代码了

最新推荐文章于 2022-08-30 19:16:50 发布

阅读量252

点赞数

文章标签： linq c# javascript

本文链接：https://blog.csdn.net/qq_55823436/article/details/125044025

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 作业：使用addEventListener
        实现鼠标悬停到表格的行，行变色，文字变色，离开行恢复原来的颜色；双击删除行 -->
    <table border="1" width="600" cellspacing="0" cellpadding="4" id="table">
        <thead>
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>java</td>
                <td>50</td>
                <td>10</td>
                <td>500</td>
            </tr>
            <tr>
                <td>python</td>
                <td>50</td>
                <td>10</td>
                <td>500</td>
            </tr>
            <tr>
                <td>C++</td>
                <td>50</td>
                <td>10</td>
                <td>500</td>
            </tr>
        </tbody>
    </table>
    <script>
        var rows = document.getElementById("table").rows;
        //添加监听事件
        for (let i = 0; i < rows.length; i++) {
            let row = rows[i];
            row.addEventListener("mouseover", (el) => {

                row.style.background = colorRandow();
            })
            row.addEventListener("mouseleave", (el) => {
                row.style.background = "#fff";
            })
            row.addEventListener("dblclick", () => {
                row.remove()
            })

        }
        //颜色随机函数
        function colorRandow() {
            let red = Math.random() * 255;
            let green = Math.random() * 255;
            let blue = Math.random() * 255;
            return `rgb(${red},${yellow},${blue})`
        }
    </script>

</body>

</html>

同志该起来敲代码了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中一种简单的随机颜色实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫