<!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. POJ2044 Weather Forecast 题解

    写了一个小时--不会--无耻地看题解去了-- 关键在于存储状态的方式,真没想到-- 每个状态要存当前坐标.天数和这个状态下四个角的情况,vis数组存整张图的访问情况,有天数.坐标.四个角的情况,只有这 ...

  2. 还在用Postman？来，花2分钟体验下ApiPost的魅力

    2分钟玩转APIPOST 本文通过简单介绍如何利用ApiPost调试接口和快速的生成接口文档,让您初步体验ApiPost的魅力! 1. API写完想要测试?试试模拟发送一次请求 新建接口,我想模拟发送 ...

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

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

  4. 教你如何使用FusionInsight SqoopShell

    摘要:Sqoop-shell是一个Loader的shell工具,其所有功能都是通过执行脚本"sqoop2-shell"来实现的. 本文分享自华为云社区<FusionInsig ...

  5. 来看看是什么原因导致生产服上的系统CPU高的？

    我们可能会遇到生产服务器CPU很高的问题,有时候能确定是哪个进程,但是不知道这个进程都在干什么,所以也无从下手,无法解决问题.只能不断的重启,重启等. 最近也看了[一线码农]的一些教程,觉得都很不错, ...

  6. Python3中的List列表的相关操作

    列表对象内建函数 1. append(obj) 在列表的末尾添加新元素obj.例: >>> a = ['a', 'b', 'c'] >>> a.append('d' ...

  7. Rancher v1.6.29 Docker单节点部署

    前言: Docker镜像中心,有两个版本的rancher(1.X),镜像名称为:rancher/server,而rancher(2.X)的镜像名称是rancher/rancher 去daocloud官 ...

  8. RadioButton 自定义样式(带动画)

    <Style x:Key="Radbtn" TargetType="{x:Type RadioButton}"> <Setter Proper ...

  9. java.lang.instrument.Instrumentation

    java.lang.instrument.Instrumentation 看完文档之后,我们发现这么两个接口:redefineClasses和retransformClasses.一个是重新定义cla ...

  10. idea 2019.3.3 系列产品破解

    所有软件版本要求 必须是2019.3.3版本,可破解idea, goland, datagrid, pycharm等系列产品. 编辑vmoptions 添加破解jar包 然后重新打开,输入激活码进行激 ...