js常用事件案例總結
阿新 • • 發佈：2019-01-05
一,完整表單的驗證
二,密碼強度的驗證<div class="container"> <label>Q Q</label><input type="text" id="inp1"><span></span><br/> <label>手機</label><input type="text" id="inp2"><span></span><br/> <label>郵箱</label><input type="text" id="inp3"><span></span><br/> <label>座機</label><input type="text" id="inp4"><span></span><br/> <label>姓名</label><input type="text" id="inp5"><span></span><br/> </div> <script> function $(id) { return document.getElementById(id); } var inpQQ = $("inp1"); var inpMobile = $("inp2"); var inpEmail = $("inp3"); var inpTel = $("inp4"); var inpName = $("inp5"); //檢查 指定的輸入框 中的內容是否符合 指定的表示式 function check(inp, regEx) { inp.onblur = function () { if (regEx.test(this.value)) { this.nextSibling.innerHTML = "正確"; this.nextSibling.style.color = "green"; } else { this.nextSibling.innerHTML = "錯誤"; this.nextSibling.style.color = "red"; } } } //QQ的規律 5-11位 開頭不為0 //var regQQ = /^[^0]\d{4,10}$/;//不為零的數字 var regQQ = /^[1-9]\d{4,10}$/; //手機的規律 11位 另外有規定號段 //var regMobile = /^\d{11}$/; var regMobile = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/; //郵箱的規律[email protected] //var regEmail = /^\[email protected]\w$/; var regEmail = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //座機和姓名規律見之前的案例 var regTel = /^0\d{2,3}-\d{7,8}$/; var regName = /^[\u4e00-\u9fa5]{2,}$/; check(inpQQ, regQQ);//驗證QQ check(inpMobile, regMobile);//驗證手機 check(inpEmail, regEmail);//驗證郵箱 check(inpTel, regTel);//驗證座機 check(inpName, regName);//驗證姓名 </script>
三,回車切換案例<div class="container"> <label>密碼</label> <input type="text" id="inp1" maxlength="16"> <!--<input type="password" id="inp1" maxlength="16"/>--> <div class="pass-wrap"> <em>密碼強度：</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script> var inp1 = document.getElementById("inp1"); var strength = document.getElementById("strength"); var strengthLevel = document.getElementById("strengthLevel"); var array = ['', '低', '中', '高']; inp1.onkeyup = function () { var level = 0; if (/[a-z]/.test(this.value)) { level++;//包含字母 } if (/[0-9]/.test(this.value)) { level++;//包含數字 } if (/[^a-z0-9]/.test(this.value)) { level++;//包含其他內容 } if (this.value.length < 6) { level = 0;//密碼小於6位，沒輸入完 } if (level > 3) { level = 3; } strength.innerHTML = array[level]; strengthLevel.className = 'strengthLv' + level; }; </script>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<script>
//需求：在當前文字框中按下回車鍵 獲取下一個文字框 並讓其獲取焦點
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onkeyup = function (event) {
//console.log(event.keyCode);//13
if (event.keyCode === 13) {
var next = this.nextElementSibling.nextElementSibling;//找到下一個文字框
//讓他獲取焦點
next.focus();
}
};
}
</script><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.box img {
vertical-align: top;
}
#bigBox img {
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<div id="smallBox" class="small">
<img src="images/001.jpg" width="350" alt=""/>
<div id="mask" class="mask"></div>
</div>
<div id="bigBox" class="big">
<img src="images/0001.jpg" id="bigImg" width="800" alt=""/>
</div>
</div>
<script>
var box = document.getElementById("box");
var smallBox = document.getElementById("smallBox");
var bigBox = document.getElementById("bigBox");
var bigImg = document.getElementById("bigImg");
var mask = document.getElementById("mask");
//1.滑鼠經過小盒子 顯示遮罩和大盒子 滑鼠離開後隱藏
smallBox.onmouseover = function () {
mask.style.display = "block";
bigBox.style.display = "block";
};
smallBox.onmouseout = function () {
mask.style.display = "none";
bigBox.style.display = "none";
};
//2.遮罩跟隨滑鼠座標
//滑鼠在smallBox上移動的時候 獲取滑鼠在盒子中的座標 然後設定mask的位置
smallBox.onmousemove = function (event) {
var event = event || window.event;
//獲取滑鼠在頁面中的座標
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//獲取滑鼠在盒子中的座標
//這裡不能用smallBox.offsetLeft因為smallBox的offsetParent是box
//而smallBox到box的offsetLeft是0 所以這裡要用box.offsetLeft
var boxX = pageX - box.offsetLeft;
var boxY = pageY - box.offsetTop;
//計算mask的座標
var maskX = boxX - mask.offsetWidth / 2;
var maskY = boxY - mask.offsetHeight / 2;
//3.限制遮罩的運動範圍
if (maskX < 0) {
maskX = 0;
}
if (maskX > smallBox.offsetWidth - mask.offsetWidth) {
maskX = smallBox.offsetWidth - mask.offsetWidth;
}
if (maskY < 0) {
maskY = 0;
}
if (maskY > smallBox.offsetHeight - mask.offsetHeight) {
maskY = smallBox.offsetHeight - mask.offsetHeight;
}
//console.log(maskX + "--" + maskY);
//設定mask的位置
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
//4.按照比例移動大圖
//大圖能夠移動的總距離 = 大圖的寬度-大盒子的寬度
var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
//mask能夠移動的總距離 = 小盒子的寬度-mask的寬度
var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
//rate = 大圖能夠移動的總距離/mask能夠移動的總距離
var rate = bigToMove / maskToMove;
//大圖應該到的位置 = rate * mask當前的位置 (移動方向相反所以是負數)
bigImg.style.left = -rate * maskX + "px";
bigImg.style.top = -rate * maskY + "px";
};
</script>
</body>
</html>