点击按钮获得随机色,并记录点击次数

原创 2019-04-07 22:16:35 291
摘要:<!DOCTYPE html><html><head>    <meta charset="utf-8"> <title></title> <script type="text/javascript" src='static/jquery-3.3.1.m

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title></title>

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

<style type="text/css">

a{

float: left;

display: block;

margin: 80px;

width: 100px;

line-height: 100px;

text-align: center;

height: 100px;

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')


            $('a').mouseover(function(){

              $bg=$(this).css('backgroundColor');

              $(this).css('box-shadow','0px 0px 30px '+$bg)

              $(this).css('border-radius','20px ')


               })

            $('a').mouseleave(function(){

              $(this).css('box-shadow','none')

              $(this).css('border-radius','50px ')

              })

            $('#btn').click(function(){

            aa('a')

            })

            //记录按钮点击次数 并打印在span标签上

             var num = 0;

            $('#btn').on('click',function(){

            num++;

            $('span').text(num)

                })

})

</script>

</head>

<body>

<div>

<button id="btn">点击更换随机色</button>

点击次数:<span></span>

</div>

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">7</a>

<a href="#">8</a>

<a href="#">9</a>

<a href="#">10</a>

<a href="#">11</a>

<a href="#">12</a>

<a href="#">13</a>

<a href="#">14</a>

</body>

</html>


批改老师:天蓬老师批改时间:2019-04-08 09:27:37
老师总结:随机变换颜色, 本质上就是不断的改变GRB的值,要注意变换的范围, 必须是有效值就可以

发布手记

热门词条