HTML功能框架

起始预定义函数

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);
    }
}