<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>getter与setter——音乐播放器例子 </title> <style type="text/css"> div{ font-size: 299x; } </style> </head> <body> <div id="app"> <div class="play-btn"></div> </div> <script> class AudioPlayer{ constructor(){ this._status = 0; //要修改的属性 this.status = 0; //程序初始化时候的值 this.init(); } init(){ const audio = new Audio(); audio.src = ‘...‘; audio.oncanplay = () =>{ audio.play(); this.status = 1; } } get status(){ return this._status; } set status(val){ const STATUS_MAP = { 0:‘暂停‘, 1:‘播放‘, 2:‘加载中‘ }; document.querySelector(‘#app .play-btn‘).innerText = STATUS_MAP[val]; this._status = val; } } const audio = new AudioPlayer(); </script> </body> </html>
原文:https://www.cnblogs.com/rickdiculous/p/13688596.html