获取随机颜色刷新给新色并产生随机数

Original 2019-02-09 14:58:51 220
abstract:代码这东西很严谨,练习过程中就因为引号前没打空格郁闷了半天没找到问题。接着又是撤销的时候总认为删掉哪行代码就可以,又掉坑里了。好多坑呀。。。知识点:灵活运用所学到的知识。parseInt()将字符串转换为整数类型,忽略非数字类型click () 点击事件 mouseover() 鼠标移上事件mouseleave()鼠标离开事件+ 拼接字符串新知识点:Math.random()返回介于 0 ~ 1

代码这东西很严谨,练习过程中就因为引号前没打空格郁闷了半天没找到问题。接着又是撤销的时候总认为删掉哪行代码就可以,又掉坑里了。好多坑呀。。。

知识点:灵活运用所学到的知识。

parseInt()将字符串转换为整数类型,忽略非数字类型

click () 点击事件 mouseover() 鼠标移上事件mouseleave()鼠标离开事件

+ 拼接字符串

新知识点:Math.random()返回介于 0 ~ 1 之间的一个随机数。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

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

<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>

<style>

a{

float: left;

display: block;

margin: 50px;

width: 100px;

line-height: 100px;

color: rgb(243, 235, 235);

border-radius: 50px;

text-align: center;

text-decoration: none;

/* background: #ccc; */

}

</style>

</head>

<body>

<script type="text/javascript">

function aa(tag) {

var len=document.getElementsByTagName(tag).length

for (let 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)+')'

}

}

$(function(){

aa('a')

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

$b=parseInt(Math.random()*10)

aa('a')

$('a').text($b)

})

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

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

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

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

})

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

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

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

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

})

})

/* $(document).ready(function(){

       aa('a')

   }) */

</script>

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

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

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

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

<button>刷新</button>

</body>

</html>




Correcting teacher:查无此人Correction time:2019-02-11 09:33:13
Teacher's summary:作业完成的不错。坑主要是你还不熟悉,熟悉的话,就不会有常规错误了。继续加油。

Release Notes

Popular Entries