分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

原生js面向对象写法

发布时间:2023-09-06 01:55责任编辑:傅花花关键词:js面向对象

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved