使用zepto.js，纯JS写的登录界面

来源：互联网发布：零基础学php 编辑：程序博客网时间：2024/06/15 02:32

最近使用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("上传失败");            }        })    });}

阅读全文

0 0