03_js练习 2

最新推荐文章于 2024-09-14 18:52:56 发布

Ayui.

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量40

点赞数

分类专栏： 02_javaee 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_61569709/article/details/132120917

版权

02_javaee 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1 倒计时

<html>
    <head>
	     <title>js练习倒计时</title>
		 <meta charset="utf-8"/>
		 <style type="text/css">
		     table{
			    width:900px;
				/*border:1px solid blue;*/
				margin:10px auto;
				border-collapse:collapse;/*合并相邻单元格之间的边框*/
			 }
			 td{
			    font-size:24px;
				padding:10px;
				border:1px solid blue;
			 }
			 
			 div{
			    border:1px solid blue;
				width:1000px;
				margin:100px auto;
				apdding:10px;
				font-size:30px;
				color:red;
			 }
			 span{
			    /*
				 display:
				    block : 块标签
					none : 　隐藏
					inline : 　行标签
				*/
				display:block;
				border:1px solid blue;
			 }
			 #span_time{
			    background-color:#aa99aa;
			 }
			 #span_djs{
			    background-color:#66aacc;
			 }
		 </style>
	</head>
	<body>  
	     <!--
		  写页面的步骤：
		     1 html创建标签
			 2 css 样式和布局
			 3 标签注册事件
			 4 js方法
		 -->
		 <script type="text/javascript">
		       //文档加载成功  span就需要设置文本内容
			   var ospanTime,ospanDjs,oDateNian;
			   window.onload=function(){
			        //给全局变量赋值
					ospanTime=document.getElementById("span_time");
					ospanDjs=document.getElementById("span_djs");
					oDateNian=new Date(2023,1-1,21);
			        //设置span_time文本内容为当前时间：每隔1秒钟就设置其文本内容
					setCurrentTime();
					setDjs();
					window.setInterval(function(){setCurrentTime();setDjs();},1000);
					
					//window.setInterval(setDjs,1000);
			   }
			   function setCurrentTime(){
					var date=new Date();
					ospanTime.innerHTML=date.toLocaleString().bold();
			   }
			   
			   function setDjs(){
					var date=new Date();
					var timeCha=oDateNian.getTime()-date.getTime();
					var day=parseInt(timeCha/1000/3600/24);
					var hour=parseInt(timeCha/1000%(3600*24)/3600);
					var minute=parseInt(timeCha/1000%3600/60);
					var second=parseInt(timeCha/1000%60);
					ospanDjs.innerHTML="距离过年2023/01/21还有"+day+"天"+hour+"时"+minute+"分"+second+"秒".bold().fontcolor("#ff00ff");
			   }
		 </script>
		 <div>
		     <span id="span_time"></span>
			 <span id="span_djs"></span>
		 </div>
	</body>
</html>

2 计算器

