使用文档对象在页面上创建学生信息表。信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址，信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符，每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   
   <body style="text-align: center; background:url(img/3.1.jpg);background-size: 100%;">
       <div style="padding-top: 20px; font-family: ‘楷体‘;">
       <form >
           学    号：<input type="text" id="userName" ><br><br>
           姓    名：<input type="text" id="userPass"><br><br>
           性    别：
            男<input type="radio" name="xingbie" value="男">
             女<input type="radio" name="xingbie" value="女">    <br><br>
           电子邮箱：<input type="text" id="Email" ><br><br>
           联系电话：<input type="text" id="photo" ><br><br>
           个人主页：<input type="text" id="net" ><br><br>
           联系地址：<br>
           <textarea id="ztext" style="width: 220px;"></textarea><br><br>
           <input style="width: 230px;" type="button" value="提交" onclick="doSubmit()">
       </form>
       <br><br>
       <table style="-moz-user-select:none; width:500px;" border="0" align="center" id="TableA">
           <thead>
           <tr>
           <td>学号</td><td>姓名</td><td>性别</td><td>电子邮箱</td><td>联系电话</td><td>个人主页</td><td>联系地址</td>
           </tr>
           </thead>
       </table>
       </div>
       <script>
//获取ID值
           var Email=document.getElementById("Email")
           var photo=document.getElementById("photo")
           var net=document.getElementById("net")
           var ztext=document.getElementById("ztext")
           var userName=document.getElementById("userName")
           var userPass=document.getElementById("userPass")
//添加表格
           var a=true;

       function doSubmit(){
           yz();
           if(a==true){
           var radio = document.getElementsByName("xingbie");
           var row = document.getElementById("TableA").insertRow();
           if(row!=null){
           cell=row.insertCell();
           cell.innerHTML=userName.value;
           cell = row.insertCell();
           cell.innerHTML=userPass.value;
           cell=row.insertCell();
           for (i=0; i<radio.length; i++) {
               if (radio[i].checked) {
                    cell.innerHTML=radio[i].value
               }
           }
           cell = row.insertCell();
           cell.innerHTML=Email.value;
           cell = row.insertCell();
           cell.innerHTML=photo.value;
           cell = row.insertCell();
           cell.innerHTML=net.value;
           cell = row.insertCell();
           cell.innerHTML=ztext.value;
           }
           }
           qk();

       }

       onload=qk()


       function qk(){
           if(a==true){
           userName.value="";
           userPass.value=""
           Email.value=""
           photo.value=""
           net.value=""
           ztext.value=""
           }
       }
//验证
       function yz(){
           var pat=/^[\u4E00-\u9FA5]{0,20}$/;
           if(pat.test(ztext.value)==false){
               alert("地址不得超过20个汉字！！");
               a=false;
           }
       }
//雪花特效
       var num=15;
       x= new Array();
       y= new Array();
       doc_width=document.documentElement.clientWidth;
       doc_height=document.documentElement.clientHeight;
       for(i=0; i<num; i++){
           x[i]=Math.random()*(doc_width-50);
           y[i]=Math.random()*doc_height;
           str="<img src=‘img/snow.png‘ style=‘position:absolute; height:20px;width:20px";
           str+="top:"+y[i]+"px;left:"+x[i]+"px;‘id=‘dot"+i+"‘>"
           document.write(str);
       }
       function snow(){
           for(i=0;i<num;i++){
               x[i]+=Math.random()*3;
               x[i]-=Math.random()*3;
               y[i]+=5;
               if(y[i]>(doc_height-50))
               {
                   y[i]=-20;
               }
               document.all["dot"+i].style.top=y[i]+"px";
               document.all["dot"+i].style.left=x[i]+"px";
           }
           setTimeout("snow()",10);
       }
       snow();

       </script>
   </body>
</html>

时间： 2024-12-26 05:53:25

数组对象元素的添加，String对象，BOM对象以及文档对象的获取

PDF文档怎么交换页面，你知道哪种方法简单吗？

第一百一十三节，JavaScript文档对象，DOM基础

怎样获取从服务器返回的xml或html文档对象

第一百一十四节，JavaScript文档对象，DOM进阶

ABP文档 - 对象与对象之间的映射

document文档对象

文档对象DOM的操作及使用

python docx文档转html页面