获取随机颜色_php.cn手记

abstract：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> a{display: block;height: 100px;width: 100px;border-radi

<!DOCTYPE html>

<html>

<head>

</head>

<style>

a{display: block;height: 100px;width: 100px;border-radius: 50px;text-align: center;line-height: 100px;float: left;margin: 40px;text-decoration: none;}

</style>

<body>

</body>

// function change(tag){

var Ele = document.getElementsByTagName('a')

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

var r = Math.floor(Math.random()*256)

var g = Math.floor(Math.random()*256)

var b = Math.floor(Math.random()*256)

Ele[i].style.backgroundColor = 'rgb('+r+','+g+','+b+')'

}

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

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

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

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

})

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

//$(this).removeAttr('box-shadow')

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

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

})

// }

// change('a')

</script>

</html>

思路：先找到a标签，然后通过for循环获取a标签的长度，给每个遍历的a标签通过rgb()设置随机色

Math.random()*256获取0-256之间的一个随机数，通过Math.floor()返回一个整数

当鼠标划过时改变当前标签的样式，当鼠标离开时还原标签样式

总结：Math.random()返回0-1之间的一个随机数 Math.floor(x)返回小于等于x的最大整数 rgb()颜色值为整数

rgb()写法 'rgb('+r+','+g+','+b+')' 字符串类型，不需再加大引号

box-shadow写法 '0 0 20px '+$bg

$(this).removeAttr('box-shadow')无效 removeAttr移除的是元素自有属性

Correcting teacher：灭绝师太Correction time：2018-11-21 16:36:09
Teacher's summary：完成的很棒，主要是理解的好，好习惯继续保持！

获取随机颜色

Popular Entries