您的位置：首页 > Web前端 > JavaScript

我的JavaScript回顾之路_08—0227—支付密码输入框/弹性布局flex

2018-02-27 10:09 344 查看

1、支付密码输入框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
input{width:5%; text-align: center; outline: none;}
</style>
</head>
<body>
<div>
<input type="password" class="password" maxlength="1" index='0'>
<input type="password" class="password" maxlength="1" index='1'>
<input type="password" class="password" maxlength="1" index='2'>
<input type="password" class="password" maxlength="1" index='3'>
<input type="password" class="password" maxlength="1" index='4'>
<input type="password" class="password" maxlength="1" index='5'>
</div>
<script>
//change事件
//input事件
//blur   focus 失去/获取焦点
var index = 0;
$(function(){
$(".password")[0].focus();
$(".password").on('focus', function(){
var tempIndex = $(this).attr("index");
if(tempIndex == index){
return;
}
this.blur();
$(".password")[index].focus();
})
$(".password").on('input', function(){
this.blur();
if(this.value == ''){
if(index == 0){
$(".password")[index].focus();
return;
}
index++;
}else{
if(index == 5){
$(".password")[index].focus();
return;
}
index++;
document.onkeyup = function(event){
if(event.key == 'Backspace'){
if(index == 0){
$(".password")[index].focus();
$($(".password")[index]).val('');
return;
}
index--;
$(".password")[index].focus();
$($(".password")[index]).val('');
}
}
}
$(".password")[index].focus();
})
})
</script>
</body>
</html>

2、弹性布局flex<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red{
background: red;
padding:15px;
display: flex;
flex-direction: row;
justify-content:space-around;
}
.red>div{
height: 200px;
padding:15px;
display: flex;
flex-direction: column;
justify-content:space-between;
}
.blue{
background: blue;
/*flex:1;*/
}
.black{
background: black;
/*flex:2;*/
}
.orange{
background: orange;
/*flex:1;*/
}
.yellow{
background: yellow;
padding: 10px;
}
.pink{
background: pink;
padding: 10px;
}
.green{
background: green;
padding: 10px;
}
.light-green{
background: lightgreen;
margin-top: 20px;
width: 100px;
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
}
.white{
background: white;
width: 10px;
height: 10px;
border-radius: 10px;
margin: auto 0;
/*margin: auto;*/
}
</style>
</head>
<body>
<div class="red">
<div class="blue">
<div class="pink"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<div class="black">
<div class="pink"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<div class="orange">
<div class="pink"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
</div>
<div class="light-green">
<div class="white">
</div>
</div>
</body>
</html>盒子的兼容性写法
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
子元素的兼容性写法
.flex1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航