随机改变背景颜色

最新推荐文章于 2024-08-21 17:06:07 发布

j_and_c

最新推荐文章于 2024-08-21 17:06:07 发布

阅读量1.9k

点赞数

分类专栏： js 文章标签： js 随机颜色改变背景

本文链接：https://blog.csdn.net/j_and_c/article/details/82286770

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

刚开始学JavaScript不久，自己做了个有趣的东西，想跟大家分享一下。我做的是一个十行十列的表格，当鼠标滑过时随机改变背景颜色，以下是我的代码：

`<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
<title>随机背景色表格</title>
    <style type="text/css">
        table{
            text-align: center; 
        }
        td{
            width: 50px;
            height: 50px;
        }

    </style>
</head>
<body>
    <table border="1px solid #ccc" cellspacing="0" cellpadding="0">
        <tr>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>21</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>31</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>41</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>51</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>61</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>71</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>81</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>91</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>

        <tr>
            <td>101</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

    <script type="text/javascript">
        function rndColor(){
            var r = parseInt(Math.random()*256);
            var g = parseInt(Math.random()*256);
            var b = parseInt(Math.random()*256);
            return "rgb("+r+","+g+","+b+")"
        }
        var tds = document.getElementsByTagName('td');
        for(var i = 0,td; td = tds[i++];){
            td.onmouseover = function(){
                this.style.background = rndColor();   
            }
//          td.onmouseout = function(){
//              this.style.background = '#fff';   
//          };
        }

</script>`