原生js面向對象寫法
阿新 • • 發佈:2018-05-22
.sh pro 成員方法 DC tel 一個 append init console
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面向對象寫法