起始预定义函数
1 function $(obj) 2 { 3 return document.getElementById(obj); 4 }
1.用户登陆框架
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 5 <title>TBUSF System</title> 6 <script type="text/javascript" src="./html_api.js"></script> 7 8 </head> 9 10 <body style="background-color:gray;padding: 20px;"> 11 12 <!--页面标题--> 13 <h1 style="text-align:center;color:yellow">welcome to TBUSF System</h1><br /> 14 15 <!--用户登陆--> 16 <p1 style="color:black">User Name:</p1><br /> 17 <input id="user_id" tyle="text-align:center" type="text" name="username"><br /> 18 <p1 style="color:black">Code:</p1><br /> 19 <input id="code_id" type="text" name="code"> 20 <br><br> 21 22 <!--点击进入下一个页面--> 23 <input style="font-size:15px;" type="button" onclick="jump_page('user_id','code_id')" value="next page->"> 24 25 </body> 26 </html>
./html_api.js(点击登陆所调用函数)：
1 function jump_page(id_x,id_y) 2 { 3 try 4 { 5 x=$(id_x).value; 6 y=$(id_y).value; 7 if (x == '刘洋' && y == '1992') 8 n =2; 9 else 10 n = 3; 11 switch (n) 12 { 13 case 1: 14 window.open('https://www.baidu.com'); 15 break; 16 case 2: 17 window.location.href='file:///D:/我的文档/Programs/Html/web/System_display.html'; 18 break 19 default: 20 alert("fail"); 21 } 22 } 23 catch(err) 24 { 25 txt = err.message 26 alert(txt); 27 } 28 }
2. 按钮点击，切换相应显示值框架
1 <input type="button" id="modulation" value="ID" onclick="clickChange('modulation', 'ID', 'ID_change', 'modulation_display')"> 2 <p id="modulation_display"></p>
./html_api.js(点击登陆所调用函数)：
function clickChange(id_name, value_1, value_2, id_display) { try { if ($(id_name).value == value_1) $(id_name).value = value_2; else if ($(id_name).value == value_2) $(id_name).value = value_1; else alert("id值有误"); if ( $(id_name).value == value_1 ) $(id_display).innerHTML = "ID"; else if ( $(id_name).value == value_2 ) $(id_display).innerHTML = "id_display"; else $(id_display).innerHTML = "error"; } catch(err) { txt = err.message alert(txt); } }