我的作业 随机色 点击按钮切换

Original 2019-04-02 09:57:14 201
abstract:<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=dev

<!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script type="text/javascript"src="jquery-3.3.1.min.js"></script>

     <style type="text/css">

       *{

         margin: 0;

         padding: 0;

       }

       #n_d{

         width: 1300px;

         height: 600px;

         margin: 5px auto;

         position:relative;

       }

       #n_up{

         width: 1300px;

         height: 30px;

       }

       p{

         float: left;

         width: 30px;

         height: 30px;

         margin-left: 5px;

         border-radius: 50%;

         color: #fff;

         text-align: center;

         line-height: 30px;

       }

       .clear{

         clear: both;

       }

       #n_down{

         width: 1300px;

         height: 30px;

         position: absolute;

         top:570px;

       }

       #n_butt{

         width: 200px;

         height: 50px;

         margin: 200px auto;

       }

       button{

         width: 200px;

         height: 50px;

         background: #ccc;

         font-size: 20px;

         border: none;

       }

     </style>

     <title>霓虹灯</title>

   </head>

   <body>

     <div id="n_d">

       <div id="n_up">

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

       </div>

       <div></div>

       <div id="n_down">

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

         <p></p>

       </div>

       <div id="n_butt">

         <button>点击换色</button>

       </div>

     </div>

     <script type="text/javascript">

        $(document).ready(function(){

           $('button').click(function(){

             $('p').each(function(){

               var r = parseInt(Math.random()*257).toString(16);

               var g = parseInt(Math.random()*257).toString(16);

               var b= parseInt(Math.random()*257).toString(16);

               var col='#'+r+g+b;

               $(this).css('background',col);

               $(this).text(Math.floor(Math.random()*50));

             })

         })

        })

     </script>

   </body>

</html>


用js会写  用jq总是出问题  还是有些函数掌握不熟练,但是程序能明白

Correcting teacher:天蓬老师Correction time:2019-04-02 11:18:30
Teacher's summary:toString(16);这个是什么意思, 建议写上注释

Release Notes

Popular Entries