JS.页面中有一个ul列表，共有10个li标签，为每个列表项添加随机的背景色；页面中还有一个按钮，点击按钮，为每一个li更换随机的背景色。

wenxuefeng360 2022-11-03 发布于四川

展开全文

七上八下的爆米花

于 2018-06-30 10:49:07 发布

3910

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lanseguhui/article/details/80864743

版权

JavaScript 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		li{
			width: 300px;
			height: 30px;
		}
	</style>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<input type="button" value="变色">
</body>
<script>
	//先执行这个方法
	changeColor();
	var inps= document.querySelectorAll("input");
    inps[0].οnclick=function(){
      changeColor();
    }
   function changeColor(){
   	var lis = document.querySelectorAll("li");
	for(var i = 0; i<10; i++){
     var r = Math.ceil(Math.random()*255);
     var g = Math.ceil(Math.random()*255);
     var b = Math.ceil(Math.random()*255);
   	lis[i].style.backgroundColor="rgb("+r+","+g+","+b+")";   		
	}
   }	
</script>
</html>