<!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. Python 机器学习实战 —— 无监督学习（上）

    前言 在上篇<Python 机器学习实战 -- 监督学习>介绍了 支持向量机.k近邻.朴素贝叶斯分类 .决策树.决策树集成等多种模型,这篇文章将为大家介绍一下无监督学习的使用.无监督学习顾 ...

  2. 警告: Runner org.junit.internal.runners.ErrorReportingRunner (used on class cn.star.MybatisTest)

    bug描述: 在Springboot整合Junit的时候编写测试类进行测试时, 出现以下错误: 十一月 28, 2019 2:53:48 下午 org.junit.vintage.engine.des ...

  3. 研究java ResultSet结果集

    java的结果集,实现类D:\storage\respository\com\sinosoft\local\oracle\1.0\oracle-1.0.jar!\oracle\jdbc\driver\ ...

  4. 利用postman进行api接口开发

    场景: api接口开发时,经常使用一些工具来帮助设计开发.Yapi主要是在设计阶段进行api接口设计,统一前后端参数请求和返回体:swagger主要在开发阶段,用来显示实际上后端开发进度和接口情况:p ...

  5. C语言复习(一)

    类型为void*的指针代表对象的地址,而不是类型 如果需要使用另一个源文件中定义的变量,那么只需要在定义变量前加上extern关键字 ex: extern int x;//x在其他文件中定义 左值表达 ...

  6. 偷天换日 树形DP+背包

    A. 偷天换日 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较   题目描述 神偷对艺术馆内的名画垂涎欲滴准备大捞一把.艺术馆由若干个展览厅和若干 ...

  7. git 提代码时的相关命令，Mark一下

    以前用命令提代码都是复制粘贴,现在换了工作后,特别是回退代码的命令又忘了,去网上查了好久,心累.特此Mark一下 1. 打patch: 1.1 git diff >> ljh.patch ...

  8. Solon 1.5.22 发布

    Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...

  9. C++ //this 指针的使用 //1 解决名称冲突 //2 返回对象本身 用 *this

    1 //this 指针的使用 2 //1 解决名称冲突 3 //2 返回对象本身 用 *this 4 5 #include <iostream> 6 #include <string ...

  10. RabbitMQ入门案例

    RabbitMQ入门案例 Rabbit 模式 https://www.rabbitmq.com/getstarted.html 实现步骤 构建一个 maven工程 导入 rabbitmq的依赖 启动 ...