js随机颜色生成

最新推荐文章于 2024-07-31 13:08:05 发布

忆成风

最新推荐文章于 2024-07-31 13:08:05 发布

阅读量783

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lhzau1996/article/details/89239198

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>随机颜色生成</title>
       <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

</head>

   <body>
       <table style="border: 1px solid red;margin: 50px auto;">
           <tr>
               <td colspan="5" style="color: rgb(228,204,18);text-align: center;">
                   颜色的RGB表示
               </td>
           </tr>
           <tr>
               <td class="one">星期一|</td>
               <td class="two">星期二|</td>
               <td class="three">星期三|</td>
               <td class="four">星期四|</td>
               <td class="five">星期五</td>
           </tr>
           <tr>
               <td colspan="5" style="color: rgb(228,204,18);text-align: center;cursor: pointer;" οnclick="fun()">
                   刷新
               </td>
           </tr>
       </table>
       <script type="text/javascript">
           function randomColor() {
               var r = Math.floor(Math.random() * 256);
               var g = Math.floor(Math.random() * 256);
               var b = Math.floor(Math.random() * 256);
               return "rgb(" + r + ',' + g + ',' + b + ")";
           }

           $(function() {
               $(".one").attr('style', 'color:' + randomColor() + ';');
               $(".two").attr('style', 'color:' + randomColor() + ';');
               $(".three").attr('style', 'color:' + randomColor() + ';');
               $(".four").attr('style', 'color:' + randomColor() + ';');
               $(".five").attr('style', 'color:' + randomColor() + ';');
           })

           function fun() {
               window.location.reload();
           }
       </script>
   </body>

</html>