当从另一台计算机按下相应的按钮时,使用Ajax更改按钮的颜色

时间:2013-04-06 22:27:21

标签: php html mysql css ajax

我正在做的是为自己编写一个程序,以便在我的社区剧场中使用。我们将在控制室(Sound Booth)和计算机后台安装一台电脑。

我在屏幕上制作一个10“按钮”的网格(更有可能是样式标签)。按钮中会出现文字,如“Mic 1 Battery Change”,它将是一种柔和的灰色:

    <a class="g">TEXT</a>

理想的目标是,如果控制室点击按钮,按钮应该变为红色:

    <a class="r">TEXT</a>

这应该在控制室计算机和后台的一个上进行更改,当人员后台再次点击按钮(红色时)时,它会在两个位置恢复为灰色,让控件知道任务有已经完成。

我无法想象使用数据库和ajax很难实现,但是我真的不如ajax的新手所以我不知道最好的方法。如果有人可以指向我的教程,我可以相当容易地适应这一点,或者如果知道如何做到这一点的人可以给我写一些简单的代码来解释它。那会很棒。

1 个答案:

答案 0 :(得分:1)

您可以通过JQuery将每隔x秒执行一次调用的活动表轮询到从活动表中读取的PHP脚本,这样您就可以检测用户是否按下了按钮。一个简单的方法是这样的: 用户按下按钮 - &gt;您使用时间戳将活动发送到活动表,因此您知道用户何时按下按钮(我们稍后会介绍)。 您可以通过JQuery向PHP发送帖子然后将其插入数据库来发送它。 活动表将包含: id(INT),primary,auto_increment。 按钮(INT)[单击的按钮ID] dateposted [timestamp] 现在,每次使用JQuery和PHP轮询该表/调用该表时,您将轮询时间(重要)和按钮ID,我经常这样做:

客户端:(每个按钮可以有不同的ID,如此)

    var auto_refresh = setInterval(
    function reloadstring()
    {
            $.get("checknewactivity.php", function(buttonid){
            if (buttonid == 1) /* Say he clicked the record button for example */
            {
               $("#recordbtn").css({"background-color":"#FF0000"}); /* Make the record button red */
            }
            });
    }, 1000); // refresh every 1000 milliseconds
/* And this would poll every 1 second as it says above */

服务器端:(checkactivity.php)

<?php
    checkactivity();
    function checkactivity() {

        $querystats = "SELECT activity.id, activity.buttonid, activity.dateposted FROM activity ORDER BY id DESC LIMIT 1";
        $resultstats = mysqli_query($yourdbhandle,$querystats);
        $num_stats = mysqli_num_rows($resultstats);
        $rowactivity = mysqli_fetch_assoc($resultstats);

        if($num_stats > 0) { /* If there was activity */

            $activity_id = $rowactivity["id"];
                $activity_date = $rowactivity["dateposted"]; //I can't indent this here for some reason.
            $activity_buttonid = $rowactivity["buttonid"];
            $timeactivity = strtotime( "$activity_date" );
            $actualtime = time(); //The actual time in a timestamp
            $timetoseconds = $actualtime - $timeactivity; //Actual time - timeactivity

            if($timetoseconds < 6) { /* If the last activity was sent less than 6 seconds ago */
                echo "$activity_buttonid"; //This would send the last clicked button id
            }
        }                       
    }
?>

这不是最好的方法,但这是一种简单的方法,最好的方法是使用webSockets或node.JS来避免一遍又一遍地轮询数据库,只将结果发送给客户端一次服务器找到更新。这是一份草案,并简要说明了如何做到这一点。