基于zepto.js實現(xiàn)登錄界面
更新時間:2017年10月09日 11:06:45 作者:GISuuser
這篇文章主要為大家詳細介紹了使用zepto.js,純JS寫的登錄界面,具有一定的參考價值,感興趣的小伙伴們可以參考一下
最近使用Zepto.js寫的登陸界面,純js界面,留下來,以后再寫登陸可以直接使用了。
下面是效果圖
直接再html中先引入zepto.js的庫,再插入下面的代碼就可以實現(xiàn)了
createLoginArea(); function createLoginArea() { var field = $('<fieldset />'); field.css({ position:'absolute', width:'60vmin', height:'40vmin', border: '1px solid #61B5CF' }); field.css('border-radius','1vmin'); var legend = $('<legend />'); legend.text("登陸"); var ul = $('<ul />'); ul.css('list-style','none'); ul.css('text-align','center'); ul.css({ width: '100%', height: '100%', margin: '0', display: 'inline' }).css('padding-top', '5%') .css('box-sizing', 'border-box'); var nameLi = $('<li />',{class:'loginLi'}); var nameDiv=$('<div />',{class:'textDiv'}); nameDiv.text("用戶名"); var nameInput=$('<input />',{class:"input",type:"text",placeholder:"請輸入用戶名"}); nameLi.append(nameDiv); nameLi.append(nameInput); var passwordLi = $('<li />',{class:'loginLi'}); var passWordDiv=$('<div />',{class:'textDiv'}); passWordDiv.text("密碼"); var passWordInput=$('<input />',{class:"input",type:"password",placeholder:"請輸入密碼"}); passwordLi.append(passWordDiv); passwordLi.append(passWordInput); var submitLi = $('<li />',{class:'loginLi'}); var submitBtn = $('<input />', {type: 'submit', value: '登陸'}); var stateLi = $('<li />',{class:'loginLi'}); submitLi.append(submitBtn); ul.append(nameLi); ul.append(passwordLi); ul.append(submitLi); ul.append(stateLi); legend.appendTo(field); ul.appendTo(field); field.appendTo($('body')); $('.loginLi').css({ width: '80%', height: '25%', padding: '0', margin: '0' }).css('text-align', 'left') .css('line-height', '9vmin'); stateLi.css('text-align', 'center'); submitLi.css('text-align', 'center'); $('.input').css({ position: 'relative', float: 'left', width: '60%', height: '80%' }).css('margin-left','1%'); $('.textDiv').css({ position: 'relative', float: 'left', width: '35%', height: '80%' }).css('text-align', 'right'); stateLi.css('height','20%'); //設置界面位置 var body=$('body'); field.css({ top:'20vmin', left:parseInt((body.width()-field.width())/2) }); //上傳事件 submitLi.on('click',function () { $.ajax({ type: 'POST', url: 'url',//提交的地址 data: {name:nameInput.val(),passWord:passWordInput.val()}, dataType: 'json', timeout: 3000, context: $('body'), success: function (data) { stateLi.text(data); }, error: function (xhr, type) { stateLi.text("上傳失敗"); } }) }); }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
JavaScript實現(xiàn)廣告的關閉與顯示效果實例
這篇文章主要介紹了JavaScript實現(xiàn)廣告的關閉與顯示效果,涉及javascript廣告窗口的關閉與顯示效果實現(xiàn)技巧,需要的朋友可以參考下2015-07-07關于JS中setTimeout()無法調用帶參函數(shù)問題的解決方法
這篇文章主要介紹了關于JS中setTimeout()無法調用帶參函數(shù)問題的解決方法,提供了2種解決方法供大家對比參考,需要的朋友可以參考下2016-06-06el-date-picker與el-time-picker的時間格式設置代碼
這篇文章主要介紹了el-date-picker與el-time-picker的時間格式設置代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11springMvc 前端用json的方式向后臺傳遞對象數(shù)組方法
今天小編就為大家分享一篇springMvc 前端用json的方式向后臺傳遞對象數(shù)組方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08