js模拟支付宝密码输入框


Posted in Javascript onApril 11, 2017

本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码,供大家参考,具体内容如下

效果图:

js模拟支付宝密码输入框

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<style>
 input{
  width:60px;
  height:60px;
  font-size:40px;
  line-height: 60px;
 }
</style>
<body>
<input type="password"/>
<input type="password"/>
<input type="password"/>
<input type="password"/>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
 $(function(){
  var ww=2222;//服务器验证码
  $('input').eq(0).focus();
  $('input').keyup(function(){
   if($(this).val().length==1){
    $(this).next().focus()
   }
  })
  $('input').eq($('input').length-1).keyup(function(){
     var valed=''
     for(var i=0;i<$('input').length;i++){
      valed=valed+$('input').eq(i).val()
     }
     if(Number(valed)==ww){
      alert('输入正确')
     }else{
      alert('输入错误')
     }
  }
  )
 })
</script>
</html>

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

Javascript 相关文章推荐
Javascript面向对象扩展库代码分享
Mar 27 Javascript
javascript动画浅析
Aug 30 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
基于jQuery实现瀑布流页面
Apr 11 #jQuery
详解angular用$sce服务来过滤HTML标签
Apr 11 #Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 #Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 #Javascript
js 获取今天以及过去日期
Apr 11 #Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 #Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php数组去重的函数代码
2013/02/03 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
两种php实现图片上传的方法
2016/01/22 PHP
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
Ajax基础知识详解
2017/02/17 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python 多进程、多线程效率对比
2020/11/19 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
大学生应聘求职信
2014/05/26 职场文书
低碳环保标语
2014/06/12 职场文书
导师工作推荐信
2015/03/27 职场文书
信用卡收入证明范本
2015/06/12 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript