jquery-toastr 消息提醒、播放音频、点击跳转

最新推荐文章于 2024-10-21 12:03:09 发布

原创

最新推荐文章于 2024-10-21 12:03:09 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #Laravel-admin

本文介绍了如何在Laravel-admin后台利用jQuery-toastr插件创建消息提醒功能，并结合音频播放，当有新订单时自动提醒。通过编辑index.blade.php文件和设置轮询请求路由控制器，实现了提醒效果。同时，注意Chrome的Autoplay政策需要调整以允许音频自动播放。此外，作者推荐了一个前端学习交流群。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用情景，有新的订单生成，后台进行消息提醒并播放音频（这里用到轮询简单实现）：下面附代码

1.找到laravel-admin 中的 index.blade.php 文件进行编辑

{
  
  {-- 音频通知 --}}
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201511/6571.mp3" loop="loop"></audio>

<script>
    function LA() {}
    LA.token = "{
  
  { csrf_token() }}";

    var getting = {
        url:'/admin/sendNotice',
        dataType:'json',
        success: function (res) {
            console.log(res);
            if(res.code == 200){
　　　　　　　　　　
                toastr.options.onclick = function(){
                    location.href='/admin/order';  // 点击跳转页面
                };
　　　　　　　　　 toastr.options.timeOut=120000; // 保存2分钟
　　　　　　　　　 toastr.warning(res.msg); // 提示文字

                var audio = document.getElementById('bg-music');  // 启用音频通知
                audio.play();
                setTimeout(function(){
                    audio.load(); // 1.5秒后关