返回在随机色的基础......登陆

在随机色的基础上加上按钮,点击按钮刷新颜色,并且在a链接中加入数字要求每次点击数字都为随机值

OneZone2019-05-05 16:54:55256

<!DOCTYPE html>

<html>

<head>

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

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

<style type="text/css">

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;}

</style>

</head>

<body>

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

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

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

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

<div style="clear:both;"></div>

<button>刷新颜色</button>

<script type="text/javascript">


//单击按钮刷新颜色

$(document).on('click','button',function(){

changeColor('a');

})


//改变标签的背景颜色

function changeColor(tag){

var title = document.getElementsByTagName(tag);

for(var i=0;i<title.length;i++){

title[i].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';


}

}

$(document).ready(function(){

changeColor('a');

//鼠标放上效果

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

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

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

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


});

//鼠标离开效果

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

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

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

});

//点击改变随机值

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

var num =Math.floor(Math.random()*10000);

$(this).text(num);

});


})

</script>


</body>

</html>


最新手记推荐

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

全部回复(0)我要回复

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