基于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 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
javascript之Partial Application学习
Jan 10 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
JavaScript实现消消乐的源代码
Jan 12 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
js图片切换具体实现代码
2016/10/13 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Python创建模块及模块导入的方法
2015/05/27 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python Grid使用和布局详解
2018/06/30 Python
详解python单元测试框架unittest
2018/07/02 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
Python生成器generator原理及用法解析
2020/07/20 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
欢迎横幅标语
2014/06/17 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
初中美术教学反思
2016/02/17 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS