JS定时触发—–新订单提醒展示效果并提示音效(转)

Zeyu • 2022年6月28日下午8:26 • 前端, 后端, 技术开发 • 阅读 2002

展示效果

<!--CSS代码-->
<style>
.add_blank{
    position: absolute;
    left: 14%;
    width: 34%;
    font-size: 32px;
    height: 66px;
    text-align: center;
    background: #ff9966;
    line-height: 67px;
    display: none;
}
</style>

<!--达到要求弹出div-->
<div class="add_blank" >您有新的订单,请注意查看</div>

<!--新订单提醒-->
    <script type="text/javascript">
        function timeout() {
            var res;
            $.ajax({
                url:'index.php?act=dingshi',
                type:'get',
                datatype:'text',
                async:false,
                success:function (data) {
                    res = data;
                }
            });
            return res;
        }
        var i=timeout();

        function hello() {
            $.ajax({
                url:'index.php?act=dingshi',
                type:'get',
                datatype:'text',
                async:false,
                success:function (result) {
                    if (result != i){
                        i = result;
                        $(".add_blank").show()
                        playSound();
                    }
                }
            });
        }
        setInterval("hello()",10000);<!--10秒定时请求一次-->
    </script>
    <!--展示9秒关闭-->
    <script type="text/javascript">
        $(function(){
            setInterval(function(){
                $(".add_blank").hide();
            },9000);
        });
    </script>
    <!--订单声音提示-->
    <script>
        var playSound = function () {
                var borswer = window.navigator.userAgent.toLowerCase();
                if ( borswer.indexOf( "ie" ) >= 0 )
                {
                    //IE内核浏览器
                    var strEmbed = '<embed name="embedPlay" src="/admin/images/30.wav" autostart="true" hidden="true" loop="false"></embed>';
                    if ( $( "body" ).find( "embed" ).length <= 0 )
                        $( "body" ).append( strEmbed );
                    var embed = document.embedPlay;

                    //浏览器不支持 audion，则使用 embed 播放
                    embed.volume = 100;
                    //embed.play();这个不需要
                } else
                {
                    //非IE内核浏览器
                    var strAudio = "<audio id='audioPlay' src='/admin/images/30.wav' hidden='true'>";

                    if($("#audioPlay").length<=0){
                        $( "body" ).append( strAudio );
                    }

                    var audio = document.getElementById( "audioPlay" );

                    //浏览器支持 audio
                    audio.play();
                }
            }
    </script>

php代码

elseif ($_REQUEST['act'] == 'dingshi')
{
    //获取订单信息
    $count_order = $db->getOne(' SELECT COUNT(order_id) FROM ' . $ecs->table('order_info'));
    echo $count_order;
}

原创文章，作者：Zeyu，如若转载，请注明出处：https://jinzhijun.cn/develop/1161