<html>
    <head>  
	     <title>计算器</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		         div{
				     border:1px solid;
					 padding:10px;
				 }
				 #div0{
				    width:1000px;
					height:600px;
					position:absolute;
					top:100px;
					left:450px;
				 }
				 #divtop{
				    width:600px;
					height:150px;
					position:absolute;
					top:50px;
					left:200px;
					text-align:center;
				 }
				 #divleft,#divright{
					height:300px;
					position:absolute;
					top:240px;
				 }
				 #divleft{
				    width:350px;
				    left:150px;
				 }
				 #divright{
				    right:150px;
					width:260px;
				 }
				 #span_text{
				    font-size:70px;
					letter-spacing:90px;
					font-weight:bold;
					color:blue;
					text-indent:50px;
				 }
				 #text_show,#but_clear{
				    font-size:40px;
				 }
				 #divleft input,#divright input{
				     width:55px;
					 height:55px;
					 font-size:30px;
					 font-weight:bold;
				 }
				 #divleft input{
				     margin:40px 6px;
				 }
				 #divright input{
				     margin:40px 14px;
				 }
				 
		 </style>
	</head>
	<body> 
	     <div id="div0">
		     <div id="divtop">
		           <span id="span_text">&nbsp;计算器</span><br/>
				   <input type="text" id="text_show" disabled="disabled"/>
				   <input type="button" id="but_clear" value="清空" style="color:red;"/>
		     </div>
			 <div id="divleft">
			       <!--
					   <input type="button" value="0"/>
					   <input type="button" value="1"/>
					   <input type="button" value="2"/>
					   <input type="button" value="3"/>
					   <input type="button" value="4"/>
					   <input type="button" value="5"/>
					   <input type="button" value="6"/>
					   <input type="button" value="7"/>
					   <input type="button" value="8"/>
					   <input type="button" value="9"/>
				   -->
		     </div>
			 <div id="divright">
			      <!--
					  <input type="button" value="+"/>
					  <input type="button" value="-"/>
					  <input type="button" value="×"/>
					  <input type="button" value="÷"/>
					  <input type="button" value="."/>
					  <input type="button" value="=" style="color:blue;"/>
				  -->
		     </div>
		 </div>
		 <script  type="text/javascript">
		 
		      //1 文档加载成功 动态在divleft和divright中创建按钮
			  var strRight="+-×÷.=";
			  var oText;
			  window.onload=function(){
			      var odivLeft=document.getElementById("divleft");
				  oText=document.getElementById("text_show");
				  var odivRight=document.getElementById("divright");
				  for(var i=0;i<=9;i++){
				     var oBut=document.createElement("input");
				     odivLeft.appendChild(oBut);
					 oBut.type="button";
					 oBut.value=i;
					 oBut.onclick=function(){
					    setNum(this.value);
					 }
				  }
				  for(var i=0;i<strRight.length;i++){
				     var oBut=document.createElement("input");
				     odivRight.appendChild(oBut);
					 oBut.type="button";
					 oBut.value=strRight.charAt(i);
					 oBut.onclick=function(){
					    if(this.value=="."){
						    setNum(this.value);
						}else if(this.value=="="){
						    getResult();
						}else{
						    setYsf(this.value);
						}
					 }
				  }
				  //给id="but_clear"添加点击事件
				  document.getElementById("but_clear").onclick=jsqClear;
			  }
			  //定义全局变量
			  var num1="",num2="",ysf="";
			  //点击方法
			  function setNum(n){
			      if(ysf){
				     //判断是不是.
					 if(n=="."){
					     if(num2.indexOf(".")!=-1){
						     alert("一个数字只能偶一个小数点！");
							 return;
						 }
					 }
				     num2+=n;
				  }else{
				    //判断是不是.
					 if(n=="."){
					     if(num1.indexOf(".")!=-1){
						     alert("一个数字只能偶一个小数点！");
							 return;
						 }
					 }
				     num1+=n;
				  }
				  //给<input type="text" id="text_show"/>赋文本内容
				  oText.value=num1+""+ysf+""+num2;
			  }
			  function getResult(){
			     if(!num2){
					    alert("数据不完整 不能运算！");
						return;
			     }
			     var fnum1=parseFloat(num1);
				 var fnum2=parseFloat(num2);
				 var result="";
				 switch(ysf){
				     case "+":
					 result=fnum1+fnum2;break;
					 case "-":
					 result=fnum1-fnum2;break;
					 case "×":
					 result=fnum1*fnum2;break;
					 case "÷":
					 result=fnum1/fnum2;break;
				 }
				 result=parseInt(result*100)/100;
				 //给<input type="text" id="text_show"/>赋文本内容
				  oText.value=num1+""+ysf+""+num2+"="+result;
			  }
			  function jsqClear(){
			       num1="";num2="";ysf="";
				   oText.value="";
			  }
			  function setYsf(y){
			        if(ysf){
					       alert("运算符只能赋值一次！");
							 return;
					}
					ysf=y;
					//给<input type="text" id="text_show"/>赋文本内容
				    oText.value=num1+""+ysf+""+num2;
			  }
			  
			  
		 </script>
	</body>
</html>

3 新闻字体

