Skip to content

Commit 6afecd7

Browse files
jessica-javajessica-java
authored
Merge pull request #2 from bjmashibing/master
更新 : 2019年12月31日00:38:58
2 parents e3ca113 + 1c192c7 commit 6afecd7

30 files changed

Lines changed: 4168 additions & 0 deletions

‎web前端/code/第七天/010函数作为对象方法执行【谁最后打点，上下文即为谁】.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+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>
13+
<script>
14+
//狭义对象
15+
var jch = {
16+
name:"贾成豪",
17+
age:18,
18+
sex:"男",
19+
eat:function(){
20+
console.log(this.name+"我可以吃八级米饭");
21+
}
22+
}
23+
//调用对象方法
24+
jch.eat();
25+
</script>

‎web前端/code/第七天/011认知关键字new.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+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>
13+
<script>
14+
//认知关键字new：它也是调用函数一种方式
15+
//函数声明部分
16+
function Fun (){
17+
console.log("兄弟你执行呀");
18+
}
19+
//关键字new 也是调用函数一种手段
20+
new Fun;
21+
new Fun;
22+
new Fun;
23+
// new new Fun;
24+
// Fun new;
25+
</script>

‎web前端/code/第七天/012构造函数的基本使用.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>
13+
<script>
14+
//构造函数两个特征:
15+
//第一：构造函数的首个英文字母一般大写的【不是决定性因素】
16+
//第二：函数如果是new调用的，称之为构造函数【决定形式因素】
17+
//问题：老师函数名+小括号调用函数执行、new调用函数也执行，两者也有什么区别呀？
18+
function People(){
19+
//第一步：在函数体中神秘创建了一个空的狭义对象【大的花括号】
20+
//第二步:函数体种上下文指向当前这个空的狭义对象
21+
//第三步：可以通过点语法给狭义对象动态添加属性、方法
22+
this.xingming = "小明";
23+
this.age = 18;
24+
this.sex = "男";
25+
this.hobby = ['吃饭','睡觉','打豆豆'];
26+
//第四步：虽然没有关键字return，但是系统回自动将狭义对象返回
27+
}
28+
var obj = new People;
29+
console.log(obj);
30+
31+
</script>

‎web前端/code/第七天/013构造函数深入学习.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>
13+
<script>
14+
//构造函数两个特征：
15+
//函数名字首个英文字母需要大写的
16+
//函数务必使用关键字new调用的
17+
function Dog(name,sex,age){
18+
//构造函数独有四步走
19+
//第一步：在函数体中神秘创建了一个空的狭义对象
20+
//第二步：函数的上下文指向当前的空的下一对象
21+
//第三步：通过点语法动态给狭义对象添加属性、方法
22+
this.name = name;
23+
this.sex = sex;
24+
this.age = age;
25+
//第四步：虽然没有关键字new，但是系统会将当前这个狭义对象返回
26+
for(var i = 0 ; i < 10 ;i++){};
27+
if(true){};
28+
}
29+
//调用函数
30+
var erha = new Dog("二哈","公",3);
31+
var taidi = new Dog("泰迪","母",6);
32+
//因为这是两个不同对象，因为在堆空间当中内存地址不同
33+
console.log(erha,taidi);
34+
</script>

‎web前端/code/第七天/014原型链初次学习.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>
13+
<script>
14+
//任意构造函数 天生都有一个 prototype属性 ，指向一个空的狭义对象
15+
//创建出来的时候天生拥有一个__proto__属性，可以向上面的狭义对象借用方法使用
16+
function Dog(name,age,sex){
17+
//经历四步走
18+
this.name = name;
19+
this.age = age;
20+
this.sex = sex;
21+
}
22+
Dog.prototype.yaoren = function(){
23+
console.log("我可以咬人");
24+
}
25+
//创建二哈实例
26+
var erha = new Dog("二哈",18,"公");
27+
var taidi = new Dog("太低",6,"母");
28+
console.log(erha);
29+
console.log(taidi);
30+
erha.yaoren();
31+
erha.yaoren();
32+
taidi.yaoren();
33+
</script>
34+
35+

