刷新随机变色及点击按钮随机变数字

Original 2019-04-17 15:23:43 219
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>获取随机颜色</title><script type="text/javascript" src="jquery-3.3

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">


<title>获取随机颜色</title>

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


<style>

.box{

float: left;

}

button{

outline: none;

color: #fff;

background-color: #ccc;

border: none;

padding: 5px 12px;

font-size: 16px;

border-radius: 14px;

margin-left: 40px;

}

a{

height: 100px;

width: 100px;

border-radius: 50px;

color: #fff;

line-height: 100px;

text-align: center;

display: block;

/* float: left; */

margin: 30px;

text-decoration: none;

font-size: 20px;

}

</style>


<script>

function bac(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(){

bac('a')

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

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

$(this).css('font-size', '50px')

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

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

})

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

$(this).css('font-size', '20px')

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

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

})

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

$(this).css('backgroundColor',$bg)

})

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

$bg = $('a').css('backgroundColor')

$m = Math.floor(Math.random()*256)

$('a').css('font-size', '50px')

$('a').css('box-shadow','0px 0px 20px '+$bg)

$('a').css('border-radius','25px')

$('a').text($m)

})

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

$(this).css('backgroundColor','#ccc')

$('a').css('font-size', '20px')

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

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


})



})

</script>



</head>

<body>

<div class="box">

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

</div>


<div class="box">

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

</div>


<div class="box">

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

<button class="button">点击变化</button>

</div>


<div class="box">

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

</div>


<div class="box">

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

</div>


</body>

</html>



Correcting teacher:查无此人Correction time:2019-04-18 09:59:53
Teacher's summary:完成的不错,每行js代码结束后,增加;号。继续加油

Release Notes

Popular Entries