增加按钮 点击刷新颜色 并且 显示随机数字

原创 2019-01-11 17:45:42 429
摘要:<!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>
    <style type="text/css">
		a {
			float:left;
			display:block;
			margin:50px;
			width:200px;
			line-height: 100px;
			text-align: center;
			height:200px;
			color:#fff;
            border-radius: 50px;
            text-decoration: none;
		}
    </style>

    <script type="text/javascript">
    	//改变标签的背景颜色
        function aa(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(){
            aa('a')
            $("#flashcolor").click(function(){
                //alert("h1");
                aa('a')
                $bg=$('a').css('backgroundColor')
                $('a').css('box-shadow','0px 0px 20px '+$bg)
                $('a').text($bg);
                //$('a').css('border-radius','20px ')
            })

           $('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 ')
           })
        })


    </script>
   </head>
   <body>
    	<a href="#">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
    <div>
    <button id="flashcolor">刷新颜色</button>
  </div>
   </body>
</html>


批改老师:天蓬老师批改时间:2019-01-11 22:40:55
老师总结:document.getElementsByTagName(tag)[i], 可以试一下这种语法: document.getElementsByTagName(tag).item(i), 也很好用

发布手记

热门词条