通过为每个a标签设置id,然后绑定按钮点击事件,从而使点击一次按钮a标签的颜色和数字都发生变化

原创 2019-03-11 17:06:13 277
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击颜色变化</title> <script type="text/javascript" src="jquer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击颜色变化</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
a{width: 200px;height: 200px;display:block;background-color: #f40;border-radius: 100px;float: left;text-align:center;line-height: 200px;color: #fff; text-decoration: none;margin:50px;}
button{width: 100px;height:40px;margin-left: 700px;border: none;background-color: pink;border-radius: 10px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('#1').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#2').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#3').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#4').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))

$('#5').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
})
$('a').hover(function(){
$bg=$(this).css('backgroundColor')
$(this).css('borderRadius','30px' )
$(this).css('box-shadow','0px 0px 30px ' +$bg)
},function(){
$(this).css('borderRadius','100px' )
$(this).css('box-shadow','none ')
})
})
</script>
</head>
<body>
<a href="" id="1">1</a>
<a href="" id="2">2</a>
<a href="" id="3">3</a>
<a href="" id="4">4</a>
<a href="" id="5">5</a>
<button>变色</button>
</body>
</html>


批改老师:韦小宝批改时间:2019-03-11 17:13:43
老师总结:写的没有任何毛病 很不错 使用jQuery实现动画要比原生js简单的多吧

发布手记

热门词条