<html>
    <head>
        <title>js新闻字体</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            div{
                border:1px solid blue;
                width:800px;
                margin:10px auto;
                padding:10px;
            }
            .cla1{
                background-color:#cccc00;
                border:1px solid blue;
            }
            #div5 div{
                width:50px;
                height:50px;
                float:left;
                margin:10px 60px;

            }
        </style>
    </head>
    <body>  
        <div  id="div1">
            动态的html:::Dynamic HTML
            DHTML由：html+css+js+dom解析
            html语言提供标签 封装数据
            css语言提供属性 控制样式
            js语言提供对象的逻辑判断 实现元素的动态效果
            dom技术：把html标签解析为对象
            html+css+js：：前段三剑客
            ajax=DHTML+ActiveXObject对象
            注意：内置对象的使用查询：dhtml的api
        </div>
        <div id="div2">
            文字大小：<input type="text" name="sizeText"/><br/>
            字体颜色：<input type="text" name="colorText"/><br/>
        </div>
        <script type="text/javascript">
            //事件：onblur 失去输入焦点
            //      onfocus 获取输入焦点
            //给<input type="text" name="sizeText"/>绑定输入完毕事件：
            var otext1=document.getElementsByName("sizeText")[0];
            var otext2=document.getElementsByName("colorText")[0];
            otext1.onfocus=function(){
                //更改样式：
                //otext1.style.backgroundColor="#cccccc";
                //otext1.style.border="1px solid blue";
                otext1.className="cla1";
            }
            otext2.onfocus=function(){
                otext2.className="cla1";//更改样式：
            }
            otext1.onblur=function(){
                //otext1.removeAttribute("style");//移除内部css样式  不能移除通选择器添加的样式
                otext1.removeAttribute("class");
                var fontSize=otext1.value;
                if(!fontSize){
                    fontSize=16;
                }
                document.getElementById("div1").style.fontSize=fontSize+"px";
            }
            otext2.onblur=function(){
                otext2.removeAttribute("class");
                var fontColor=otext2.value;
                if(!fontColor){
                    fontColor="#000000";
                }
                document.getElementById("div1").style.color=fontColor;
            }
        </script>

        <div id="div3">
            文字大小: 30px <input type="radio" name="radioFontSize" value="30px"/> | 
            40px <input type="radio" name="radioFontSize" value="40px"/> | 
            50px <input type="radio" name="radioFontSize" value="50px"/> | 
            60px <input type="radio" name="radioFontSize" value="60px"/> 
        </div>
        <script type="text/javascript">
            //改radioFontSize绑定点击事件
            window.onload=function(){
                var collFontSize=document.getElementsByName("radioFontSize");
                for(var i=0;i<collFontSize.length;i++){
                    collFontSize[i].onclick=function(){
                        document.getElementById("div1").style.fontSize=this.value;
                    }
                }
            }
        </script>

        <div id="div4">
            文字颜色: <select name="selectFontColor">
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
            <option value="#ff00ff">紫色</option>
            <option value="yellow">黄色</option>
            <option value="black" selected="selected">黑色</option>
            </select>
        </div>
        <script type="text/javascript">
            //onchange;值更改事件
            window.onload=function(){
                var oSelect=document.getElementsByName("selectFontColor")[0];
                oSelect.onchange=function(){
                    //1:通过.value获取select的值
                    //document.getElementById("div1").style.color=this.value;
                    //2:获取所有的option 判断哪个option被选中  此option的值就是select的值
                    var collOptions=oSelect.getElementsByTagName("option");
                    for(var i=0;i<collOptions.length;i++){
                        if(collOptions[i].selected){
                            document.getElementById("div1").style.color=collOptions[i].value;
                            return;
                        }
                    }
                }
            }
        </script>
        <div id="div5" style="height:100px;">
            <div style="background-color:#aaaa00;"></div>
            <div style="background-color:#aa00aa;"></div>
            <div style="background-color:#00aaaa;"></div>
            <div style="background-color:#aaaaaa;"></div>			   
        </div>
        <script type="text/javascript">

            window.onload=function(){
                var collDiv=document.getElementById("div5").getElementsByTagName("div");
                for(var i=0;i<collDiv.length;i++){
                    //onclick事件
                    collDiv[i].onclick=function(){
                        document.getElementById("div1").style.backgroundColor=this.style.backgroundColor;
                    }
                    //onmouseover鼠标移入：
                    //onmouseout 鼠标移出
                    collDiv[i].onmouseover=function(){
                        document.getElementById("div1").style.backgroundColor=this.style.backgroundColor;
                    }
                    collDiv[i].onmouseout=function(){
                        document.getElementById("div1").style.backgroundColor="#ffffff";
                    }
                }
            }
        </script>
    </body>
</html>

4 下拉列表

繁琐写法

