php - 带有声音通知和闪烁的 div/table 单元格的 JQuery 墙板

Question

我有一个在大屏幕上显示结果的表内包含 SQL 查询的页面。

然后我浏览到包含以下代码的 index.php:

// <![CDATA[
$(document).ready(function() {

    // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
    $.ajaxSetup({ cache: false });    
    setInterval(function() {
        $('.container').load('data.php');
    }, 2000); // the "2000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]>

HTML:

<div class="container"><h3>Loading Data...</h3></div>

因此它会不断加载此页面。

我想做的是，如果任何查询包含需要对其采取行动的数据，表格单元格将闪烁 2 种颜色，并且每 5 分钟播放一次声音。

执行此操作并保持持续页面加载的最佳方法是什么？

Answer 1

我会将 .load() 更改为 ajax 调用，完成后调用一个函数。检查下面的脚本:

// Prepare the audio - replace the link with your own mp3
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2090.mp3');

// Global that will control the flashing / playing of sound
var alertUser = false;
$(document).ready(function() {
    $.ajaxSetup({ cache: false });      // Fix IE bug
    setInterval(function(){
        $.ajax({
            url: "data.php",
            complete: function( jq, content ){
                $('.container').html( jq.response );
                if( jq.response.indexOf( 'from' ) != -1 ) { // your logic goes here to decide the warning
                    alertUser = true;
                } else {
                    alertUser = false;
                }
            }
        }); 
    }, 2000);

    setInterval(function(){
        if( alertUser ) {
            // play tune
            audioElement.play();

            // flash background
            window.setTimeout( function(){
                $('.container').css('background-color','red')
            }, 200 );
            window.setTimeout( function(){
                $('.container').css('background-color','blue')
            }, 400 );
            window.setTimeout( function(){
                $('.container').css('background-color','transparent')
            }, 600 );
        }
    }, 1000);
});