HTML5練習(xí)：自定義班級對象，至少三種形式

TML5練習(xí)：自定義班級對象，至少三種形式

自定義班級對象至少三種形式

包含屬性：班級名稱（name）、班級女生人數(shù)（gnum）、班級男生人數(shù)（bnum）、班級所屬學(xué)院（Class-owned）

包含方法：班級人數(shù)總?cè)藬?shù)（sum,要求在瀏覽器中以警告對話框的形式彈出.alert）、班級重命名（rename，要求彈出輸入框。prompt）

1.無參構(gòu)造函數(shù)

<!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="大數(shù)據(jù)";
                
    //定義方法
    classes.sum=function() {
        alert(classes.gnum+classes.bnum);
    };
    classes.rename=function(){
        var MyStr=prompt("請輸入名稱");
        alert("班級新名稱是："+MyStr);
    };
    //獲取構(gòu)造函數(shù)
    //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()">班級總?cè)藬?shù)</a></p>
    <p><a href=# onClick="classes.rename()">班級重命名</a></p>
</body>
</html>

2.有參數(shù)構(gòu)造函數(shù)

<!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, "大數(shù)據(jù)");
        //classes.sum();
        //classes.rename();
    </script>
    <p><a href=# onClick="classes.sum()">班級總?cè)藬?shù)</a></p>
    <p><a href=# onClick="classes.rename()">班級重命名</a></p>
</body>
</html>

3.Object方法

開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術(shù)、學(xué)習(xí)、實用與各種有趣的內(nèi)容。本期推薦的是一個開源的 HTML5 視頻播放器插件——MuiPlayer。

MuiPlayer 是一個開源的HTML5視頻播放插件，其默認(rèn)配置了精美可操作的的播放控件，涉及了常用的播放場景，例如全屏播放、播放快進(jìn)、循環(huán)播放、音量調(diào)節(jié)等功能。支持 mp4、m3u8、flv 等多種媒體格式播放，解決大部分兼容問題，同時適應(yīng)在PC、手機(jī)端播放。

特點

各瀏覽器平臺播放 ui 不能統(tǒng)一
ui 擴(kuò)展之間以及狀態(tài)處理容易產(chǎn)生沖突
在不同環(huán)境下（android、ios、pc）針對 h5 video api 可能觸發(fā)事件的時機(jī)盡不相同
媒體格式存在各種兼容問題，muiplayer 處理了大多數(shù)在不同環(huán)境下播放的兼容問題
具有豐富的參數(shù)可以自定義播放器實例，通過輕松的配置即可完成自定義場景的視頻播放

快速開始

安裝

使用 npm 安裝：

npm i mui-player --save

使用 yarn 安裝：

yarn add mui-player

使用

1 使用 script 標(biāo)簽引入：

<!-- 引入基礎(chǔ)樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基礎(chǔ)腳本 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 初始化構(gòu)建播放器

// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個對象，該對象包括所有插件的配置
var mp=new MuiPlayer({
    container:'#mui-player',
    title:'標(biāo)題',
    src:'./static/media/media.mp4',
})

以上就能為初始化構(gòu)建一個具有默認(rèn)配置控件的視頻播放器。

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

效果演示

基礎(chǔ)效果

直播模式

播放字幕

播放彈幕

多窗口播放

更多內(nèi)容大家可自行前往閱讀。

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

Audio 對象

Audio 對象HTML5中新增的。。

Audio 對象代表著 HTML <audio> 元素。

訪問 Audio 對象

你可以使用getElementById()來訪問 <audio> 元素：

var x=document.getElementById("myAudio");嘗試一下

創(chuàng)建 Audio 對象

你可以使用document.createElement()方法創(chuàng)建 <audio> 元素:

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

Audio 對象屬性

屬性	描述
audioTracks	返回表示可用音頻軌道的 AudioTrackList 對象
autoplay	設(shè)置或返回是否在加載完成后隨即播放音頻
buffered	返回表示音頻已緩沖部分的 TimeRanges 對象
controller	返回表示音頻當(dāng)前媒體控制器的 MediaController 對象
controls	設(shè)置或返回音頻是否顯示控件（比如播放/暫停等）
crossOrigin	設(shè)置或返回音頻的 CORS 設(shè)置
currentSrc	回當(dāng)前音頻的 URL
currentTime	設(shè)置或返回音頻中的當(dāng)前播放位置（以秒計）
defaultMuted	設(shè)置或返回音頻默認(rèn)是否靜音
defaultPlaybackRate	設(shè)置或返回音頻的默認(rèn)播放速度
duration	返回當(dāng)前音頻的長度（以秒計）
ended	返回音頻的播放是否已結(jié)束
error	返回表示音頻錯誤狀態(tài)的 MediaError 對象
loop	設(shè)置或返回音頻是否應(yīng)在結(jié)束時重新播放
mediaGroup	設(shè)置或返回音頻所屬的組合（用于連接多個音頻元素）
muted	設(shè)置或返回音頻是否靜音
networkState	返回音頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)
paused	設(shè)置或返回音頻是否暫停
playbackRate	設(shè)置或返回音頻播放的速度
played	返回表示音頻已播放部分的 TimeRanges 對象
preload	設(shè)置或返回音頻是否應(yīng)該在頁面加載后進(jìn)行加載
readyState	返回音頻當(dāng)前的就緒狀態(tài)
seekable	返回表示音頻可尋址部分的 TimeRanges 對象
seeking	返回用戶是否正在音頻中進(jìn)行查找
src	設(shè)置或返回音頻元素的當(dāng)前來源
textTracks	返回表示可用文本軌道的 TextTrackList 對象
volume	設(shè)置或返回音頻的音量

Audio 對象方法

方法	描述
addTextTrack()	在音頻中添加一個新的文本軌道
canPlayType()	檢查瀏覽器是否可以播放指定的音頻類型
fastSeek()	在音頻播放器中指定播放時間。
getStartDate()	返回一個新的Date對象，表示當(dāng)前時間軸偏移量
load()	重新加載音頻元素
play()	開始播放音頻
pause()	暫停當(dāng)前播放的音頻

標(biāo)準(zhǔn)屬性和事件

Canvas 對象同樣支持標(biāo)準(zhǔn) 屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：Nessus使用教程
下一篇：8個簡單且包容的表單設(shè)計技巧請查收

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5練習(xí)：自定義班級對象，至少三種形式

特點

快速開始

效果演示

您的項目需求