随机换颜色jQuery

原创 2018-12-17 13:14:02 220
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{width:100px;height:100px;border-radius:50px;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">


a{width:100px;height:100px;border-radius:50px;background:red;float:left;line-height:100px;margin-left:30px;  text-align: center;text-decoration:none;color: #ccc;}

}

</style>

<script type="text/javascript" src="jq.js"></script>

</head>

<body>

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

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

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

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

</body>

</html>

<script type="text/javascript">

Math.random

Math.floor

function aa(tag) {

var len = document.getElementsByTagName(tag).length

// var a = Math.floor(Math.random()*256)

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

aa('a')

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

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

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

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

})

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

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



})

})

</script>


批改老师:天蓬老师批改时间:2018-12-17 14:06:06
老师总结:这个作业 , 重点是考察 原生的Math对象的使用

发布手记

热门词条