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

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

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

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

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

1.無參構造函數(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);
    };
    //獲取構造函數(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()">班級總人數(shù)</a></p>
    <p><a href=# onClick="classes.rename()">班級重命名</a></p>
</body>
</html>

2.有參數(shù)構造函數(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()">班級總人數(shù)</a></p>
    <p><a href=# onClick="classes.rename()">班級重命名</a></p>
</body>
</html>

3.Object方法

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

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

特點

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

快速開始

安裝

使用 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");嘗試一下

創(chuàng)建 Audio 對象

你可以使用document.createElement()方法創(chuàng)建 <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	返回表示音頻錯誤狀態(tài)的 MediaError 對象
loop	設置或返回音頻是否應在結束時重新播放
mediaGroup	設置或返回音頻所屬的組合（用于連接多個音頻元素）
muted	設置或返回音頻是否靜音
networkState	返回音頻的當前網絡狀態(tài)
paused	設置或返回音頻是否暫停
playbackRate	設置或返回音頻播放的速度
played	返回表示音頻已播放部分的 TimeRanges 對象
preload	設置或返回音頻是否應該在頁面加載后進行加載
readyState	返回音頻當前的就緒狀態(tài)
seekable	返回表示音頻可尋址部分的 TimeRanges 對象
seeking	返回用戶是否正在音頻中進行查找
src	設置或返回音頻元素的當前來源
textTracks	返回表示可用文本軌道的 TextTrackList 對象
volume	設置或返回音頻的音量

Audio 對象方法

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

標準屬性和事件

Canvas 對象同樣支持標準屬性和事件。

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

在線咨詢

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

您的項目需求

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

整合營銷服務商

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

特點

快速開始

效果演示

您的項目需求