小编给大家分享一下如何基于zepto.js实现登录界面,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联是专业的阳西网站建设公司,阳西接单;提供网站设计、
成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行阳西网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
js有什么特点
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
最近使用Zepto.js写的登陆界面,纯js界面,留下来,以后再写登陆可以直接使用了。
下面是效果图
![如何基于zepto.js实现登录界面](/upload/otherpic17/63418.jpg)
直接再html中先引入zepto.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=$('
',{class:"input",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', 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("上传失败");
}
})
});
}
看完了这篇文章,相信你对“如何基于zepto.js实现登录界面”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:如何基于zepto.js实现登录界面-创新互联
文章分享:
http://cdkjz.cn/article/cdppeg.html