<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height:100px; border-radius: 50%; background-color: pink; position: absolute; } .div0{ background-color: red; } .div1{ background-color: aqua; } </style> </head> <body> <div id="div"></div> <script> //使用defineProperty设置get和set var div=document.getElementById("div");//获取div div.addEventListener("click",clickHandler);//给div做一个侦听事件 div._bool=false;//给div这个对象设置一个临时变量 Object.defineProperty(div,"bool",{ set:function(value){ this._bool=value; if(!value){ this.className="div0"; }else { this.className="div1"; } }, get:function(){ return this._bool; } }); function clickHandler(e) { this.bool=!this.bool; //也可以使用div.bool=!div.bool; } //加一个走动的功能 setInterval(animation,16); function animation() { // 此时的div.bool不可改为this.bool if(div.bool) return;//控制走还是停(开关) div.style.left=div.offsetLeft+2+"px"; } </script> </body> </html>
做一个小球点击可以变色和移动(使用defineProperty设置get和set)
最新推荐文章于 2022-10-08 13:23:00 发布