随机颜色及随机值的变化

Original 2019-05-07 20:37:32 236
abstract:<!DOCTYPE html> <html>    <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8&
<!DOCTYPE html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>获取随机色及点击按钮产生随机数字变化</title>
     <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="http://www.bootcss.com/p/buttons/css/buttons.css">
    <style type="text/css">
  .rdom{width: 800px;height: 300px;margin: 50px 200px;}
     a{
   float:left;
   display:block;
   margin:50px;
   width:100px;
   line-height: 100px;
   text-align: center;
   height:100px;
   color:#fff;
            border-radius: 50px;
            text-decoration: none;
  }
.bt input{margin:0px 480px;}
    </style>
    <script type="text/javascript">
     //改变标签的背景颜色
        function radom(tag) {
           var len=document.getElementsByTagName(tag).length
           for(var i=0;i<len;i++){
            document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
           }
        }
        $(document).ready(function(){
            radom('a')
           $('a').mouseover(function(){
            $bg=$(this).css('backgroundColor')
            $(this).css('box-shadow','0px 0px 20px '+$bg)
            $(this).css('border-radius','20px ')
           })
            $('a').mouseleave(function(){
            $(this).css('box-shadow','none')
            $(this).css('border-radius','50px ')
           })
        })
  
  function btn(){
            
            num1.innerHTML=parseInt(Math.random()*999);
   num2.innerHTML=parseInt(Math.random()*999);
   num3.innerHTML=parseInt(Math.random()*999);
   num4.innerHTML=parseInt(Math.random()*999);
        }
  function btm(){
        window.location.reload();
                  }
    </script>
   </head>
   <body>
    <div class="rdom">
     <a href="#" id="num1">1</a>
  <a href="#" id="num2">2</a>
  <a href="#" id="num3">3</a>
  <a href="#" id="num4">4</a>
    </div>
     
    <div class="bt">
     
<!--
    <button class="button button-royal button-pill button-giant" id="btn" onClick="btn()">点我试试
     
     </button>
-->
      <input type="button" value="点我试试" class="button button-royal button-pill button-giant" id="btn" onClick="btn();btm()">
    
    
    </div>
   </body>
</html>


Correcting teacher:查无此人Correction time:2019-05-08 09:25:18
Teacher's summary:完成的不错。每行js语句结束增加;号。继续加油

Release Notes

Popular Entries