HTML5练习：自定义班级对象，至少三种形式

TML5练习：自定义班级对象，至少三种形式

自定义班级对象至少三种形式

包含属性：班级名称（name）、班级女生人数（gnum）、班级男生人数（bnum）、班级所属学院（Class-owned）

包含方法：班级人数总人数（sum,要求在浏览器中以警告对话框的形式弹出.alert）、班级重命名（rename，要求弹出输入框。prompt）

1.无参构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <Script language="javascript">

    function Classes() {
        //window.document.write("constructor()<br>");
        
    }
    var classes=new Classes();
    //定义属性
    classes.name="17软件3班";
    classes.gnum=23;
    classes.bnum=25;
    classes.Class_owned="大数据";
                
    //定义方法
    classes.sum=function() {
        alert(classes.gnum+classes.bnum);
    };
    classes.rename=function(){
        var MyStr=prompt("请输入名称");
        alert("班级新名称是："+MyStr);
    };
    //获取构造函数
    //window.document.write(classes.constructor + "<br/>");
    //window.document.write(classes.name + "," + classes.sum + "<br/>");
    //classes.sum();
    //classes.name();
    </Script>
    <p><a href=# onClick="classes.sum()">班级总人数</a></p>
    <p><a href=# onClick="classes.rename()">班级重命名</a></p>
</body>
</html>

2.有参数构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script language=JavaScript>
        function Classes(name, gnum, bnum, Class_owned){
            this.name=name;
            this.gnum=gnum;
            this.bnum=bnum;
            this.Class_owned=Class_owned;
            this.sum=function(){
                alert(this.gnum+this.bnum);
            }
            this.rename=function(){
                var MyStr=prompt("请输入名称");
                alert(MyStr);
            }
        }
        var classes=new Classes("17软件3班", 23, 25, "大数据");
        //classes.sum();
        //classes.rename();
    </script>
    <p><a href=# onClick="classes.sum()">班级总人数</a></p>
    <p><a href=# onClick="classes.rename()">班级重命名</a></p>
</body>
</html>

3.Object方法

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。

MuiPlayer 是一个开源的HTML5视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。

特点

各浏览器平台播放 ui 不能统一
ui 扩展之间以及状态处理容易产生冲突
在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同
媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题
具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放

快速开始

安装

使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

使用

1 使用 script 标签引入：

<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<div id="mui-player"></div>

或者使用模块管理器引入：

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2 定义播放器容器

<div id="mui-player"></div>

3 初始化构建播放器

// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp=new MuiPlayer({
    container:'#mui-player',
    title:'标题',
    src:'./static/media/media.mp4',
})

以上就能为初始化构建一个具有默认配置控件的视频播放器。

更多API基础配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

效果演示

基础效果

直播模式

播放字幕

播放弹幕

多窗口播放

更多内容大家可自行前往阅读。

开源地址：https://gitee.com/muiplayer/hello-muiplayer

Audio 对象

Audio 对象HTML5中新增的。。

Audio 对象代表着 HTML <audio> 元素。

访问 Audio 对象

你可以使用getElementById()来访问 <audio> 元素：

var x=document.getElementById("myAudio");尝试一下

创建 Audio 对象

你可以使用document.createElement()方法创建 <audio> 元素:

var x=document.createElement("AUDIO");

Audio 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频
buffered	返回表示音频已缓冲部分的 TimeRanges 对象
controller	返回表示音频当前媒体控制器的 MediaController 对象
controls	设置或返回音频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频的 CORS 设置
currentSrc	回当前音频的 URL
currentTime	设置或返回音频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频默认是否静音
defaultPlaybackRate	设置或返回音频的默认播放速度
duration	返回当前音频的长度（以秒计）
ended	返回音频的播放是否已结束
error	返回表示音频错误状态的 MediaError 对象
loop	设置或返回音频是否应在结束时重新播放
mediaGroup	设置或返回音频所属的组合（用于连接多个音频元素）
muted	设置或返回音频是否静音
networkState	返回音频的当前网络状态
paused	设置或返回音频是否暂停
playbackRate	设置或返回音频播放的速度
played	返回表示音频已播放部分的 TimeRanges 对象
preload	设置或返回音频是否应该在页面加载后进行加载
readyState	返回音频当前的就绪状态
seekable	返回表示音频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频中进行查找
src	设置或返回音频元素的当前来源
textTracks	返回表示可用文本轨道的 TextTrackList 对象
volume	设置或返回音频的音量

Audio 对象方法

方法	描述
addTextTrack()	在音频中添加一个新的文本轨道
canPlayType()	检查浏览器是否可以播放指定的音频类型
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回一个新的Date对象，表示当前时间轴偏移量
load()	重新加载音频元素
play()	开始播放音频
pause()	暂停当前播放的音频

标准属性和事件

Canvas 对象同样支持标准属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：Nessus使用教程
下一篇：8个简单且包容的表单设计技巧请查收

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5练习：自定义班级对象，至少三种形式

特点

快速开始

效果演示

您的项目需求