基于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 相关文章推荐
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
微信小程序实现打卡日历功能
Sep 21 Javascript
vue cli安装使用less的教程详解
Jul 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
Yii框架中memcache用法实例
2014/12/03 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JS input 数字验证代码
2009/07/30 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
vue--vuex详解
2019/04/15 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
解决Mac下使用python的坑
2019/08/13 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python3字符串输出常见面试题总结
2020/12/01 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
大学生职业规划前言模板
2013/12/27 职场文书
初一英语教学反思
2014/01/11 职场文书
工作交流会欢迎词
2014/01/12 职场文书
竞争上岗实施方案
2014/03/21 职场文书
加薪申请报告范本
2015/05/15 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android