时间戳

首页 > 解决方案 > 在javascript中使用函数获取实时值

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'语句，我只想在按下按钮时自动更改值。提前致谢

标签： javascripthtmlp5.js

解决方案

所以我认为你的问题有几件事要解决。让我们首先关注您想要对现有代码执行的操作：您希望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 ,preScore=0;
let run = [1, 2, 3, 4, 5, 6, 7, 8, 9, 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;
}

这是您的代码的工作示例

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

推荐阅读