JavaScript +html随机点名系统

最新推荐文章于 2023-03-27 10:17:17 发布

7777_

最新推荐文章于 2023-03-27 10:17:17 发布

阅读量522

点赞数

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/keke77_/article/details/121688306

版权

本文介绍如何使用HTML和CSS创建一个带有随机背景颜色选择功能的div元素，用户点击按钮可切换div内的元素背景，适合初学者理解CSS动画和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
		            margin: 0px;
		            padding: 0px;
		        }
		        .div1{
		            width: 800px;
		            height: 300px;
					border-radius:25px，50px;
		        }
		        .yangshi{
		            height: 100px;
		            width: 100px;
		            border-radius:15px;
		            display: inline-block;
		            margin-left: 20px;
		            text-align: center;
		            line-height: 100px;
		            background-color: pink;
		            margin-bottom: 30px;
		          
		        }
		        #button{
		            width: 200px;
		            height: 50px;
		            background-color: pink;
					margin-left: 200px;
					top: auto;
					border-radius:25px;
		        }
			
		</style>
	</head>
	<body>
		<div id="div1" class="div1"></div>
		    <button value="开始" id="button" onclick="">开始</button>
		    <script>
		        /* 一个名字一个div */
		        
		        var arrs =["1","2","3","4","5","6","7","8","9","10","11"]; 
		        /*用后台模拟网页数据   以上用数组分别代表不同的同学*/
		        var div1=document.getElementById("div1");/*   获得网页div的id*/
		        for(var i=0;i<arrs.length;i++){/* 循环数组，创建数组相对应的div */
		            var div=document.createElement("div");
		            div.innerHTML=arrs[i];
		            div.className="yangshi";
		            div1.appendChild(div);  
		        }
		        var but=document.getElementById("button");
		        var s= but.getAttribute("value");// 获取but的value值
		        console.log(s);/* 验证是否获取到*/
		        // function a(){
		        //     console.log(this)
		           
		        // }
		        /* 给button添加点击事件*/
		        but.onclick=function(){
		  			/* 如果当 but的value值为 “开始” 然后执行*/
		             if(s==="开始"){
		                 x= setInterval(function(){
		                	// 清空所有样式
		                    for(var j=0;j<arrs.length;j++){
		                    div1.children[j].style.background="";
		                    }
		                    /*开始随机数给随机到的div背景颜色*/
		                    var random=parseInt(Math.random()*(arrs.length-1+1-0)+0)
		                    div1.children[random].style.background="antiquewhite";    
		                }, 100);
		                s="停止"
		                but.innerHTML="停止"
		            }else{
		                //console.log("x",x);
		                clearInterval(x);  //不满足条件是清除计时器
		                //重新给button 给值
		                s="开始"
		                but.innerHTML="开始"
		            }       
		        }        
		    </script>
		
	</body>
</html>