Home / Questions / 47732
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-02-05 03:54:32 +0800 CST 2020-02-05 03:54:32 +0800 CST

带结尾的随机词生成器

  • 772

我正在研究一个随机单词生成器，每次按下按钮时都会出现一个单词：

    <?php
     $frases = array(
     1 => "Una lavadora",
     2 => "Un movil",
     3 => "Una muñeca",
     );

     $numero = rand (1,3);

     echo "$frases[$numero]";
      ?>
      <input type="button" value="iniciar" onclick="document.location.reload();">

1-我怎样才能让它第三次按下按钮，你已经按下按钮三次！并停止生成单词？

2-有没有办法在不重新加载整个页面的情况下做到这一点？

javascript

2 Answers

  1. Best Answer

    仅添加一个计数器并通过 AJAX 请求单词。

    PHP 

    $frases = array(
  1 => "Una lavadora",
  2 => "Un movil",
  3 => "Una muñeca",
);

$numero = rand (1,3);

echo $frases[$numero];

    HTML

    <div class="word">
  <span id="wordOutput></span>
</div>
<button id="randomWordGen">Generate</button>

    JS

    document.addEventListener('DOMContentLoaded', function () {
  var clickTimes = 0;
  var btnRandomWord = document.getElementById('randomWordGen');
  var wordOutput = document.getElementById('wordOutput');

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', '/randomwordgen.php');
      request.onload = function () {
        // estado 4 = petición completada y respuesta recibida
        if (request.readyState === 4) {
          // código HTTP 200 = petición exitosa
          if (request.status === 200) {
            wordOutput.textContent = request.responseText;
            clickTimes++;
          }
        }
      };
      request.send(); // se envía la petición
    } else {
      wordOutput.textContent = 'Has superado el límite palabras';
    }
  });
});

    上面的方法只有在文档没有重新加载的情况下才有效，如果重新加载，它将再次具有它的三个单词。如果您希望它在用户登录时使用，您可以使用 cookie 代替计数器或更好sessionStorage。

    • 2

  2. 另一种方法：

    PHP

    <?php
// definimos un array de valores en php
$arrayPHP = array(
 0 =>"Una lavadora",
 1 => "Un movil",
 2 => "Una muñeca",
 );
?>

    HTML

    <html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p id="demo">Palabra!</p>
    <input type="button" value="iniciar" onclick="print()"> 
</body>

    javascript

    <script type="text/javascript">
// obtenemos el array de valores mediante la conversion a json del
// array de php
var arrayJS=<?php echo json_encode($arrayPHP);?>;

// Establecemos el valor minimo y maximo del array.
var max = <?= count($arrayPHP)-1 ?>;
var min = 0;
//Contador para controlar las pulsaciones del usuario.
var contador = 1;

function print() {
    var ind= randomIntFromInterval(min,max);
        if(contador <= 3) {
            document.getElementById("demo").innerHTML = arrayJS[ind];
            contador++;
        } else {
            document.getElementById("demo").innerHTML = "Ha llegado al maximo";
        }
}
//Genera numeros aleatorios entre un rango dado por parametro.
function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

    我们使用var arrayJS=<?php echo json_encode($arrayPHP);?>;.

    我在转换对象时遇到了一个问题，那就是php中数组的索引必须从0开始。

    • 1