更新变量而不刷新页面

时间:2014-07-30 01:55:41

标签: php html css

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Tylers inclass 3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>

            #game{

                position: relative;
                width: auto;
                display: block;
                top:150px;
                left:390px;
                margin-left: auto;
                margin-right: auto;


            }

            #bg{
                position: fixed;
                bottom: 310px;
                left:230px;



            }
            #input
            {
                position: relative;
                top: 670px;
                left: 450px;

                z-index: 1;

            }


        </style>
    </head>
    <body>
        <div id="input">
            <form method="post">
            <table>
                    <tr>
                        <td align="right">Name: </td>
                        <td align="left"><input type="text"id="name"/></td>
                    </tr>
                    <tr>
                        <td align="right">Bet: </td>
                        <td align="left"><input type="text"id="bet"/></td>
                        <td align="right">Credit: </td>
                        <td align="left"><input type="text" name="credit" value="100" readonly="true"id="credit"/></td>
                    </tr>

            </table>

        </form>
        </div>

        <div id="bg"> 
            <img src= "img/machine.png" width="1200" height="580" alt="machine"/>
        </div>

        <div id="h">

        </div>
        <div id="h1">

        </div>
        <div id="game">
            <?php

            function display() {
                //creating the array of pictures that will also be referenaced in the code as item
                $items = array(
                    '<a href="?item=cherry">  <img src= "img/cherries.jpg" width="150" height="150" alt="cherry"/></a>',
                    '<a href="?item=cherry">  <img src= "img/cherries.jpg" width="150" height="150" alt="cherry"/></a>',
                    '<a href="?item=lemon">  <img src="img/lemon.png" width="150" height="150" alt="lemon"></a>',
                    '<a href="?item=lemon">  <img src="img/lemon.png" width="150" height="150" alt="lemon"></a>',
                    '<a href="?item=lemon">  <img src="img/lemon.png" width="150" height="150" alt="lemon"></a>',
                    '<a href="?item=lemon">  <img src="img/lemon.png" width="150" height="150" alt="lemon"></a>',
                    '<a href="?item=lemon">  <img src="img/lemon.png" width="150" height="150" alt="lemon"></a>',
                    '<a href="?item=bar">  <img src="img/bar.jpg" width="150" height="150" alt="bar"></a>',
                    '<a href="?item=bar">  <img src="img/bar.jpg" width="150" height="150" alt="bar"></a>',
                    '<a href="?item=bar">  <img src="img/bar.jpg" width="150" height="150" alt="bar"></a>',
                    '<a href="?item=star">  <img src="img/star.png" width="150" height="150" alt="star"></a>',
                    '<a href="?item=star">  <img src="img/star.png" width="150" height="150" alt="star"></a>',
                    '<a href="?item=star">  <img src="img/star.png" width="150" height="150" alt="star"></a>',
                    '<a href="?item=star">  <img src="img/star.png" width="150" height="150" alt="star"></a>'
                );






                $num1 = $items[rand(0, 12)];
                $num2 = $items[rand(0, 12)];
                $num3 = $items[rand(0, 12)];
                echo $num1;
                echo '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
                echo $num2;
                echo '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';

                echo $num3;
                echo '<br><br><br><br>';
                echo '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';


                $credits = 100;
                $bet;

                //  if($items):
                //  endif;
                //echo $num2 = $items[$random_Num];
                // echo $num3 = $items[$random_Num];
                //setting a link to parent page to go back and play the full game again
                echo '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="./" id="goback"><img src="img/button.png" width="100" height="100" alt="star" onclick=""></a>';
                echo $_GET['name'];



                //game logic test cases for rock beating scissors paper beating rock and scissors beating paper
            }


            display();
            ?>
        </div>
    </body>
</html>
嘿,伙计们!我有个问题。所以我希望能够接受球员的名字和赌注并跟踪他们的出价。然而,我刷新或“更新”我的老虎机的方式是返回父页面的链接。换句话说,我只需点击即可刷新页面。如何在不重新加载页面的情况下单击按钮img更改这些图片。任何帮助都很有价值!谢谢

1 个答案:

答案 0 :(得分:0)

您可以通过ajax发送用户数据。 例如,在jQuery中

$(document).ready(function(){
     $("form").submit(function(event){
          event.preventDefault();
          $.post("sumbitName.php",{
                "name":$("#name").val(),
                "bet":$("#bet").val()
          },function(result){
               // Update...
          });
     });
 });