你好javascript day14
1)鼠标事件
mouseover和mouseout 是冒泡的，可以收到子元素的滑入滑出
mouseenter和mouseleave是不冒泡的，只能收到这个当前容器的进入和离开，子元素不会触发
2）焦点事件和输入事件
焦点事件主要用于表单元素，以及超链接，使用点击或者tab可以切换汇聚焦距
focus 是汇聚焦距 一般汇聚焦距时，会有outline样式
blur 是失去焦距
失焦和聚焦主要用来判断表单验证
input 输入事件主要用于多行文本框和文本框
3）按键事件和滚轮事件
keyudwon 按下
keyup 松开
scroll 滚动条事件
// 鼠标滚轮
// IE 和谷歌浏览器
document.addEventListener("mousewheel",mouseHandler);
// 火狐浏览器
document.addEventListener("DOMMouseScroll",mouseHandler);
4）正则表达式基本语法
/^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
查找、替换，通常用作验证，截取，隐藏，编码
构造函数创建方法
var reg=new RegExp("ab","g");
var reg=/表达式/修饰符
修饰符
g 全部
i 不区分大小写
m 多行匹配
5）正则表达式相关方法
exec
查找符合正则内容 ，index就是下标，返回一个数组，没找到就会返回null
不能查找多个
var str="eksakjdksadh";
console.log(/sa/g.exec(str));
test
查看字符串是否有满足正则表达式的内容，如果有，返回true，没有就返回false
var reg=/ab/;
var bool=reg.test('absder');
console.log(bool);//true
字符串方法
var str="abcedg";
// 替换
str.replace(/a/,"z");
// 查找返回数组
str.match(/a/);
// 查找元素，返回下标
str.search(/a/);
// 分隔数组
str.split(/a/);
match
var str="abcdabcd";
console.log(str.match(/a/));//查找一个时，与test类似，可以返回一个数组，下标和查找到的内容
console.log(str.match(/a/g));//查找多个，就会把每个查找到的内容返回出来
search
var str="abcdabcd";
console.log(str.search(/c/));//只能找到一个正在表达式的下标
split
var str="ab?c=3&da=4&bcd=5";
var arr=str.split(/[?&]/g).slice(1);
console.log(arr);
节流
var bool=false;
var input=document.querySelector("input");
input.addEventListener("input",inputHandler);
function inputHandler(e){
if(bool) return;
var ids=setTimeout(function(){
clearTimeout(ids);
bool=false;
console.log(input.value);
},500);
bool=true;
}
人物行走
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 33px;
height: 33px;
background-image: url("./img/Actor01-Braver03.png");
background-position-x: 0px;
background-position-y: 0px;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div></div>
<script>
var actor, key;
var speedX = 2,
speedY = 2,
x = 0,
y = 0,
count=0,
time=10;
init();
function init() {
actor = document.querySelector("div");
document.addEventListener("keydown", mouseHandler);
document.addEventListener("keyup", mouseHandler);
setInterval(animation, 16);
}
// 帧频 帧
// 60帧/秒
// 1000/60=16.666666毫秒
function mouseHandler(e) {
if (e.type === "keydown") {
if (!key) {
switch (e.keyCode) {
case 37:
actor.style.backgroundPositionY = "-33px";
break;
case 38:
actor.style.backgroundPositionY = "-99px";
break;
case 39:
actor.style.backgroundPositionY = "-66px";
break;
case 40:
actor.style.backgroundPositionY = "0px";
break;
}
}
key = e.keyCode;
} else {
key = undefined;
actor.style.backgroundPositionX="0px";
}
}
function animation() {
if (!key) return;
changeActor();
actorMove();
}
// 防抖
function changeActor() {
// 因为考虑不能进入太快，当前函数原来是16毫秒进入一次。
// 现在我们设置一个time，每10次进入一次，这样就造成每160毫秒进入一次，减缓图像改变速度
// 这就是防抖
time--;
if(time>0)return;
time=10;
count++;
if(count>3) count=0;
actor.style.backgroundPositionX=-count*32+"px";
}
function actorMove() {
switch (key) {
case 37:
x -= speedX;
break;
case 38:
y -= speedY;
break;
case 39:
x += speedX;
break;
case 40:
y += speedY;
break;
}
actor.style.left = x + "px";
actor.style.top = y + "px";
}
</script>
</body>
</html>
