Mouse就是一个类,有自己的成员变量和成员方法,成员方法一定加上prototype,避免js原型的坑。
var Mouse = function(id){ ???this.id = id; ???this.name = ""; ???this.mes = null;//被创建的那个div ???this.con = null; ???this.runAwayInterval = null; ???this.init();};Mouse.prototype.init = function(){ ???// console.log("初始化id为 " + this.id + " 的mouse"); ???this.show();}Mouse.prototype.show = function(){ ???this.mes = document.createElement("div"); ???this.mes.setAttribute("id","mickey"); ???this.con = document.getElementById("container"); ???this.mes.style.opacity = 1; ???this.con.appendChild(this.mes); ???????this.mes.onclick = function() ???{ ???????getScore(); ???????this.con.removeChild(this.mes); ???????clearInterval(this.runAwayInterval); ???????removeOneMouse(this.id); ???}.bind(this); ???// console.log(this.con.offsetWidth - 100); ???this.mes.style.left = Math.random()*(this.con.offsetWidth - 100).toString()+"px"; ???var targetTop = Math.random()*(this.con.offsetHeight - 100) +50; ???this.mes.style.top =targetTop ?+"px"; ???// this.mes.style.top = 0 +"px"; ???this.runAwayInterval = setInterval(this.runAway.bind(this),200);}Mouse.prototype.runAway = function(){ ???// console.log("我是‘ "+ this.id +" ‘我正在跑..."); ???var opa = parseFloat(this.mes.style.opacity); ???opa -= 0.1; ???this.mes.style.opacity = opa; ???if(opa<=0) ???{ ??????this.lose(); ???}}// Mouse.prototype.beCatch = function()// {// ????this.con.removeChild(this.mes);// ????clearInterval(this.runAwayInterval);// }Mouse.prototype.lose = function(){ ???// console.log("我是‘ "+ this.id +" ‘我成功跳走了..."); ???this.con.removeChild(this.mes); ???clearInterval(this.runAwayInterval); ???removeOneMouse(this.id); ???loseScore();}
原生js面向对象写法
原文地址:https://www.cnblogs.com/JD85/p/9069976.html