We_Relese/App/Relese/Views/Shared/Camp/_Effect.cshtml

@using WeApp.Helpers
@model string

<style>
    .effect-box {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: rgba(255,255,255,0.2);
    }

        .effect-box .effect-canvas {
            width: 100%;
            height: 100%;
        }
</style>
<div class="effect-box"></div>

@using (Html.BeginScripts())
{
    @*<script src="~/Content/V2/Effect/yanhua.js"></script>*@
    <script src="~/Content/V2/Effect/fireworks.js"></script>
    <script id="effect-info-script">
        var effectTimer,effectTimeDelay = 1000 * 10;
        $(function () {
            //PlayEffect("ZhaDan");
        });

        function PlayEffect(type) {
            var fun = window[type + "Play"];
            if (fun && typeof fun == "function") {
                ClearEffect();
                fun();
                effectTimer=   setTimeout(function () {
                    $('.effect-box').fadeOut(500, ClearEffect);
                }, effectTimeDelay);
            }
        }

        function ClearEffect() {
            clearTimeout(effectTimer);
            $('.effect-box .effect-canvas').remove();
            $('.effect-box').html('');
            $('#audio-hidden-effect').remove();
        }
        function YanHuaPlay() {
            $.metPageJs('/Content/V2/Effect/fireworks.js', 'fireworks-js');
            //$('.effect-box').html(`<canvas class="effect-canvas"></canvas>`);
            $('.effect-box').html(`<div class="effect-canvas"></div>`);
            //PlayEffectAudio("/Content/V2/Effect/yanhua.mp3");
            $('.effect-box').fadeIn();
            //YanHua($('.effect-box .effect-canvas'));
            $('.effect-box .effect-canvas').fireworks({
                sound: true, // 声音效果
                opacity: 0.7,
                width: '100%',
                height: '100%'
            });
        }

        function YanHua2Play() {
            $.metPageCss('/Content/V2/Effect/yanhua2.css', 'yanhua2-css');
            $('.effect-box').html(`<div class="effect-canvas"></div>`);
            var $line = $('<div class="line"><div class="spark"><div class="fire"></div></div></div>');
            var $firework = $('<div class="fireworks">'), $fireworks = $('<div class="box"><div class="x"><div class="class="y"><div class="z"></div></div></div></div>');
            for (var i = 0; i < 200; i++) {
                $firework.append($line.clone());
            }
            for (var j = 0; j < 5; j++) {
                $fireworks.find('.z').append($firework.clone());
            }
            $('.effect-box .effect-canvas').append($fireworks);
            $('.effect-box').fadeIn();
            PlayEffectAudio("/Content/V2/Effect/yanhua.mp3");
        }

        function ZhaDanPlay() {
            $.metPageCss('/Content/V2/Effect/zhadan.min.css', 'zhadan-css');
            $('.effect-box').html(`<div class="effect-canvas"></div>`);
            for (var i = 0; i < 224; i++) {
                $('.effect-box .effect-canvas').append(`<span></span>`);
            }
            $('.effect-box').fadeIn();
            PlayEffectAudio("/Content/V2/Effect/zhadan.mp3");
        }

        function PlayEffectAudio(url) {
            if ($('#audio-hidden-effect').length) {
                $('#audio-hidden-effect').remove();
            }
            var audio = document.createElement('audio');
            $('<div id="audio-hidden-effect" style="display:none">').append(audio).appendTo($('body'));
            audio.src = url;
            audio.loop = true;
            audio.play();
        }

        iwbHub.client.getEffectCmd = function(msg) {
            console.log('getEffectCmd: ', msg);
            if (msg) {
                try {
                    var data = msg;// JSON.parse(msg);
                    if ('@(Model)'.indexOf(data.no)>-1) {
                        PlayEffect(data.effect);
                    }
                } catch (e) {
                    console.log('getEffectCmd: ', e);
                }
            }
        };
    </script>
}