日夜不得闲

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

打打代码 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script>
  7         function focus_username()
  8         {
  9             document.getElementById("user_res").innerHTML = "<font color='#f00'>请输入用户名</font>";
 10         }
 11         function blur_username()
 12         {
 13             var user_value = document.getElementsByName("username")[0].value;
 14             if(user_value.length === 0)
 15             {
 16                 document.getElementById("user_res").innerHTML = "<font color='#f00'>您没有输入用户名</font>";
 17                 return false;
 18             }
 19             else if(user_value.length < 5 || user_value.length > 18)
 20             {
 21                 document.getElementById("user_res").innerHTML = "<font color='#f00'>用户名长度必须在5~18位之间</font>";
 22                 return false;
 23             }
 24             else if(!checkUser(user_value))
 25             {
 26                 document.getElementById("user_res").innerHTML = "<font color='#f00'>用户名中含特殊符号</font>";
 27                 return false;
 28             }
 29             else
 30             {
 31                 document.getElementById("user_res").innerHTML = "<font color='#00f'>用户名合法</font>";
 32                 return true;
 33             }
 34         }
 35             function focus_password()
 36             {
 37                 document.getElementById("pass_res").innerHTML = "<font color='#00f'>请输入密码</font>";
 38             }
 39 
 40             function blur_password()
 41             {
 42                 var pass_value = document.getElementsByName("password")[0].value;
 43                 if(pass_value.length === 0)
 44                 {
 45                     document.getElementById("pass_res").innerHTML = "<font color='#f00'>您没有输入密码</font>";
 46                     return false;
 47                 }
 48                 else if(pass_value.length < 5 || pass_value.length > 18)
 49                 {
 50                     document.getElementById("pass_res").innerHTML = "<font color='#f00'>用户名长度必须在5~18位之间</font>";
 51                     return false;
 52                 }
 53                 else
 54                 {
 55                     document.getElementById("pass_res").innerHTML = "<font color='#f00'>密码合法</font>";
 56                     return true;
 57                 }    
 58             }
 59 
 60         function checkUser(user)
 61         {
 62             var arr = ["<",">","#","?","%","!","~","^","&","$"];
 63             var arr_length = arr.length;
 64             var user_length = user.length;
 65             
 66             for(var i=0;i<arr_length;i++)
 67             {
 68                 for(var j=0;j<user_length;j++)
 69                 {
 70                     if(arr[i] === user.charAt(j))
 71                     {
 72                         return false;
 73                     }
 74                 }
 75             }
 76             return true;
 77         }
 78 
 79         function checkForm()
 80         {
 81             var user_flag = blur_username();
 82             var pass_flag = blur_password();
 83             if(user_flag && pass_flag)
 84             {
 85                 alert("表单验证通过");
 86                 return true;
 87             }
 88             else
 89             {
 90                 alert("表单验证不通过");
 91                 return false;
 92             }
 93         }
 94     </script>
 95 </head>
 96 <body>
 97     <form name='form1' onsubmit='return checkForm()' action='index.php'>
 98         <table width='600' align='center'>
 99             <tr>
100                 <td align='right' width='150'>用户名:</td>
101                 <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>
102                 <td><span id="user_res"></span></td>
103             </tr>
104             <tr>
105                 <td align='right' width='100'>密码:</td>
106                 <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>
107                 <td><span id="pass_res"></span></td>
108             </tr>
109             <tr>
110                 <td></td>
111                 <td><input type='submit' value='提交' /></td>
112             </tr>
113         </table>
114     </form>
115 
116     
117 </body>
118 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7         /*setAttribute 添加、修改
 8                  增加、修改标记的属性 
 9          要操作的对象.setAttribute(“属性名”,”属性值”)
10          查询|查找标记的属性
11          要操作的对象.getAttribute(“要获取的属性名”)
12          删除标记的属性名
13          要操作的对象.removeAttribute(“要移除的属性名”)*/
14         function setAttr(){
15             //定义一个对象img_obj
16             var img_obj = document.getElementsByTagName("img")[0];
17             //为img  添加     title-属性 ,衣服-属性值
18             img_obj.setAttribute("title", "衣服");
19         }
20         //getAttribute 获取img
21         function getAttr(){
22             var img_obj = document.getElementsByTagName("img")[0];
23                 console.log(img_obj.getAttribute("title"));
24         }
25         //removeAttribute 移除
26         function delAttr(){
27             //在img标签后面添加一个元素
28             var img_obj = document.getElementsByTagName("img")[0];
29             //移除img里面的title属性名
30                 img_obj.removeAttribute("title");
31         }
32 
33     </script>
34 </head>
35 <body>
36     <img src="images/02.jpg"><br>
37     <button onclick="setAttr()">setAttr</button>
38     <button onclick="getAttr()">getAttr</button>
39     <button onclick="delAttr()">delAttr</button>
40 </body>
41 </html>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <table width="500" align="center" border="1">
 9         <tbody>
10             <tr>
11                 <td>序号</td>
12                 <td>新闻标题</td>
13                 <td>操作</td>
14             </tr>
15             <tr id="tr_1">
16                 <td>1</td>
17                 <td>大新闻</td>
18                 <td><button onclick="delTr(this)" id="1">删除</button></td>
19             </tr>
20             <tr id="tr_2">
21                 <td>2</td>
22                 <td>有新闻</td>
23                 <td><button onclick="delTr(this)" id="2">删除</button></td>
24             </tr>
25             <tr id="tr_3">
26                 <td>3</td>
27                 <td>环球新闻</td>
28                 <td><button onclick="delTr(this)" id="3">删除</button></td>
29             </tr>
30         </tbody>
31     </table>
32     <script type="text/javascript">
33         function delTr(obj){
34             //获得当前对象的ID属性值
35             var sysid = obj.id;
36             //构建一个和tr的ID的属性值，一样的字符串
37             var tr_id = "tr_"+sysid;
38             //通过tr的id属性值将tr标签对象获取到
39             var tr_obj = document.getElementById(tr_id);
40             tr_obj.parentNode.removeChild(tr_obj);
41         }
42     </script>
43 </body>
44 </html>

 

posted on 2016-12-13 22:35  日夜不得闲  阅读(172)  评论(0)    收藏  举报