代码之家  ›  专栏  ›  技术社区  ›  2316354654

如何在php中每隔几秒钟使用打印语句和图像的功能刷新div

  •  4
  • 2316354654  · 技术社区  · 7 年前

    我正在尝试用PHP和其他一些有用的语言构建一个浏览器纸牌游戏,用我一直想做的东西来测试和扩展我的PHP知识。但我读过并试图实现的每一个在线解决方案都不起作用,我也不知道为什么。我有这样的逻辑:

    //find game form
            print "<form method='post' action='game.php'>
            <label>Enter host generated game #</label><br>
            <label><input type='text' name='gamenumber'></label><br>
            <label><input type='submit' name='findgame' value='FindGame'></label><br><br>
            </form>";
    
            //host game button
            print "<form method='post' action='game.php'>
            <label><input type='submit' name='hostgame' value='HostGame'></label>
            </form>";
    
    //game logic
    
    
    
    if(isset($_POST['hostgame'])) 
        {
            $roomnumber = rand();
            print $roomnumber;
    
            insertField($Ausername,$roomnumber); //insert field GUI
    
            //link game to host for future field printing
            $query = "UPDATE game".$roomnumber." SET host='".$Ausername."' WHERE host='null'";
            $result = mysqli_query($link, $query);
    
            print "<div id='quote'>"; //populate host just disappears <meta http-equiv='refresh' content='5' />
    
            //populates self and opponents in hosts perspsective
            populatehost($roomnumber); 
    
            print "</div>";
    
    
        }
    
        if(isset($_POST['findgame'])) //this processes after user submits data.
        {
            $roomnumber = $_POST['gamenumber'];
            $_SESSION['gamenumber'] = $_POST['gamenumber'];
    
            //link game to find for future field printing
            $query = "UPDATE game".$roomnumber." SET find='".$Ausername."'WHERE find='null'";
            $result = mysqli_query($link, $query);
    
            print "<form method='post' action='game.php'>
            <label><input type='submit' name='startgame' value='StartGame'></label>
            </form>";
    
            //populates self and opponents in finds perspsective
            populatefind($roomnumber); 
    
        }
    
    
        if(isset($_POST['startgame'])) //this processes after user submits data.
        {
            print "<br>Game started.<br>";
    
            print "heads or tails?\n\n";
    
            print "<form method='post' action='game.php'>
            <label><input type='text' name='headstails'></label><br>
            <label><input type='submit' name='select' value='Select'></label><br><br>
            </form>";
    
            //finder always starts game
            populatefind($_SESSION['gamenumber']);
        }
    
        $gameStatus="";
        $flip = rand(1,2);
        $coin = "heads";
        $gameStarted = "game not started";
    
        if($flip==1)
            $coin="heads";
        else if($flip==2)
            $coin="tails";
    
        if(isset($_POST['headstails'])) //this processes after user submits data.
        {
            if($_POST['headstails']==$coin)
            {
                print "find game player goes first";
                $gameStarted = "game started";
                //notify find game player he goes first
                //do logic where he goes first
            }
            else
            {
                print "host game player goes first";
                $gameStarted = "game started";
                //notify host game player he goes first
                //do logic where he goes first
            }
    
            populatefind($_SESSION['gamenumber']);
        }
    

    这是我尝试的jquery函数,我粘贴在页面底部。

    ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js%22%3E%3C/script%3E">
        jQuery(function () {
            var $els = $('div[id^=quote]'),
                i = 0,
                len = $els.length;
    
            $els.slice(1).hide();
            setInterval(function () {
                $els.eq(i).fadeOut(function () {
                    i = (i + 1) % len
                    $els.eq(i).fadeIn();
                })
            }, 2500)
        })
    </script>
    
    </body>
    </html>
    

    因此,我能够为主持人和查找者打印字段,一旦查找者掷硬币,就会从他们的角度说谁先去。。但我很难从另一个球员的角度来看待这一点。我正在考虑通过使用完成所有打印的函数刷新div来实现这一点,但无论如何似乎都无法正常工作。我用很多不同的方法尝试了php睡眠方法,我尝试了一些jquery函数,但都没有成功。顺便说一句,populate host和populate find只是基于变量数组的大型表的函数。

    2 回复  |  直到 7 年前
        1
  •  7
  •   Vishnu Bhadoriya    7 年前

    您试图实现的这类事情将使用常规Ajax调用耗费大量服务器资源。

    类似问题: Link

    让我们以两个用户之间的聊天为例:

    用户的1页有一个Javascript计时器,每秒都会询问新消息: “嘿,服务器,给我发新消息。” 无论是否有新消息,服务器都将处理请求,搜索新消息以答复 “我现在没有你的留言” “这是您的新消息” . 用户2也一样。

    如果两个用户都将聊天页面打开10秒钟,您的服务器将收到20条新消息请求,将运行20次新消息搜索,并将发送20条带有新消息或“无新消息”回复的回复。即使两个用户都没有发送任何内容,只需保持页面打开即可。想象一下,如果1000个用户连接到您的聊天室!

    在这种情况下,最好的方法是套接字。在同一个聊天示例中,用户1和用户2将保持收听新消息的状态,而不是每秒询问新消息。当用户1发送消息时,服务器将通知用户2“我有一条新消息给你。这是。”

    如果连接了1000个用户,则根本没有问题。服务器将向套接字通道发送新消息,并通知所有连接的用户。没有延迟。

    在您的特定情况下,将这样工作:播放器1和播放器2正在侦听新消息。当玩家1点击卡片时,将触发服务器命令。服务器将接收并发送一条套接字通道消息:“嘿,所有等待新卡的人,这里是”,然后会通知每个玩家。立即。

    第一个场景中使用Javascript计时器的另一个问题是:如果增加计时器间隔,回复将延迟传递。

    套接字的另一个优点是:它独立于技术。PHP、Java、Node等。

    用于将WebSocket与Php结合使用的GitHub项目: Link

    You can see some socket demos here

    Here is a repository with some tests I ran when I tried Socket earlier

        2
  •  3
  •   SamratV    7 年前

    您可以这样做:

    setInterval(function refresh(){
      var value = Math.round(Math.random()*100);
      $("#target").addClass("hidden");
      $("#target").html(value);
      $("#target").removeClass("hidden");
    }
    , 1500);
    .hidden {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="target">
    </div>