第一步,按钮控制实时提醒
<form class="layui-form roll-nav" style="margin-left: 81%;margin-top: -5px;" action="">
<input type="checkbox" checked="" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
</form>
第二步,在页面中加一个audio,,加载你引用的音频文件,并隐藏掉
<audio id='audioPlay' src='{__FRAME_PATH}notice.mp3' hidden='true'>
第三步,利用js中的setInterval() 方法一直轮询查找后台返回的 ordernum 值,当值大于0 且实时提醒开关打开时,执行音频播放。
<script>
layui.use(['form'], function(){
var form = layui.form
,layer = layui.layer
//监听实时提醒开关
var timer;
form.on('switch(switchTest)', function(data){
if(this.checked){
layer.msg('实时提醒:'+ (this.checked ? '已开启' : 'false'), {
offset: '6px'
});
timer = setInterval(domusic, 5000);
function domusic(){
var ordernum = $('#ordernum').html().substr(0,1);
if(ordernum>0){
document.getElementById('audioPlay').play();
}
}
domusic();
}else{
layer.msg('实时提醒:已关闭', {
offset: '6px'
});
clearInterval(timer);
}
});
});
</script>