时间戳

首页 > 解决方案 > 如何在 php 中回显 javascript 变量以将其以形式或锚点传递

javascript - 如何在 php 中回显 javascript 变量以将其以形式或锚点传递

问题描述

我有一个javascript，它更像是一个在连续循环上运行以进行随机数加法的游戏，如果用户猜对了，则分数将增加+1，否则退出游戏并打印最终分数。

这是页面的代码：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>#</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="mathsaronstyle.css">

<style>
    body {
        zoom: 200%;
        }
</style>

</head>

<body style="background-image: linear-gradient(to right, #034378, #2d4e68);">
  <div class="container-fluid text-center" style="margin-top:100px !important;">
    <div id="display" class="well col-xs-12" style="box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);}">
      <div id="try-screen">
        <p id="try">Try Again</p>

        <p id="final-score">Your score was 0</p>

        <button class="submit" style="font-size: 0.5em;padding-bottom:15px !important;" ><strong><span>Claim </span> </strong></button>
        <button class="submit" id="restart-button" style="font-size: 0.5em; background-color:#BA470D; " ><strong ><span >Play Again </span> </strong></button>
      </div>

      <div id="working-screen">
        <div id="progressbar"></div>
        <p id="expression" style="display:inline-block;">7 + 7</p>
        <p id="result" style="display:inline-block;">= 14</p>
        <br><br>
        <div id="controls">
          <button id="tick"><i class="fa fa-check"></i></button>
          <button id="cross"><i class="fa fa-close"></i></button>
        </div>

      </div> <!-- end of working screen -->

    </div>
     <div id="score">
          <p>Score: </p>
     </div>
  </div> <!-- end of fluid container -->

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script>
    // Randomly create an expression
var tick = document.getElementById("tick");
var cross = document.getElementById("cross");
var restartButton = document.getElementById("restart-button");

var tryDisplay = document.getElementById("try-screen");
var workDisplay = document.getElementById("working-screen");

var finalScoreScreen = document.getElementById("final-score");
/*var progressScreen = document.getElementById("progress");*/
var progressBar = $("#progressbar");
var exprScreen = document.getElementById("expression");
var resScreen = document.getElementById("result");
var scoreScreen = document.getElementById("score");

var a, b, r, ir, chaos, isCorrect;
var score = 0;
var wrongAnswer = false;
var correctClick = 0;
// first, second, and result.

// Helper function to create a random member
function randomExpressionMember() {
  return Math.floor(Math.random() * 10 + 1);
}

// Create current expression
function createExpression() {
  a = randomExpressionMember();
  b = randomExpressionMember();
  // correct answer;
  r = a + b;
  // create a random result within the proximity of the number
  chaos = Math.floor(Math.random() * (Math.round(r * 0.7)) * 1.5 + Math.round(r/2) + 1);
  //console.log("chaos", chaos)
  if (chaos === r) { chaos += 1; }
  // make sure r is not the same as chaos

  // run a coin flip to see whether to display the correct or incorrect answer



  isCorrect = Math.round(Math.random()) ? true : false;
  // check whether what's displayed is true or not.
  console.log("Is Correct r displayed", isCorrect)
  return a, b, r, chaos, isCorrect; // add another variable to track if the expr should be true or not
}




function displayProgressBar() {
    // animate progress bar
    progressBar.width(0).animate(
        {
            width: "100%"
        },
        300 * 10,
        "linear",
        function() { 

          restart();

        }
    );
}


function displayExpression(a, b, r, chaos, isCorrect) {
  // Input the values in the fields.
  exprScreen.textContent = a + " + " + b;

  if (isCorrect) {
    resScreen.textContent = " = " + r;
  } else {
    resScreen.textContent = " = " + chaos;
  }

  scoreScreen.textContent = "Score: " + score;

}



function restart() {
  // clear screen
  progressBar.finish(); //test
  finalScoreScreen.textContent = "Your score was " + score + ".";
  scoreScreen.style.display = "none";
  workDisplay.style.display = "none";
  tryDisplay.style.display = "block";
  // Working with score
  wrongAnswer = false;
  score = 0;
  scoreScreen.textContent = "Score: " + score;
}

function runPlayerTurn() {
  createExpression();
  displayExpression(a, b, r, chaos, isCorrect);
  displayProgressBar();
  // take input and decide what to do next - increase the score or not. restart the game if they are wrong.

}

// Attach event listeners to buttons
tick.addEventListener("click", function() {
  console.log("clicked tick");
  progressBar.stop();
  // ATTENTION TO THIS: Cross can also be the right answer.
  if (isCorrect) {
    score += 1;
    console.log("correct answer");
    runPlayerTurn();
  } else {
    // exit the game? do nothing?
    wrongAnswer = true;
    console.log("incorrect answer");
    restart();
  }
}, false);

cross.addEventListener("click", function() {
  console.log("clicked cross");
  progressBar.stop();
  // ATTENTION TO THIS: Cross can also be the right answer.
  if (!isCorrect) {
    score += 1;
    runPlayerTurn();
  } else {
    // exit the game? do nothing?
    wrongAnswer = true;
    restart();
  }
}, false);

restartButton.addEventListener("click", function() {
  runPlayerTurn();
  tryDisplay.style.display = "none";
  workDisplay.style.display = "block";
  scoreScreen.style.display = "block";
}, false);

// testing
createExpression();
displayExpression(a, b, r, chaos);

// can create the first screen

function runGame() {
  //maybe don't need this yet.
 // while (!wrongAnswer) {
    runPlayerTurn();
    console.log("looped");
 // }

  // display start?
  // runTurns until the answer is wrong.
  // reset the game if the player is wrong.
}
// Happens every move (set) 
// calculate the answer. Randomize how the answer is displayed: half the times the correct answer and half the times an answer that is around that but not correct.
// Start with + then add -

// have a timer to go back each time the expression is displayed.

runGame();
</script>

</body>
</html>

然而，我只需要在id="final-score"的类上打印最终分数，并将其传递给 php 变量以将其与其他 php 变量一起插入数据库，并使用 GET 或 POST 将其传递到另一个页面。

任何帮助都非常感谢......

标签： javascriptphp

解决方案

推荐阅读