有关Js控件封装方法

最新推荐文章于 2023-08-17 20:04:41 发布

置顶小羊ccc

最新推荐文章于 2023-08-17 20:04:41 发布

阅读量311

点赞数

分类专栏： javascript Html 文章标签： javascript

本文链接：https://blog.csdn.net/ycc297876771/article/details/85036817

版权

Html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

直接看代码,可以自己试试~!!

这个控件主要是声音播放,成功or失败播放相应小型音频资源~!

/**
 @author Bill
 调用:
 container : 容器信息, 通过dom->id绑定 <input id="xxxx">
 showControls : 是否显示面板
 source : 资源路径
  
 注意配置好声音资源路径
 
 var video1 = new Ring({container:"test",showControls:true});
 video1.ring(1); // 1 OR 2
 

*/

window.Ring = function (param) {
    this.container = param.container;
    this._controls = param.showControls ? 'controls' : false; //是否显示播放器面板
    this._succSource = param.succSource ? param.succSource : "/Public/Common/ring/succ.wav";
    this._errSource = param.errSource ? param.errSource : "/Public/Common/ring/error.wav";
    this._ringPlay = null;
    this._video = null;
    this._init();
};
Ring.prototype = {
    constructor: Ring,
    _init: function () {
        var ring = this.createVideo();
        this.appendVideoToContainer(ring);
    },
    appendVideoToContainer:function (Ring) {
        if(!Ring){
            alert("铃声未成功初始化!");
            return false;
        }
        document.getElementById(this.container).appendChild(Ring);
    },
    createVideo:function(){
        var video = document.createElement("AUDIO");
        video.controls = this._controls;
        var _id = this.container + "_" + "video";
        video.setAttribute("id",_id);
        this._ringPlay = _id;
        this._video = video;
        return video;
    },
    ring:function(type){
        var _video = this.getVideoElement();
        if(type == 1){
            _video.src = this._succSource;
        }
        if(type == 2){
            _video.src = this._errSource;
        }
        var playVideo = document.getElementById(this._ringPlay);
        playVideo.play();
    },
    getVideoElement:function(){
        return this._video;
    }
};

注意仔细阅读!!!