javascript 的一些BOM DOM 操作

原创于 2018-05-25 08:52:23 发布 · 190 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一系列前端开发中的实用技巧，包括使用for循环绘制乘法表、筛选素数、响应式事件处理如onblur验证输入长度、操作下拉列表及文本框交互、实现全选/全不选/反选功能以及列表项的移动。

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

几个小任务

1.画一个乘法表

考察for循环的使用

2.浏览器输出2-100之间的素数并放入数组

创建数组，并进行放进数组，在判断是不是素数的时候，用两个for循环，不是就a++，当a++等于整数x的时候，说明是素数，放进数组。

3.做一个检测名字的长度按钮失去焦点

做一个失去焦点事件onblur，给用户名标签一个id,用document.getelemsByid 方法获取到这个用户名标签的值，然后判断这个值的长度，通过span标签id的innerHTML方法嵌入一个内容给span标签。

4.选中下拉列表中的某一个选项前面的文本框显示此内容

给select标签一个onchange事件，一个id号，然后通过id获取了值。再通过文本框的id号赋值给value.

5.全选/全不选反选

获取下拉列表的所有值，然后for循环遍历，变成checked=true，这样就是true,全选

获取下拉列表的所有值，然后for循环遍历，变成checked=false，这样就是false,全不选

获取下拉列表的所有值，然后for循环遍历，判断是true还是false，true就变成false,false变成true,反选。

6.让两个列表中的列表项来回移动

在事件中给两个参数，（from，to）

通过appendChild方法移动值

-----------------------------------------------------------------------------------------------------------------------------

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
		//乘法表
				/*for(var i=1;i<=9;i++){
					for (var j=1;j<=i;j++) {
						//window.document.write(i*j+"="+i"*"j)
						document.write(j+"*"+i+"="+j*i+" ");
					}
					document.write("<br>");
				}*/
	    //找2-100素数

	    var num=0;
	     var array=new Array(100);
	    for (var i=2;i<=100;i++) {
	    	var y=2
	    	for (var j=2;j<i;j++) {
	    		if(i%j!=0){
	    		  y++;
	    		}
	    	}
	    	if(y==i){
	    	array[num++]=i;
	    	}	    	
	    }
	    for (var i=0;i<num;i++) {
	    	document.write(array[i]+" ");
	    	document.write("<br/>")
	    }

		</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
		    function guo(value){
		    	//选中下拉列表中的某一个选项  前面的文本框显示此内容
		    	var city=document.getElementById("city").value;
		    	//var citys=city.options[city.selectedIndex].innerText;
		    	document.getElementById("text").value=city;
		    }
		    //全选
		    function selectall()
		    {
		    	var ele1=document.getElementsByName("ai");
            	for(var i=0;i<ele1.length;i++)
            	{
                	var v1=ele1[i];
                	v1.checked=true;
            	}
		    }
            //全不选
		    function selectallno()
		    {
		    	var ele2 = document.getElementsByName("ai");
             	for (var  i= 0; i < ele2.length; i++) 
             	{
               	var v2=ele2[i];
               	v2.checked=false;
            	}
		    }
		    //反选
		    function selectallfan()
		    {
		    	var ele3=document.getElementsByName("ai");
		    	for (var i=0;i<ele3.length;i++) 
		    	{
		    		var v=ele3[i];
		    		if(v.checked)
		    		v.checked=false;
		    		else
		    		v.checked=true;
		    	}
		    }
	        //移动元素
	        function move(from,to) 
	        {
				 var fromBox = document.getElementById(from);    
            	var toBox = document.getElementById(to);  
            	while(fromBox.selectedIndex != -1){    
                toBox.appendChild(fromBox.options[fromBox.selectedIndex]);  
            	}  
			}
			window.onload=function(){
				document.getElementById("username").onblur=function(){
					var value=this.value;
					var show=document.getElementById("show");
					if(value.length<=10&&value.length>=6)
					{
						show.innerHTML="<font color='red'>长度合法</font>";
					}
				    else
					{
						show.innerHTML="<font color='black'>长度不合法</font>";
					}	
				}
				
			}
		</script>
	</head>
	<body>
		用户名：<input type="text" id="username" value="" /><br />
		<span id="show" ></span>
		密码:<input type="text" id="password" value=""/>
		<br />
		国籍:<input type="text" readonly="readonly" id="text" />
		<select onchange="guo(this.value);" id="city">
			<option >==请选择==</option>
			<option value="中国">中国</option>
			<option value="美国">美国</option>
			<option value="日本">日本</option>
		</select >
        <br />
        
	    <input type="button" value="button" id="button"/><br />
	    <input type="button"  value="全选" onclick="selectall();"><br>
	    <input type="button"  value="全不选" onclick="selectallno();"><br>
	    <input type="button"  value="反选" onclick="selectallfan();"><br>
		<input type="checkbox" name="ai">乒乓球<br>
		<input type="checkbox" name="ai">羽毛球<br>
		<input type="checkbox" name="ai">足球<br>
		<input type="checkbox" name="ai">篮球<br>
		<input type="checkbox" name="ai">网球<br>
		
		<select size="10" id="left">
			<option>中国</option>
			<option>德国</option>
			<option>中国</option>
			<option>德国</option>
			<option>中国</option>
			<option>德国</option>
			<option>中国</option>
			<option>德国</option>
		</select>
		
		<input type="button" value="====>" onclick="move('left','right')">
		<input type="button" value="<====" onclick="move('right','left')">
		<select size="10" id="right">
			<option>中国</option>
	</body>
</html>