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

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