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

Love The Way You Lie 2021-09-15 15:24 373阅读 0赞

<!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>

发表评论取消回复

表情：

评论列表（有 0 条评论，373人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jQuery为无序列表（ul）中的列表项（li）添加背景颜色

要在使用jQuery编写的网页中为无序列表中的列表项添加背景颜色，您可以按照以下步骤进行操作：步骤 1：引入jQuery库首先，在您的HTML文件中引入jQuery库

怼烎@/ 2024年03月01日 03:36/ 0 赞/ 51 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 255 阅读

相关页面当中，删除ul当中的一个li

<ul class="phone-bumber" id="ul_author"> <!--<li>张大军（13735898529）<

悠悠/ 2022年09月21日 13:24/ 0 赞/ 140 阅读

相关一个列表中按钮的不同样式

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5LyY5pmo_size_20_col

水深无声/ 2022年09月15日 12:42/ 0 赞/ 216 阅读

相关 ul列表解决最后一个li标签的margin问题

原文地址：[http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html][http_www.

雨点打透心脏的1/2处/ 2022年06月10日 08:59/ 0 赞/ 214 阅读

相关 javascript如何设置DIV背景色为随机色

摘要： javascript如何设置DIV背景色为随机色随机色有两种格式：效果预览：[http://wjf444128852.github.io/DEMOLIS

我不是女神ヾ/ 2022年06月06日 10:59/ 0 赞/ 455 阅读

相关 html中去除ul,ol,li标签的样式列表排序点

![70][] 在ol,ul,li标签样式中添加list-style:none; 部分教学添加padding: 0px; margin: 0px;就可以使用，但

心已赠人/ 2022年05月28日 02:56/ 0 赞/ 220 阅读

相关 JS之每次点击body生成一个背景色随机的div

![70][] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2021年09月15日 17:48/ 0 赞/ 222 阅读

相关 JS页面中有一个ul列表，共有10个li标签，其中奇数项显示背景色红色，偶数项显示背景色黄色。（for,while各自实现一下）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

今天药忘吃喽~/ 2021年09月15日 15:24/ 0 赞/ 192 阅读

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

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

Love The Way You Lie/ 2021年09月15日 15:24/ 0 赞/ 374 阅读