基于zepto.js实现登录界面


Posted in Javascript onOctober 09, 2017

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

下面是效果图

基于zepto.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("上传失败"); 
      } 
    }) 
  }); 
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中输入验证中一个不错的效果
Aug 21 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Js经典案例的实例代码
May 10 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
js常用正则表达式集锦
May 17 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 #Javascript
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
ES6学习教程之模板字符串详解
Oct 09 #Javascript
ES6学习教程之块级作用域详解
Oct 09 #Javascript
JavaScript实现短信倒计时60s
Oct 09 #Javascript
ES6学习教程之对象字面量详解
Oct 09 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php object转数组示例
2014/01/15 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python简单验证码识别的实现方法
2019/05/10 Python
python正则-re的用法详解
2019/07/28 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
医学生个人求职信范文
2013/09/24 职场文书
应聘自荐信
2013/12/14 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
python实现简单的聊天小程序
2021/07/07 Python