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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
浅析javascript的return语句
Dec 15 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
js实现全选和全不选功能
Jul 28 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
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
在什么时候需要使用"常引用"
2015/12/31 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
自立自强的名人事例
2014/02/10 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
《开国大典》教学反思
2014/04/19 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书