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

Love The Way You Lie 2021-09-15 15:24 379阅读 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 条评论，379人围观）

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

相关阅读

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

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

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

相关 java编写一个窗体应用，点击按钮让按钮的背景颜色随机变化。

题目：编写一个窗体应用，点击按钮让按钮的背景颜色随机变化。 import java.awt.; import java.awt.ev

小鱼儿/ 2023年10月06日 07:28/ 0 赞/ 13 阅读

相关 js点击按钮为元素随机字体颜色和背景色

写两个button和一个div，点击按钮分别改变背景色和前景色（字体颜色）。产生的是一个随机颜色。 <!DOCTYPE html> <html lang="e

古城微笑少年丶/ 2023年06月05日 08:10/ 0 赞/ 22 阅读

相关 ul li列表排序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 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 赞/ 380 阅读