失眠网 > 案例二：行走的小女孩

案例二：行走的小女孩

时间：2022-01-15 12:00:21

相关推荐

案例二：行走的小女孩

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 79px;height: 108px;background: url(aisidier.png) 0px -216px;position: absolute;left: 0;top: 100px;}</style></head><body><script src="/underscore.js/1.9.1/underscore-min.js"></script><script>//定义一个女孩的对象function Girl() {// div对象this.dom = null;this.singal = 0;this.x = 0; // 小女孩初始水平位置this.y = _.random(1, 500); // 小女孩垂直位置 1-500this.speed = _.random(1, 10); // 1-10this.init();array.push(this);}//创建divGirl.prototype.init = function() {this.dom = document.createElement("div");document.body.appendChild(this.dom);}//女孩位置定位Girl.prototype.update = function() {this.x += this.speed;this.singal++;if (this.singal > 7) {this.singal = 0;}this.dom.style.left = this.x + "px";this.dom.style.top = this.y + "px";this.dom.style.backgroundPosition = -79 * this.singal + "px -216px"}//创建女孩对象var array = [];for (var i = 0; i < 20; i++) {new Girl();}//设置定时器setInterval(function() {/*//常规做法for(var i=0; i<array.length; i++) {array[i].update();}*///调用库中封装的函数_.each(array, function(g) {g.update();})}, 100);</script></body></html>

行走的女孩升级版

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 79px;height: 108px;background: url(aisidier.png) 0px -216px;position: absolute;left: 0;top: 100px;}</style></head><body><script src="/underscore.js/1.9.1/underscore-min.js"></script><script>function Girl() {// div对象this.dom = null;// 每个女孩维护自己的定时器this.timer = null;// 添加一个属性表示运动状态this.isMove = true; //默认一开始是运动的this.singal = 0;this.x = 0; // 小女孩初始水平位置this.speed = _.random(1, 10); // 1-10this.y = _.random(1, 500); // 小女孩垂直位置 1-500this.init();// 监听事件this.bindEvent();}Girl.prototype.init = function() {this.dom = document.createElement("div");document.body.appendChild(this.dom);var _this = this;this.timer = setInterval(function() {if (_this.isMove) {_this.update();}}, 100);}Girl.prototype.update = function() {this.x += this.speed;this.singal++;if (this.singal > 7) {this.singal = 0;}this.dom.style.left = this.x + "px";this.dom.style.top = this.y + "px";this.dom.style.backgroundPosition = -79 * this.singal + "px -216px"}Girl.prototype.bindEvent = function() {var _this = this;this.dom.onclick = function() {if (_this.isMove) {clearInterval(_this.timer);_this.isMove = false;} else {_this.timer = setInterval(function() {_this.update();}, 100);_this.isMove = true;}}}for (var i = 0; i < 20; i++) {new Girl();}</script></body></html>

小女孩行走冲刺版

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 79px;height: 108px;background: url(star/aisidier.png) 0px -216px;position: absolute;left: 0;top: 100px;}hr {width: 1px;height: 860px;position: absolute;left: 1000px;background: skyblue;}</style></head><body><hr /><script src="/underscore.js/1.9.1/underscore-min.js"></script><script>function Girl() {// div对象this.dom = null;// 每个女孩维护自己的定时器this.timer = null;// 添加一个属性表示运动状态this.isMove = true;//默认一开始是运动的this.singal = 0;this.x = 0;// 小女孩初始水平位置this.speed = _.random(1,10); // 1-10this.y = _.random(1,500); // 小女孩垂直位置 1-500this.init();// 监听事件this.bindEvent();}Girl.prototype.init = function() {this.dom = document.createElement("div");document.body.appendChild(this.dom);var _this = this;this.timer = setInterval(function() {if (_this.isMove) {_this.update();} },100);}Girl.prototype.update = function() {this.x += this.speed;if (this.x>1000) {// 消灭过线的女孩this.release();}this.singal++;if(this.singal>7) {this.singal = 0;}this.dom.style.left = this.x + "px";this.dom.style.top = this.y + "px";this.dom.style.backgroundPosition = -79*this.singal+"px -216px"}// 消灭女孩Girl.prototype.release = function() {document.body.removeChild(this.dom);}Girl.prototype.bindEvent = function() {var _this = this;this.dom.onclick = function() {if(_this.isMove) {clearInterval(_this.timer);_this.isMove = false;} else {_this.timer = setInterval(function() {_this.update();},100);_this.isMove = true;}}}/*var g1 = new Girl();var g2 = new Girl();*/for(var i=0; i<20; i++) {new Girl();}</script></body></html>