基于zepto.js实现登录界面

最近使用Zepto.js写的登陆界面，纯js界面，留下来，以后再写登陆可以直接使用了。

下面是效果图

直接再html中先引入zepto.js的库，再插入下面的代码就可以实现了

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("上传失败"); 
 } 
 }) 
 }); 
 
} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。