Skip to content

Commit f02b0ef

Browse files
amydevyaamydevya
committed
new
1 parent d3c3aa3 commit f02b0ef

25 files changed

Lines changed: 794 additions & 0 deletions

‎10期JS正式课/正式课第六周/1.事件库的测试.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
div{
8+
width: 200px;
9+
height: 200px;
10+
background: red;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="div"></div>
16+
<script src="js/event.js"></script>
17+
<script>
18+
var oDiv=document.getElementById('div');
19+
function fn1(){
20+
console.log(1)
21+
}
22+
on(oDiv,'click',fn1);
23+
</script>
24+
</body>
25+
</html>

‎10期JS正式课/正式课第六周/2.事件库的拖拽.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
}
11+
#div{
12+
width: 200px;
13+
height: 200px;
14+
background: red;
15+
position: absolute;
16+
}
17+
div img{
18+
width: 100%;
19+
height: 100%;
20+
display: block;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="div"><img src="img/1.png" alt=""></div>
26+
<script src="js/event.js"></script>
27+
<script>
28+
var oDiv=document.getElementById('div');
29+
var flg=0;
30+
on(oDiv,'mousedown',down);
31+
//功能：改变函数中的this指向；
32+
function processThis(fn,context){
33+
return function (e){
34+
fn.call(context,e)
35+
}
36+
}
37+
function down(e){
38+
this.x=this.offsetLeft;
39+
this.y=this.offsetTop;
40+
this.mx= e.clientX;
41+
this.my= e.clientY;
42+
this.MOVE=processThis(move,this);
43+
this.UP=processThis(up,this);
44+
if(this.setCapture){//IE浏览器
45+
this.setCapture();//捕获焦点
46+
on(this,'mousemove',move);
47+
on(this,'mouseup',up);
48+
}else{//标准浏览器
49+
on(document,'mousemove',this.MOVE);
50+
on(document,'mouseup',this.UP);
51+
e.preventDefault();
52+
}
53+
clearTimeout(this.flyTimer);
54+
clearTimeout(this.dropTimer);
55+
}
56+
function move(e){
57+
//浏览器每隔一段事件，捕获一次mousemove事件，所以，我们在这段事件中，走的距离越远；速度就越快；所以，可以把距离作为速度；
58+
this.style.left= e.clientX-this.mx+this.x+'px';
59+
this.style.top= e.clientY-this.my+this.y+'px';
60+
61+
if(!this.prevSpeed){
62+
this.prevSpeed= e.clientX;//当没有上一次落脚点的时候，把e.clientX作为上一次的落脚点
63+
}else{
64+
this.speedX= e.clientX-this.prevSpeed;//本次鼠标落脚点-上次鼠标落脚点
65+
this.prevSpeed= e.clientX;
66+
}
67+
}
68+
function up(){
69+
if(this.releaseCapture){
70+
this.releaseCapture();
71+
off(this,'mousemove',move);
72+
off(this,'mouseup',up);
73+
}else{
74+
off(document,'mousemove',this.MOVE);
75+
off(document,'mouseup',this.UP);
76+
}
77+
fly.call(this);
78+
drop.call(this);
79+
}
80+
function fly(){
81+
clearTimeout(this.flyTimer);
82+
this.speedX*=.93;//加上摩擦效果
83+
var l=this.offsetLeft+this.speedX;
84+
var maxL=(document.documentElement.clientWidth||document.body.clientWidth)-this.offsetWidth;
85+
//边界值判断
86+
if(l>maxL){
87+
l=maxL;
88+
this.speedX*=-1;//碰撞后反弹
89+
}else if(l<0){
90+
l=0;
91+
this.speedX*=-1;
92+
}
93+
this.style.left=l+'px';
94+
if(Math.abs(this.speedX)>=0.5){//运动的条件；
95+
this.flyTimer=setTimeout(processThis(fly,this),20);
96+
}
97+
//console.log(this.speedX)// 测试运动用的；
98+
99+
}
100+
function drop(){
101+
clearTimeout(this.dropTimer)
102+
if(!this.speedY){
103+
this.speedY=9.8;
104+
}else{
105+
this.speedY+=9.8;
106+
}
107+
var t=this.offsetTop+this.speedY;
108+
this.speedY*=.98;
109+
var maxT=(document.documentElement.clientHeight||document.body.clientHeight)-this.offsetHeight;
110+
if(t>maxT){//触底
111+
t=maxT;
112+
this.speedY*=-1;
113+
flg++;
114+
}else{
115+
flg=0;
116+
}
117+
this.style.top=t+'px';
118+
if(flg<2){
119+
this.dropTimer=setTimeout(processThis(drop,this),20);
120+
}
121+
};
122+
123+
124+
125+
</script>
126+
</body>
127+
</html>

‎10期JS正式课/正式课第六周/3.订阅发布模式-结婚例子.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script src="js/event.js"></script>
9+
<script>
10+
var obj={};
11+
//提前预约：等你结婚的时候，我要干什么事情；
12+
marry();
13+
function marry(){
14+
setTimeout(function(){
15+
console.log('哈哈，我终于结婚了');//--说明结婚这件事发生了；
16+
fire.call(obj,'selfmarry');
17+
},6000);
18+
}
19+
on(obj,'selfmarry',liyifeng);
20+
on(obj,'selfmarry',songzuying);
21+
on(obj,'selfmarry',erye);
22+
on(obj,'selfmarry',maike);
23+
24+
function liyifeng(){
25+
console.log('我是呆萌李易峰')
26+
}
27+
function songzuying(){
28+
console.log('宋祖英：今天是个好日子')
29+
}
30+
function erye(){
31+
console.log('我是盗墓的')
32+
}
33+
function maike(){
34+
console.log('我是迈克杰克逊，我从土里蹦出来跳太空舞')
35+
}
36+
</script>
37+
</body>
38+
</html>

‎10期JS正式课/正式课第六周/4.订阅发布-烧水例子.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//核心：
10+
// 1.烧水和想做的事情提前绑定到一起； --事件绑定
11+
// 2.当水开了以后，通知你去干提前绑定好的事情；--发布事件（通知）
12+
/*
13+
* 当水开了以后，记得通知我：
14+
* 1）coffee
15+
* 2）water
16+
* 3）shower
17+
* */
18+
var obj={}; //obj.aa=[];
19+
function on(type,fn){
20+
if(!obj[type]){
21+
obj[type]=[];
22+
}
23+
var a=obj[type];
24+
for(var i=0; i< a.length; i++){
25+
if(a[i]==fn) return;
26+
}
27+
a.push(fn);
28+
}
29+
function fire(type){//通知提前绑定好的方法，进行执行的
30+
// 1.拿到数组：on方法中，所有的方法，都绑定在obj.boiling=[coffee,water,shower]
31+
var a=obj[type];
32+
//2.把数组中所有的方法都进行顺序调用；
33+
for(var i=0; i< a.length; i++){
34+
a[i]();
35+
}
36+
}
37+
//提前绑定：
38+
on('boiling',coffee);
39+
on('boiling',water);
40+
on('boiling',shower);
41+
42+
boiling();
43+
function boiling(){
44+
setTimeout(function(){
45+
console.log('水开了，你可以干事情了');
46+
fire('boiling');
47+
},1000)
48+
}
49+
50+
function coffee(){
51+
console.log('水开后，我要泡咖啡')
52+
}
53+
function water(){
54+
console.log('我要用开水浇花')
55+
}
56+
function shower(){
57+
console.log('用开水洗澡')
58+
}
59+
</script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)