ES6 class——getter setter音乐播放器
<!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音乐播放器的更多相关文章
- ES6 class——音乐播放器实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 02 Vue介绍与安装，指令系统 v-*、音乐播放器
VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
- ios开发：一个音乐播放器的设计与实现
github地址:https://github.com/wzpziyi1/MusicPlauer 这个Demo,关于歌曲播放的主要功能都实现了的.下一曲.上一曲,暂停,根据歌曲的播放进度动态滚动歌词, ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...
- 如何用vue打造一个移动端音乐播放器
写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...
- SE Springer小组之《Spring音乐播放器》可行性研究报告三、四
3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...
- 卡拉OK效果的实现-iOS音乐播放器
自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...
随机推荐
- vue3如何编写挂载DOM的插件
vue3 跟 vue2 相比,多了一个 app 的概念,vue3 项目的创建也变成了 // main.jsimport { createApp } from 'vue' import App from ...
- C#.NET 国密SM3withSM2签名与验签 和JAVA互通
C# 基于.NET FRAMEWORK 4.5 JAVA 基于 JDK1.8 一.要点 1.签名算法:SM3withSM2. 2.签名值byte[] 转字符串时,双方要统一,这里是BASE64. 二. ...
- Maven国内仓库
由于国外的官方Maven仓库比较慢,所以寻找国内的代理仓库. 网上找了一些博客,内容都是一模一样,并且不贴代理官方的说明. 我在阿里云的Maven仓库找到了官方说明. 下面直接贴配置指南: 配置指南 ...
- 【动画消消乐 】HTML+CSS 吃豆豆动画 073
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- Hadoop （8088）未授权访问
cd /vulhub/hadoop/unauthorized-yarn 加速下载环境 sudo vim /etc/docker/daemon.json 添加 {"registry-mirro ...
- php中英文字符串转字母转大小写
<?php //转小写 function lowercase($a){ $b = str_split($a, 1); $r = ''; foreach($b as $v){ $v = ord($ ...
- 百度地图API基本使用（一）
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言 由于最近项目有需要,所以最近开始研究百度地图API的使用,简单的介绍一下百度地图Jav ...
- 985硕艰难转行Android之路 加面经分享
个人情况介绍 本人为某末流985工科硕士,说来令人感慨,我的考研之路异常曲折,每次都觉得自己能十拿九稳,结果每次都阴差阳错,失之交臂,第一次因为那年目标院校大幅度提升初试线,导致差一分未过线,第二次换 ...
- PTui又加全景图 佳田未来城 of 安阳
今天我又拍了张360°无死角全景,因为我发现这种照片非常具有纪念意义,一个全景能胜过一千张照片. 我上一次的全景的地址:http://www.dushangself.site/dslab/?id=8 ...
- 常见web中间件漏洞（五）weblogic漏洞
继续整理有关中间件漏洞思路(仅做简单思路整理,不是复现,复现请参考大佬们的长篇好文,会在文章中列举部分操作) WebLogic是Oracle公司出品的一个application server,确切的说 ...