<html>
    <head>  
        <title>下拉列表练习</title>
        <meta charset="gbk"/>
        <style type="text/css">
            div{
                border:1px solid;
                padding:10px;
            }
            #div0{
                margin:50px auto;
                width:1600px;
                height:700px;
            }
            #div1left,#div1right{
                width:300px;
                height:200px;
                margin-top:50px;
            }
            #div1left{
                margin-left:300px;
                float:left;
            }
            #div1right{
                float:right;
                margin-right:300px;
            }
            #div2{
                clear:both;
                width:1200px;
                height:350px;
                margin:100px auto;
            }
            #div2 div{
                width:150px;
                height:300px;
                float:left;
                margin:20px 110px;
            }
            select{
                font-size:24px;
                font-weight:bold;
                color:blue;
            }
            #div2middle input{
                width:140px;
                height:50px;
                margin:11px auto;
                background-image:url("button.png");
            }
            #but_to_right{
                background-position:33% 3%;
            }
            #but_all_to_right{
                background-position:33% 28%;
            }
            #but_to_left{
                background-position:35% 55%;
            }
            #but_all_to_left{
                background-position:35% 86%;
            }
        </style>
    </head>
    <body> 
        <div id="div0">
            <div id="div1left">
            </div>
            <div id="div1right">
            </div>
            <div id="div2">
                <div id="div2left">
                    <select id="sel_left" size="8" multiple="true">
                        <option>选项0011</option>
                        <option>选项0012</option>
                        <option>选项0013</option>
                        <option>选项0014</option>
                        <option>选项0015</option>
                        <option>选项0016</option>
                        <option>选项0017</option>
                        <option>选项0018</option>
                    </select>
                </div>
                <div id="div2middle">
                    <input type="button" id="but_to_right"/>
                    <input type="button" id="but_all_to_right"/>
                    <input type="button" id="but_to_left"/>
                    <input type="button" id="but_all_to_left"/>
                </div>
                <div id="div2right">
                    <select id="sel_right" size="8" multiple="true">
                    </select>
                </div>
            </div>
        </div>
        <script  type="text/javascript">
            var oselLeft,oselRight;
            //文档加载成功 给按钮添加点击事件
            window.onload=function(){
                //给全局变量赋值
                oselLeft=document.getElementById("sel_left");
                oselRight=document.getElementById("sel_right");
                //给div设置文本内容
                setText();

                //给按钮添加点击事件
                document.getElementById("but_to_right").onclick=function(){
                    //左边被选中的到右边去
                    var collLeft=oselLeft.getElementsByTagName("option");
                    for(var i=0;i<collLeft.length;i++){
                        if(collLeft[i].selected){
                            //取消其选中状态
                            collLeft[i].selected=false;
                            oselRight.appendChild(collLeft[i]);
                            i--;
                        }
                    }
                    setText();
                }  

                document.getElementById("but_to_left").onclick=function(){
                    //右边被选中的到左边去
                    var collRight=oselRight.getElementsByTagName("option");
                    for(var i=0;i<collRight.length;i++){
                        if(collRight[i].selected){
                            //取消其选中状态
                            collRight[i].selected=false;
                            oselLeft.appendChild(collRight[i]);
                            i--;
                        }
                    }
                    setText();
                }  

                document.getElementById("but_all_to_right").onclick=function(){
                    //左边所有的到右边去
                    var collLeft=oselLeft.getElementsByTagName("option");
                    for(var i=0;i<collLeft.length;i++){
                        //取消其选中状态
                        collLeft[i].selected=false;
                        oselRight.appendChild(collLeft[i]);
                        i--;
                    }
                    setText();
                } 
                document.getElementById("but_all_to_left").onclick=function(){
                    //右边的都到左边去
                    var collRight=oselRight.getElementsByTagName("option");
                    for(var i=0;i<collRight.length;i++){
                        //取消其选中状态
                        collRight[i].selected=false;
                        oselLeft.appendChild(collRight[i]);
                        i--;
                    }
                    setText();
                }  				  
            }
            function setText(){
                //获取左边的所有的option的文本内容 写到div1left中
                var collLeft=oselLeft.getElementsByTagName("option");
                var collRight=oselRight.getElementsByTagName("option");
                var stextLeft="",stextRight="";
                for(var i=0;i<collLeft.length;i++){
                    stextLeft+=collLeft[i].innerText+" ";
                }
                for(var i=0;i<collRight.length;i++){
                    stextRight+=collRight[i].innerText+" ";
                }
                document.getElementById("div1left").innerHTML=stextLeft.bold().fontcolor("red");
                document.getElementById("div1right").innerHTML=stextRight.bold().fontcolor("blue");
            }
        </script>
    </body>
</html>

简便写法

