最近使用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("上傳失敗");       }     })   });  } 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答