BOM简单练习题（一）

阳光穿透心脏的1/2处 2021-11-23 05:06 229阅读 0赞

今天分享一下一些简单的练习题  
1，![在这里插入图片描述][20190725213647210.png]  
当打开页面时，红色方块会自动向后移动

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    		</script>
    		<style type="text/css">
    			span{
    				display:inline-block;
    				height: 20px;
    				width: 20px;
    				background-color: orange;
    			}
    			.red{
    				background-color: red;
    			}
    		</style>
    	</head>
    
    	<body>
    		<span class="red"></span>
    		<span ></span>
    		<span></span>
    		<span></span>
    		<span></span>
    		<span></span>
    		<span></span>
    		<span></span>
    	</body>
    	<script type="text/javascript">
    //		//	   x="saafsd";// window.x="saafsd";
    //		//	 alert(window.x);
    //		//定时器:返回值为  定时器Id
    //		//window.setInterval("定时执行的代码","毫秒值")
    //		window.setInterval(timer, 1000);
    //
    //		function timer() {
    //			var date = new Date();
    //			document.body.innerHTML = date.toString();
    //		}
             
            window.setInterval(yd,1000);
            var index=1;
            function yd(){
            	//获取所有的span 标签
            	var sps= document.getElementsByTagName("span");
            	//清除所有spanb标签中的 class 
            	for(var i=0;i<sps.length;i++){
            		 sps[i].className="";
            	}
            	//对指定的 span 标签添加  class= "red";
            	sps[index].className="red";
            	if(index==sps.length-1){
            		//当运动到最后一个span标签时，设置index为0 ，让span标签从开始移动
            		index=0;
            	}else{
            		//为能够运动
            		index++;
            	}
            	
            }
    	</script>
    
    </html>

2![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70]  
如上图，鼠标每点击一下按钮，就会自动添加一行

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			ul{
    				padding-left: 0;
    				list-style: none;
    				width: 90%;
    				margin: 0 auto;
    				
    			}
    			ul li{
    				border: 1px solid red;
    				margin: 10px 0;
    				height: 30px;
    				line-height: 30px;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="ul1">
    			 
    		</ul>
    		<input type="button" id="btn1" value="添加一项" />
    	</body>
    	<script type="text/javascript">
    		var btn  = document.getElementById("btn1");
    		var i=1;
    		btn.onclick=function(){
    			var obj=document.getElementById("ul1");
    			obj.innerHTML+="<li>"+i+"</li>";
    			i++;
    		};
    	</script>
    </html>

[20190725213647210.png]: /images/20211122/a3cc05bd848046189ad9a2550d1ca479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70]: /images/20211122/f709bb79b92e419a80f79b1ec07ed44e.png