<html>
    <head>  
        <title>下拉列表练习2</title>
        <meta charset="gbk"/>
        <style type="text/css">
            div{
                border:1px solid;
                padding:10px;
            }
            #div0{
                margin:50px auto;
                width:1600px;
                height:700px;
            }
            #div1left,#div1right{
                width:300px;
                height:200px;
                margin-top:50px;
            }
            #div1left{
                margin-left:300px;
                float:left;
            }
            #div1right{
                float:right;
                margin-right:300px;
            }
            #div2{
                clear:both;
                width:1200px;
                height:350px;
                margin:100px auto;
            }
            #div2 div{
                width:150px;
                height:300px;
                float:left;
                margin:20px 110px;
            }
            select{
                font-size:24px;
                font-weight:bold;
                color:blue;
            }
            #div2middle input{
                width:140px;
                height:50px;
                margin:11px auto;
                background-image:url("button.png");
            }
            #but_to_right{
                background-position:33% 3%;
            }
            #but_all_to_right{
                background-position:33% 28%;
            }
            #but_to_left{
                background-position:35% 55%;
            }
            #but_all_to_left{
                background-position:35% 86%;
            }
        </style>
    </head>
    <body> 
        <div id="div0">
            <div id="div1left">
            </div>
            <div id="div1right">
            </div>
            <div id="div2">
                <div id="div2left">
                    <select id="sel_left" size="8" multiple="true">
                        <option>选项0011</option>
                        <option>选项0012</option>
                        <option>选项0013</option>
                        <option>选项0014</option>
                        <option>选项0015</option>
                        <option>选项0016</option>
                        <option>选项0017</option>
                        <option>选项0018</option>
                    </select>
                </div>
                <div id="div2middle">
                    <input type="button" id="but_to_right"/>
                    <input type="button" id="but_all_to_right"/>
                    <input type="button" id="but_to_left"/>
                    <input type="button" id="but_all_to_left"/>
                </div>
                <div id="div2right">
                    <select id="sel_right" size="8" multiple="true">
                    </select>
                </div>
            </div>
        </div>
        <script  type="text/javascript">
            var oselLeft,oselRight;
            //文档加载成功 给按钮添加点击事件
            window.onload=function(){
                //给全局变量赋值
                oselLeft=document.getElementById("sel_left");
                oselRight=document.getElementById("sel_right");
                //给div设置文本内容
                setText();

                //给按钮添加点击事件
                document.getElementById("but_to_right").onclick=function(){
                    change(oselLeft,oselRight,false);
                }  

                document.getElementById("but_to_left").onclick=function(){
                    change(oselRight,oselLeft,false);
                }  

                document.getElementById("but_all_to_right").onclick=function(){
                    change(oselLeft,oselRight,true);
                } 
                document.getElementById("but_all_to_left").onclick=function(){
                    change(oselRight,oselLeft,true);
                }  				  
            }
            function setText(){
                //获取左边的所有的option的文本内容 写到div1left中
                var collLeft=oselLeft.getElementsByTagName("option");
                var collRight=oselRight.getElementsByTagName("option");
                var stextLeft="",stextRight="";
                for(var i=0;i<collLeft.length;i++){
                    stextLeft+=collLeft[i].innerText+" ";
                }
                for(var i=0;i<collRight.length;i++){
                    stextRight+=collRight[i].innerText+" ";
                }
                document.getElementById("div1left").innerHTML=stextLeft.bold().fontcolor("red");
                document.getElementById("div1right").innerHTML=stextRight.bold().fontcolor("blue");
            }
            function change(oselFrom,oselTo,b){
                var collOption=oselFrom.getElementsByTagName("option");
                for(var i=0;i<collOption.length;i++){
                    if(b||collOption[i].selected){
                        //取消其选中状态
                        collOption[i].selected=false;
                        oselTo.appendChild(collOption[i]);
                        i--;
                    }
                }
                setText();
            }
        </script>
    </body>
</html>

5 表格操作

已有方法：create+remove

