小女孩行走，函数式写法，只能创建一个，不利于创建多个
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
div {
position: absolute;
top: 100px;
left: 0;
width: 79px;
height: 108px;
background: url(img/girl.png) no-repeat;
background-position: 0 -216px;
}
</style>
</head>
<body>
<div></div>
<script>
//获取元素
let oDiv = document.getElementsByTagName('div')[0];
//信号量
let nowLeft = 0;
let step = 0; //步长
setInterval(() => {
nowLeft += 4;//每次大概移动4像素
step++;
if (step > 7) step = 0; //图片不能超出
oDiv.style.backgroundPosition = `-${step * 79}px -216px` //切换动作图片
oDiv.style.left = nowLeft + 'px';//改变位置
}, 300)
</script>
</body>
</html>
对象（构造函数）写法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
div {
position: absolute;
top: 100px;
left: 0;
width: 79px;
height: 108px;
background: url(img/girl.png) no-repeat;
background-position: 0 -216px;
}
</style>
</head>
<body>
<script>
//构造函数对象的写法
//基于面向对象编程(类)所有的数据都归纳为对象的属性，功能函数都归纳为对象的方法
//构造函数
function Girl(top, left, bol) {
this.top = top;
this.left = left;
this.deep = 0;
//人物的初始化
this.init() //为了方法的复用，将方法加到原型身上
this.run()
}
//原型上的方法
//初始化一个对象(页面元素)
Girl.prototype.init = function () {
this.dom = document.createElement('div');
//给元素添加初始位置
this.dom.style.top = this.top + 'px'
this.dom.style.left = this.top + 'px'
//将dom渲染到页面上
document.body.appendChild(this.dom)
}
//人物运动
Girl.prototype.run = function () {
this.timer = setInterval(() => {
this.left += 4;
this.deep++;
this.deep %= 7;
if (this.left > 800) this.die();
this.dom.style.left = this.left + 'px';
this.dom.style.backgroundPosition = `-${79 * this.deep}px -216px`
}, 30)
}
//人物销毁，关闭定时器，删除节点
Girl.prototype.die = function () {
clearInterval(this.timer) //关闭定时器
document.body.removeChild(this.dom)//删除节点
}
// new Girl(100,100)
// new Girl(200,200)
// new Girl(300,10)
//定时器创建对象
let count = 0;
let timer = setInterval(() => {
if (count++ >= 10) clearinterval(timer)//超过11个就关闭定时器
new Girl(Math.random() * 500, 200) //上下是随机值
}, 1000)
</script>
</body>
</html>
对象写法--优化原型部分，原型部分合并到一起
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
div {
position: absolute;
top: 100px;
left: 0;
width: 79px;
height: 108px;
background: url(img/girl.png) no-repeat;
background-position: 0 -216px;
}
</style>
</head>
<body>
<script>
function Girl(top, left, bol) {
this.top = top;
this.left = left;
this.deep = 0;
//人物的初始化
this.init() //为了方法的复用，将方法加到原型身上
this.run()
}
//任务运行
Object.assign(Girl.prototype, {
//初始化
init() {
this.dom = document.createElement('div');
this.dom.style.top = this.top + 'px'
this.dom.style.left = this.top + 'px'
document.body.appendChild(this.dom)
},
//运行
run() {
this.timer = setInterval(() => {
this.left += 4;
this.deep++;
this.deep %= 7;
if (this.left > 800) this.die();
this.dom.style.left = this.left + 'px';
this.dom.style.backgroundPosition = `-${79 * this.deep}px -216px`
}, 30)
},
//销毁
die() {
clearInterval(this.timer) //关闭定时器
document.body.removeChild(this.dom)//删除节点
}
})
//定时器创建对象
let count = 0;
let timer = setInterval(() => {
if (count++ >= 10) clearinterval(timer)//超过11个就关闭定时器
new Girl(Math.random() * 500, 200) //上下是随机值
}, 1000)
</script>
</body>
</html>
行走的小女孩对象，ES6写法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
div {
position: absolute;
top: 100px;
left: 0;
width: 79px;
height: 108px;
background: url(img/girl.png) no-repeat;
background-position: 0 -216px;
}
</style>
</head>
<body>
<script>
//es6的写法
class Girl {
constructor(top, left, bol) {
this.top = top;
this.left = left;
this.deep = 0;
//人物的初始化
this.init() //为了方法的复用，将方法加到原型身上
this.run()
}
//初始化
init() {
this.dom = document.createElement('div');
this.dom.style.top = this.top + 'px'
this.dom.style.left = this.top + 'px'
document.body.appendChild(this.dom)
}
//运行
run() {
this.timer = setInterval(() => {
this.left += 4;
this.deep++;
this.deep %= 7;
if (this.left > 800) this.die();
this.dom.style.left = this.left + 'px';
this.dom.style.backgroundPosition = `-${79 * this.deep}px -216px`
}, 30)
}
//销毁
die() {
clearInterval(this.timer) //关闭定时器
document.body.removeChild(this.dom)//删除节点
}
}
//定时器创建对象
let count = 0;
let timer = setInterval(() => {
if (count++ >= 10) clearinterval(timer)//超过11个就关闭定时器
new Girl(Math.random() * 500, 200) //上下是随机值
}, 1000)
</script>
</body>
</html>
网友评论