‎web前端/code/第七天/015士兵行走.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
div {
16+
position: relative;
17+
width: 50px;
18+
height: 100px;
19+
background: url('./img/1.png');
20+
/* 背景图定位 */
21+
background-position: 0px -200px;
22+
border: 1px solid black;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id="box"></div>
29+
</body>
30+
31+
</html>
32+
<script>
33+
//获取标签
34+
var div = document.getElementById("box");
35+
//创建一个全局变量【控制背景图定位】
36+
//控制背景图定位变化变化
37+
var x = 0;
38+
//控制标签left变化数值
39+
var l = 0;
40+
//控制士兵行走、停止变量
41+
var isMove = false;
42+
//一直原地踏步走【无非利用定时器一直修改div背景图定位】
43+
setInterval(function () {
44+
if (isMove) return;
45+
x++;
46+
l += 10;
47+
if (x > 3) x = 0;
48+
//无非修改背景图定位
49+
div.style.backgroundPosition = -x * 50 + "px -200px";
50+
div.style.left = l + "px";
51+
}, 100);
52+
53+
//单击标签div进行isMove数值变化
54+
div.onclick = function () {
55+
//数值执行置反
56+
isMove = !isMove;
57+
console.log(isMove);
58+
}
59+
</script>

‎web前端/code/第七天/016面向对象编程-士兵行走.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
div {
16+
position: absolute;
17+
width: 50px;
18+
height: 100px;
19+
background: url('./img/1.png');
20+
/* 背景图定位 */
21+
background-position: 0px -200px;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
28+
</body>
29+
30+
</html>
31+
<script>
32+
//将来我需要10000士兵行走
33+
function Bing() {
34+
//控制背景图发生变化属性
35+
this.x = 0;
36+
//top属性值
37+
this.t = parseInt(Math.random() * 500);
38+
//修改left属性值
39+
this.l = 0;
40+
//控制小兵是否行走
41+
this.isMove = false;
42+
//经历四步走
43+
this.init();
44+
//将每隔一秒创建实例添加到数组进行同一管理
45+
arr.push(this);
46+
//控制是否行走
47+
this.bind();
48+
}
49+
Bing.prototype.init = function () {
50+
//在JS当中创建div标签
51+
this.dom = document.createElement("div");
52+
this.dom.style.top = this.t + "px";
53+
//标签上树
54+
document.body.appendChild(this.dom);
55+
}
56+
//跟新脚步方法
57+
Bing.prototype.update = function () {
58+
if (this.isMove) return;
59+
//控制背景图发生变化属性值
60+
this.x++;
61+
//修改控制left变化属性值
62+
this.l += 10;
63+
if (this.x > 3) this.x = 0;
64+
//修改div背景图定位
65+
this.dom.style.backgroundPosition = -this.x * 50 + "px -200px";
66+
this.dom.style.left = this.l + "px";
67+
//当达到一定条件删除标签
68+
if (this.l > 500) {
69+
//将数组里面实例移出
70+
arr.splice(arr.indexOf(this), 1);
71+
//节点移出
72+
document.body.removeChild(this.dom);
73+
}
74+
}
75+
Bing.prototype.bind = function () {
76+
var self = this;
77+
this.dom.onclick = function () {
78+
self.isMove = !self.isMove;
79+
}
80+
}
81+
//向每隔一秒创建一个士兵
82+
var time = 0;
83+
//创建数组接受全部实例
84+
var arr = [];
85+
//开启定时器一直运动
86+
setInterval(function () {
87+
time++;
88+
if (time % 10 == 0) new Bing;
89+
//让每一个士兵向右侧行走---遍历数组
90+
for (var i = 0; i < arr.length; i++) {
91+
arr[i].update();
92+
}
93+
}, 100);
94+
</script>

0 commit comments

Comments
 (0)