<!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>

输入出生年份并自动计算当前年龄:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script type="text/javascript">

    let year = prompt("请输入年份");

    // 补充代码

    //使用变量接收输入的年份

    //定义一个类,设置默认的年龄为18

    class Age{

        constructor(){

            this.age='',

            this._age='18'

        }

        get age(){

            return this._age;

        }

        set age(val){

            if(val.length !== 4){

                this._age = 18

            }else{

                let date = new Date();  //当前日期

                let curYear = date.getFullYear();  //返回一个表示年份的四位数字

                this._age = curYear - val;

            }

        }

    }

        const agee = new Age();

        agee.age= year;

        document.write(agee.age)

    </script>

</body>

</html>

ES6 class——getter setter音乐播放器的更多相关文章

  1. ES6 class——音乐播放器实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 02 Vue介绍与安装，指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  3. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  4. ios开发：一个音乐播放器的设计与实现

    github地址:https://github.com/wzpziyi1/MusicPlauer 这个Demo,关于歌曲播放的主要功能都实现了的.下一曲.上一曲,暂停,根据歌曲的播放进度动态滚动歌词, ...

  5. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  7. 如何用vue打造一个移动端音乐播放器

    写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...

  8. SE Springer小组之《Spring音乐播放器》可行性研究报告三、四

    3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...

  9. 卡拉OK效果的实现-iOS音乐播放器

    自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...

随机推荐

  1. 微信小程序云开发-云函数-调用初始云函数获取openid

    一.调用初始云函数获取openid的两种方法 1.传统的success和fail 2.ES6的.then和.catch 3.编译结果 说明:初始云函数,是指刚创建完成的云函数.默认系统写的代码.

  2. Leetcode：169. 多数元素

    Leetcode:169. 多数元素 传送门 思路 一开始想到的一个很简单的做法就是hash法,直接利用打表记录次数再输出结果. 而利用BM算法可以令算法复杂度同样也在\(O(n)\)的情况下,将空间 ...

  3. Gos Log每次查询响应后自动清理临时文件，优化磁盘空间

    客户端清理 logc/controllers/file/file.go 压缩后清理原始文件 //压缩成功后 删除原文件 os.Remove(src) 返回后清理压缩文件 defer func() { ...

  4. Java逻辑运算符&与&&

    & 和&&的区别 && 短路与 ,一个条件不成立,跳出判断 & 与 , 全部判断 boolean b1 = false; int num = 9; if ...

  5. HTML之单词

    段落 paragraph <a href="https://www.runoob.com">超链接 anchor (锚点,引申为连接,link已经被html占用) Hy ...

  6. (python函数02)列表生成式

    (python函数02)列表生成式 示例代码  num = [i for i in range(1, 10)] print(num) ​ num = [i for i in range(1, 10) ...

  7. 【阿菜用工具】Slither：Solidity静态分析框架

    工具简介 Slither 是一个 python3 开发,用于检测智能合约(solidity)漏洞的静态分析框架. Slither 的 Github 地址:https://github.com/cryt ...

  8. [CTF] CTF入门指南

    CTF入门指南 何为CTF ? CTF(Capture The Flag)夺旗比赛,在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式.CTF起源于1996年DEFCON全球黑客大会 ...

  9. Leetcode_丑数问题

    1. 263. 丑数 给你一个整数 n ,请你判断 n 是否为 丑数 .如果是,返回 true :否则,返回 false . 丑数 就是只包含质因数 2.3 或 5 的正整数. 示例 1: 输入:n ...

  10. 面试必备：Android Activity启动流程源码分析

    最近大致分析了一把 Activity 启动的流程,趁着今天精神状态好,把之前记录的写成文章. 开门见山,我们直接点进去看 Activity 的 startActivity , 最终,我们都会走到 st ...