<html>
    <head>
        <title>js表格操作</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            table{
                width:900px;
                border:1px solid blue;
                margin:10px auto;
                border-collapse:collapse;/*合并相邻单元格之间的边框*/
            }
            td{
                font-size:24px;
                padding:10px;
                border:1px solid blue;
                text-align:center;
            }
            div{
                border:1px solid blue;
                width:1000px;
                margin:10px auto;
                padding:10px;
                font-size:18px;
            }
            .cla1{
                background-color:#cccccc;
            }
            .cla0{
                background-color:#aa99cc;
            }
        </style>
    </head>
    <body>  
        <div id="div1">

        </div>
        <div id="div2">
            行：<input type="text" name="text_create_hang" value="5"/><br/>
            列：<input type="text" name="text_create_lie" value="5"/>
            <input  value="创建表格" type="button" id="but_create"/><br/>
            <HR/>
            行：<input type="text" name="text_delete_hang" value="5"/>
            <input  value="删除表格行" type="button" id="but_delete_hang"/>
            <br/>
            列：<input type="text" name="text_delete_lie" value="5"/>
            <input  value="删除表格列" type="button" id="but_delete_lie"/><br/>
        </div>
        <!---->
        <script type="text/javascript">
            //文档加载成功给but_create注册点击事件
            window.onload=function(){
                document.getElementById("but_create").onclick=createTable;
                document.getElementById("but_delete_hang").onclick=deleteHang;
                document.getElementById("but_delete_lie").onclick=deleteLie;
            }
            //删除列
            function deleteLie(){
                //获取table
                var otab=document.getElementById("tab");
                if(!otab){
                    alert("表格不存在！你删啥？");return;
                }
                //获取text_delete_lie的值
                var vlie=document.getElementsByName("text_delete_lie")[0].value;
                var ilie=parseInt(vlie);
                if(isNaN(ilie)||ilie<=0){
                    alert("列数："+vhang+" 不合法！");return;
                }
                //获取表格的总行数
                var collTr=otab.getElementsByTagName("tr");
                if(!collTr||collTr[0].getElementsByTagName("td").length<ilie){
                    alert("列数："+vlie+" 大于table的总列数：：无法删除！");return;
                }
                //删除列：只能一行一行的删除
                for(var i=0;i<collTr.length;i++){
                    collTr[i].removeChild(collTr[i].getElementsByTagName("td")[ilie-1]);
                }	
                geHangBianSe();
            }
            //删除行
            function deleteHang(){
                //获取table
                var otab=document.getElementById("tab");
                if(!otab){
                    alert("表格不存在！你删啥？");return;
                }
                //获取text_delete_hang的值
                var vhang=document.getElementsByName("text_delete_hang")[0].value;
                var ihang=parseInt(vhang);
                if(isNaN(ihang)||ihang<=0){
                    alert("行数："+vhang+" 不合法！");return;
                }
                //获取表格的总行数
                var collTr=otab.getElementsByTagName("tr");
                if(collTr.length<ihang){
                    alert("行数："+vhang+" 大于table的总行数：：无法删除！");return;
                }
                otab.removeChild(collTr[ihang-1]);
                geHangBianSe();
            }
            //创建表格
            function createTable(){
                //获取text_create_hang和text_create_lie的值
                var vhang=document.getElementsByName("text_create_hang")[0].value;
                var vlie=document.getElementsByName("text_create_lie")[0].value;
                var ihang=parseInt(vhang);
                var ilie=parseInt(vlie);
                if(isNaN(ihang)||ihang<=0){
                    alert("行数："+vhang+" 不合法！");return;
                }
                if(isNaN(ilie)||ilie<=0){
                    alert("列数："+vlie+" 不合法！");return;
                }
                //清空div1
                document.getElementById("div1").innerHTML="";
                //div1创建表格：
                var otab=document.createElement("table");
                otab.id="tab";
                for(var i=0;i<ihang;i++){
                    var otr=document.createElement("tr");//创建行
                    for(var j=0;j<ilie;j++){
                        var otd=document.createElement("td");//创建单元格
                        otd.innerText=i+":"+j;
                        otr.appendChild(otd);
                    }
                    otab.appendChild(otr);
                }
                //table添加到div中
                document.getElementById("div1").appendChild(otab);
                geHangBianSe();
            }
            function geHangBianSe(){
                //获取table
                var otab=document.getElementById("tab");
                var collTr=otab.getElementsByTagName("tr");
                for(var i=0;i<collTr.length;i++){
                    collTr[i].className="cla"+i%2;
                }
            }
        </script>
    </body>
</html>

特有方法：insert+delete

