摘要:Math.random() 获取随机数Math.floor 取整数例:function aa(tag){ //获取随机颜色 var len=document.getElementsByTagName(tag).length
Math.random() 获取随机数
Math.floor 取整数
例:
function aa(tag){ //获取随机颜色
var len=document.getElementsByTagName(tag).length
for(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)+')'
}
总结:首先获取到a标签点长度!然后for循环输出设置每个a标签的背景色!用Math.random来做获取随机数!
<!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>Document</title>
<script src="/jQuery/jQuery-3.3.1.js"></script>
<style>
a{border-radius: 50px; float: left;display: block;height: 50px;width: 50px;margin-top: 50px;margin-left: 50px;line-height: 50px;text-align: center;color: aqua;}
</style>
<script>
function aa(tag){ //获取随机颜色
var len=document.getElementsByTagName(tag).length
for(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 h(c){ //获取随机值
var l=document.getElementsByTagName(c).length
for(i=0;i<l;i++){
document.getElementsByTagName(c)[i].innerHTML=Math.floor(Math.random()*10)
}
}
$(function(){
aa('a')
$('.bt1').click(function(){
//调用上面的获取随机颜色的函数
aa('a')
});
$('.bt2').click(function(){
// $s=Math.floor(Math.random()*5)
// $('a').text($s) //这两行代码可以改变随机值但是是四个a标签值统一改变!我不想统一改变
h('a')
});
$('.bt3').click(function(){
aa('a');
h('a')
})
$('a').mouseover(function(){
$bg=$(this).css('backgroundColor')
$(this).css('box-shadow','0px 0px 10px '+$bg)
$(this).css('borderRadius','20px')
})
$('a').mouseleave(function(){
$(this).css('box-shadow','none')
$(this).css('borderRadius','50px')
})
})
</script>
</head>
<body>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<button class="bt1">随机色</button>
<button class="bt2">随机值</button>
<button class="bt3">随机色+随机值</button>
</body>
</html>
批改老师:查无此人批改时间:2019-01-14 16:15:22
老师总结:完成的不错。下次把代码缩进,查看起来比较方便,养成好习惯。加油。