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

发布时间：2020-12-13 13:11:02 所属栏目：PHP教程来源：网络整理

导读：我在桌面上有一个带有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 ref

我在桌面上有一个带有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分钟也会播放一次声音.

什么是最好的方法来保持页面不断加载？

我会将.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);
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!