<html>
    <head>
        <title>js表格操作2</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            table{
                width:900px;
                border:1px solid blue;
                margin:10px auto;
                border-collapse:collapse;/*合并相邻单元格之间的边框*/
            }
            td{
                font-size:24px;
                padding:10px;
                border:1px solid blue;
                text-align:center;
            }
            div{
                border:1px solid blue;
                width:1000px;
                margin:10px auto;
                padding:10px;
                font-size:18px;
            }
            .cla1{
                background-color:#cccccc;
            }
            .cla0{
                background-color:#aa99cc;
            }
        </style>
    </head>
    <body>  
        <div id="div1">

        </div>
        <div id="div2">
            行：<input type="text" name="text_create_hang" value="5"/><br/>
            列：<input type="text" name="text_create_lie" value="5"/>
            <input  value="创建表格" type="button" id="but_create"/><br/>
            <HR/>
            行：<input type="text" name="text_delete_hang" value="5"/>
            <input  value="删除表格行" type="button" id="but_delete_hang"/>
            <br/>
            列：<input type="text" name="text_delete_lie" value="5"/>
            <input  value="删除表格列" type="button" id="but_delete_lie"/><br/>
        </div>
        <!---->
        <script type="text/javascript">
            /*
			   table中的特有属性：rows :获取所有的行
			   tr中特有的属性：cells   :获取本行的所有单元格
			   table中特有的方法：oTR = object.insertRow( [iIndex]) :添加行
			                      object.deleteRow( [iRowIndex])：删除行
			   tr中特有的方法：oTD = TR.insertCell( [iIndex])：添加单元格
			                   TR.deleteCell( [iIndex])：删除单元格

			   */
            //文档加载成功给but_create注册点击事件
            window.onload=function(){
                document.getElementById("but_create").onclick=createTable;
                document.getElementById("but_delete_hang").onclick=deleteHang;
                document.getElementById("but_delete_lie").onclick=deleteLie;
            }
            //删除列
            function deleteLie(){
                //获取table
                var otab=document.getElementById("tab");
                if(!otab){
                    alert("表格不存在！你删啥？");return;
                }
                //获取text_delete_lie的值
                var vlie=document.getElementsByName("text_delete_lie")[0].value;
                var ilie=parseInt(vlie);
                if(isNaN(ilie)||ilie<=0){
                    alert("列数："+vhang+" 不合法！");return;
                }
                //获取表格的总行数
                var collTr=otab.getElementsByTagName("tr");
                if(!collTr||collTr[0].getElementsByTagName("td").length<ilie){
                    alert("列数："+vlie+" 大于table的总列数：：无法删除！");return;
                }
                //删除列：只能一行一行的删除
                for(var i=0;i<collTr.length;i++){
                    //collTr[i].removeChild(collTr[i].getElementsByTagName("td")[ilie-1]);
                    collTr[i].deleteCell(ilie-1);
                }	
                geHangBianSe();
            }
            //删除行
            function deleteHang(){
                //获取table
                var otab=document.getElementById("tab");
                if(!otab){
                    alert("表格不存在！你删啥？");return;
                }
                //获取text_delete_hang的值
                var vhang=document.getElementsByName("text_delete_hang")[0].value;
                var ihang=parseInt(vhang);
                if(isNaN(ihang)||ihang<=0){
                    alert("行数："+vhang+" 不合法！");return;
                }
                //获取表格的总行数
                var collTr=otab.getElementsByTagName("tr");
                if(collTr.length<ihang){
                    alert("行数："+vhang+" 大于table的总行数：：无法删除！");return;
                }
                //otab.removeChild(collTr[ihang-1]);
                otab.deleteRow(ihang-1);
                geHangBianSe();
            }
            //创建表格
            function createTable(){
                //获取text_create_hang和text_create_lie的值
                var vhang=document.getElementsByName("text_create_hang")[0].value;
                var vlie=document.getElementsByName("text_create_lie")[0].value;
                var ihang=parseInt(vhang);
                var ilie=parseInt(vlie);
                if(isNaN(ihang)||ihang<=0){
                    alert("行数："+vhang+" 不合法！");return;
                }
                if(isNaN(ilie)||ilie<=0){
                    alert("列数："+vlie+" 不合法！");return;
                }
                //清空div1
                document.getElementById("div1").innerHTML="";
                //div1创建表格：
                var otab=document.createElement("table");
                otab.id="tab";
                for(var i=0;i<ihang;i++){
                    //var otr=document.createElement("tr");//创建行
                    var otr=otab.insertRow();
                    for(var j=0;j<ilie;j++){
                        //var otd=document.createElement("td");//创建单元格
                        var otd=otr.insertCell();
                        otd.innerText=i+":"+j;
                    }
                }
                //table添加到div中
                document.getElementById("div1").appendChild(otab);
                geHangBianSe();
            }
            function geHangBianSe(){
                //获取table
                var otab=document.getElementById("tab");
                var collTr=otab.getElementsByTagName("tr");
                for(var i=0;i<collTr.length;i++){
                    collTr[i].className="cla"+i%2;
                }
            }
        </script>
    </body>
</html>

6 打地鼠

