返回刷新随机变色及......登陆

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

天腾²⁰¹⁹2019-04-17 15:23:43221

<!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>



最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送