随机颜色作业
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
.div {
width: 90%;
height: 20px;
background-color: blue;
display: inline-block;
}
span {
width:6%;
height: 20px;
line-height: 20px;
display: inline-block;
}
</style>
<script>
function a(num){
var len = document.getElementsByClassName(num).length
for(var i =0; i<len; i++){
document.getElementsByClassName(num)[i].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
}
}
$(document).ready(function(){
a('div')
$('.div').mouseenter(function(){
$(this).animate(
{
width:Math.random()*90+'%'
},1000)
})
$('.div').mouseleave(function(){
$(this).animate(
{
width:'90%'
},1000)
})
})
</script>
</head>
<body>
<div>
<span>html</span>
<div class="div"></div>
</div>
<br>
<div>
<span>JavaScript</span>
<div class="div"></div>
</div>
<br>
<div>
<span>jQuery</span>
<div class="div"></div>
</div>
<br>
<div>
<span>php</span>
<div class="div"></div>
</div>
</body>
</html>通过最近做案例总结，html还是css逻辑还是非常重要，在写样式的时候不是因为不知道代码怎么写，而是上下层关系比较乱