<html>
    <head>
        <title>js打地鼠</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            #div0{
                background-image:url("images\\bg.jpg");
                background-position:30% 0%;
            }
            table{
                border:1px solid blue;
                margin:10px auto;
                border-collapse:collapse;/*合并相邻单元格之间的边框*/
            }
            td,th{
                padding:10px;
                border:1px solid blue;
                text-align:center;

            }
            div{
                border:1px solid blue;
                padding:10px;
                text-align:center;
            }
            #div0{
                width:1000px;
                height:600px;
                margin:100px auto;
            }
            #div_top{
                width:600px;
                height:100px;
                margin:10px auto;
            }
            #div_left{
                width:280px;
                height:280px;
                float:left;
                text-align:center;
                margin-left:100px;
                margin-top:80px;
            }
            #div_left table{
                width:260px;
                height:260px;
            }
            #div_left input{
                width:50px;
            }
            #div_right{
                width:400px;
                height:400px;
                float:right;
                margin-right:70px;
                margin-top:20px;
            }
            #div_top p{
                margin:0px;
                text-align:right;
                color:blue;
                font-weight:bold;
            }
            #tab_game{
                width:380px;
                height:380px;

            }
            #tab_game td{
                /*background-image:url("images\\00.jpg");*/
            }
        </style>
    </head>
    <body>  
        <div id="div0">
            <div id="div_top">
                游戏说明:<br/>
                点击“开始游戏”按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，
                打中一次即可获得100的积分，没有打中老鼠，扣取100积分。快快行动吧，考验您的
                反应和眼力！<br/>
                <p>作者：xxx</p>
            </div>
            <div id="div_left">
                <table>
                    <tr>
                        <th>--游戏时间:--</th>
                        <td style="width:100px;"><input type="text" value="1" name="text_total_time"/>分</td>
                    </tr>
                    <tr>
                        <th>--出现间隔:--</th>
                        <td><input type="text" value="1" name="text_hide_time"/>秒</td>
                    </tr>
                    <tr>
                        <th>--停留时间:--</th>
                        <td><input type="text" value="1" name="text_show_time"/>秒</td>
                    </tr>
                    <tr>
                        <th>--时间倒计:--</th>
                        <td><span id="span_djs"></span></td>
                    </tr>
                    <tr>
                        <th>--得分情况:--</th>
                        <td style="text-align:left;"><span id="span_score"></span></td>
                    </tr>
                    <tr>
                        <th>
                            <input type="button" value="开始" onclick="startGame()" id="but_start"/>
                        </th>
                        <th>
                            <input type="button" value="结束" onclick="stopGame()" id="but_stop"/>
                        </th>
                    </tr>
                </table>
            </div>
            <div id="div_right">
                <table id="tab_game"></table>
            </div>
        </div>

        <script  type="text/javascript">
            //定义全局变量：
            var collTd=[];//定义数组装所有的td
            var tdMouse;//定义变量记录显示老鼠的单元格
            var itotalTime,ishowTime,ihideTime,idjs;
            var itotal=0,iget=0;
            var idRandomMouse,idHide,idDjs;//定义变量记录 延迟执行的id
            //文档加载成功给tab_game中添加单元格
            window.onload=function(){
                createTd();
                //开始按钮可用 结束按钮不可用
                changeDisabled(false);
            }
            //创建单元格
            function createTd(){
                var otab=document.getElementById("tab_game");
                for(var i=0;i<6;i++){
                    var otr=otab.insertRow();//添加行
                    for(var j=0;j<6;j++){
                        var otd=otr.insertCell();
                        otd.innerText=" ";
                        otd.style.backgroundImage="url(images/00.jpg)";
                        otd.onclick=tdClick;
                        collTd.push(otd);
                    }
                }
            }
            //td被点击
            function tdClick(){
                //判断点击的单元格是不是tdMouse
                if(this==tdMouse&&this.style.backgroundImage.indexOf("01.jpg")!=-1){
                    iget++;
                    //更改背景图片为
                    this.style.backgroundImage="url(images/02.jpg)";
                }
            }
            //结束游戏
            function stopGame(){
                window.clearInterval(idRandomMouse);
                window.clearTimeout(idHide);
                window.clearInterval(idDjs);
                //开始按钮可用 结束按钮不可用
                changeDisabled(false);
                //更改被点击td的背景图片为00
                tdMouse.style.backgroundImage="url(images/00.jpg)";
            }
            //更改按钮的样式：是否可用点击
            function changeDisabled(b){
                document.getElementById("but_start").disabled=b;
                document.getElementById("but_stop").disabled=!b;
            }
            function startGame(){
                //开始按钮不可用 结束按钮可用
                changeDisabled(true);
                itotal=0;
                iget=0;
                //获取itotalTime,ishowTime,ihideTime,idjs的值
                itotalTime=parseInt(document.getElementsByName("text_total_time")[0].value)*60;
                ishowTime=parseInt(document.getElementsByName("text_show_time")[0].value);
                ihideTime=parseInt(document.getElementsByName("text_hide_time")[0].value);
                idjs=itotalTime;
                //每隔一秒钟idjs--
                idDjs=window.setInterval(countScore,1000);
                //每隔一个周期 随机一个显示老鼠的表格
                randomTd();
                idRandomMouse=window.setInterval(randomTd,(ishowTime+ihideTime)*1000);
            }
            function countScore(){
                idjs--;
                //设置span_djs的文本内容
                document.getElementById("span_djs").innerHTML=(idjs+"秒").bold().fontcolor("red");
                //设置span_score的文本内容
                document.getElementById("span_score").innerHTML=("共:"+itotal+",赢:"+iget).bold().fontcolor("red");
                if(idjs<=0){
                    stopGame();
                }
            }

            //随机单元格 显示老鼠
            function randomTd(){
                itotal++;
                var index=parseInt(Math.random()*collTd.length);
                tdMouse=collTd[index];
                //更改背景图片
                tdMouse.style.backgroundImage="url(images/01.jpg)";
                //等待ishowTime结束 就需要隐藏
                idHide=window.setTimeout(
                    "tdMouse.style.backgroundImage=\'url(images/00.jpg)\'",
                    ishowTime*1000
                );
            }
        </script>
    </body>
</html>