使用javascript中的函数获取实时值

如何解决使用javascript中的函数获取实时值

我希望获得与用户单击按钮一样多的变量值。我正在使用P5.js编辑器。

let button;
let upScore =0,preScore=0;
let run = [1,2,3,4,5,6,7,8,9,0];


function setup() {
  createCanvas(200,200);
  background(128);


  button = createButton('click me');
  button.position(60,100);
  button.mousePressed(clickAdd);


  function clickAdd() {

    clickScore = random(run);
    createDiv(clickScore);
    upScore = updateScore(clickScore);
    return upScore;

  }

  function updateScore(score) {
    preScore = preScore + score;
    return preScore;
  }

  createDiv('Your score is ' + upScore);

}

html,body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <h3 align="center"> BOOK CRICKET </h3> 
    <script  src="sketch.js"></script>
  </body>
</html>

我想要的是每次用户按下“单击我”按钮时都改变分数总和。我不想每次都打印'score'语句，我只是想在按下按钮时自动更改该值。预先感谢

解决方法

因此，我认为您有几个问题需要解决。首先，让我们集中精力处理现有代码：每次单击按钮时，要让元素Your score is X更新为新分数。为此，您需要通过以下方式更改您的JavaScript代码：

let button;
let upScore =0,preScore=0;
let run = [1,2,3,4,5,6,7,8,9,0];
// Create a variable to keep in memory where is your text
let scoreDiv;


function setup() {
    createCanvas(200,200);
    background(128);

    button = createButton('click me');
    button.position(60,100);
    button.mousePressed(clickAdd);

    // Create a new div which will contain your script
    // and store it in scoreDiv
    scoreDiv = createDiv('Your score is ' + upScore);
}

/*
 * Move clickAdd() and updateScore() out of the setup() function you can declare them separately
 */
function clickAdd() {
    clickScore = random(run);
    // Remove this line: It creates a new div with the score each time you click the button
    // You don't want that
    //createDiv(clickScore);
    upScore = updateScore(clickScore);

    // Instead what you want is to update the content of the div with the new score like this
    scoreDiv.html('Your score is ' + upScore)
    return upScore;
}

function updateScore(score) {
    preScore = preScore + score;
    return preScore;
}

我们在这里做了一些事情：每次更新分数时（而不是每次使用createDiv()时（创建显示分数的新元素），我们在setup()中仅使用一次，并保留其内容在scoreDiv中。

scoreDiv现在具有P5.Element类型，从文档中您可以看到它具有一个函数html()，该函数接受一个字符串并使用它来更改div的内容。因此，在单击按钮时在调用的函数中调用它会更新文本并提供所需的结果。

我仍然想解决您有关“实时功能”的问题的标题。由于您使用的是p5.js，因此您可能想熟悉draw()函数：这是您在sketch.js文件（该文件已经编写了JavaScript代码的文件）中定义的函数。然后在每次刷新屏幕时执行。

该功能将使您可以移动形状和图形，也可以在那里更新界面。

因此，您可以做的一件事情是将scoreDiv.html('Your score is ' + upScore);行移至新的draw()函数，这不是一个很好的解决方案，但对于说明我的意思仍然有用。不必担心在单击按钮时在调用的函数中刷新界面，因为它将随每一帧刷新：

let button;
let upScore =0,0];
let scoreDiv;

function setup() {
  createCanvas(200,200);
  background(128);

  button = createButton('click me');
  button.position(60,100);
  button.mousePressed(clickAdd);

  scoreDiv = createDiv('Your score is ' + upScore);
}

function draw() {
  scoreDiv.html('Your score is ' + upScore)
}

function clickAdd() {
  upScore = updateScore(random(run));
}

function updateScore(score) {
  preScore = preScore + score;
  return preScore;
}

here is a working example of you code

这显然不是最有效的解决方案，但却是帮助您了解draw()的工作方式的好方法。当您对JS和HTML更加熟悉时，您可能会使用一些更复杂的框架来处理这种事情。

使用javascript中的函数获取实时值

如何解决使用javascript中的函数获取实时值

解决方法

相关推荐