基于zepto.js实现登录界面

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

下面是效果图

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

rush:js;"> createLoginArea(); function createLoginArea() {

var field = $('

');

field.css({
position:'absolute',width:'60vmin',height:'40vmin',border: '1px solid #61B5CF'
});
field.css('border-radius','1vmin');

var legend = $('

');
legend.text("登陆");
var 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 = $('

• ',{class:'loginLi'});
  var nameDiv=$('
  ',{class:'textDiv'});
  nameDiv.text("用户名");
  var nameInput=$('',{class:"input",type:"text",placeholder:"请输入用户名"});
  nameLi.append(nameDiv);
  nameLi.append(nameInput);
  var passwordLi = $('
• ',{class:'loginLi'});
  var passWordDiv=$('
  ',{class:'textDiv'});
  passWordDiv.text("密码");
  var passWordInput=$('',type:"password",placeholder:"请输入密码"});
  passwordLi.append(passWordDiv);
  passwordLi.append(passWordInput);

  var submitLi = $('

• ',{class:'loginLi'});
  var submitBtn = $('',{type: 'submit',value: '登陆'});
  var stateLi = $('
• ',{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',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("上传失败");
  }
  })
  });

  }

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

原文地址：https://www.jb51.cc/js/35949.html