如何基于zepto.js實現(xiàn)登錄界面

小編給大家分享一下如何基于zepto.js實現(xiàn)登錄界面，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

為鄂托克等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及鄂托克網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、網(wǎng)站設(shè)計、鄂托克網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

最近使用Zepto.js寫的登陸界面，純js界面，留下來，以后再寫登陸可以直接使用了。

下面是效果圖

直接再html中先引入zepto.js的庫，再插入下面的代碼就可以實現(xiàn)了

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%'); 
  //設(shè)置界面位置 
  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("上傳失敗"); 
      } 
    }) 
  }); 
 
}

看完了這篇文章，相信你對“如何基于zepto.js實現(xiàn)登錄界面”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

名稱欄目：如何基于zepto.js實現(xiàn)登錄界面
文章源于：http://bm7419.com/article34/ijhjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、建站公司、動態(tài)網(wǎng)站、標簽優(yōu)化、服務(wù)器托管、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)