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

}

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