注冊頁面一 · APP模塊

## 注冊頁面一 ![](https://box.kancloud.cn/2016-08-25_57be75a04a460.png) 代碼如下： demo_form_win.html ``` <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>Hello APP</title> <link rel="stylesheet" type="text/css" href="../../../css/aui-win.css" /> </head> <body> <header class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header"> <a class="aui-btn aui-btn-warning aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title">表單</div> <a class="aui-iconfont aui-icon-menu aui-pull-right"></a> </header> </body> <script type="text/javascript" src="../../../script/api.js"></script> <script type="text/javascript"> function closeWin(){ api.closeWin(); } apiready = function(){ api.parseTapmode(); var header = $api.byId('aui-header'); $api.fixStatusBar(header); var headerPos = $api.offset(header); var body_h = $api.offset($api.dom('body')).h; api.openFrame({ name: 'demo_form_frm', url: 'demo_form_frm.html', bounces: true, rect: { x: 0, y: headerPos.h, w: headerPos.w, h: 'auto' } }) }; </script> </html> ``` demo_form_frm.html ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>APP</title> <link rel="stylesheet" type="text/css" href="../../../css/aui.css" /> <style type="text/css"> .aui-card { margin-top: 15px; } .aui-input-addon.aui-iconfont { font-size: 20px !important; } .aui-input-row { width: 100% !important; } </style> </head> <body> <div class="aui-content aui-card"> <div class="aui-form"> <div class="aui-input-row"> <i class="aui-input-addon aui-iconfont aui-icon-people aui-text-info"></i> <input type="text" class="aui-input" placeholder="用戶名"/> </div> <div class="aui-input-row"> <i class="aui-input-addon aui-iconfont aui-icon-lock aui-text-warning"></i> <input type="password" id="password" class="aui-input" placeholder="密碼"/> <i class="aui-input-addon aui-iconfont aui-icon-attention aui-text-default" tapmode onclick="showPassword();" id="showpass-btn"></i> </div> <div class="aui-input-row"> <i class="aui-input-addon aui-iconfont aui-icon-lock aui-text-warning"></i> <input type="password" class="aui-input" placeholder="確認密碼"/> </div> <div class="aui-input-row"> <input type="number" class="aui-input" id="code" placeholder="請輸入收到的驗證碼"/> <span class="aui-input-addon"> <div class="aui-btn" id="sendVerify" status="1" tapmode onclick="getVerify()">獲取驗證碼</div> </span> </div> <div class="aui-btn-row"> <div class="aui-btn aui-btn-block aui-btn-warning" onclick="return false;">確認</div> </div> </div> </div> </body> <script type="text/javascript" src="../../../script/api.js" ></script> <script type="text/javascript"> var isinerval,times; apiready = function () { api.parseTapmode(); } function showPassword(){ $api.attr($api.byId('password'),'type','text'); $api.removeCls($api.byId('showpass-btn'),'aui-icon-attention'); $api.addCls($api.byId('showpass-btn'),'aui-icon-attentionfill'); $api.attr($api.byId('showpass-btn'),'onclick','hidePassword();'); api.parseTapmode(); } function hidePassword(){ $api.attr($api.byId('password'),'type','password'); $api.removeCls($api.byId('showpass-btn'),'aui-icon-attentionfill'); $api.addCls($api.byId('showpass-btn'),'aui-icon-attention'); $api.attr($api.byId('showpass-btn'),'onclick','showPassword();'); api.parseTapmode(); } function getVerify() { var sendVerify = $api.byId('sendVerify'); var status = $api.attr(sendVerify,'status'); if(status!=1){ return; } $api.removeAttr(sendVerify,'onclick'); api.parseTapmode(); $api.html(sendVerify,'<span id="GetVerify">120</span>S'); times = 119; isinerval = setInterval("CountDown()", 1000); setTimeout(function(){ $api.val($api.byId("code"),'888888'); },500) } function CountDown() { if (times < 1) { var sendVerify = $api.byId('sendVerify'); $api.attr(sendVerify,'onclick','get_verify()'); $api.attr(sendVerify,'status','1'); api.parseTapmode(); $api.html(sendVerify,'重新獲取'); clearInterval(isinerval); return; } var getVerify = $api.byId('GetVerify'); $api.html(getVerify,''+times+''); times--; } </script> </html> ```