p5.js 时间问题答案

【问题标题】：p5.js Time Issuep5.js 时间问题
【发布时间】：2020-11-21 19:45:12
【问题描述】：

p5.js 的新手并尝试创建一个时钟，理想情况下是一个滑动时钟。我已经成功创建了一个工作时钟，现在正在添加滑动效果。截至目前，我遇到了其他时间的错误，时间 1 和时间 2。这是发生了什么：Clock Bug 0-2,0-1,0

https://editor.p5js.org/miteshjethwa/present/zeYgP3rzx

下面是代码，以备不时之需：

sketch.js：

var myFont
var button
var activated
var myDesign

function preload () {
  myFont = loadFont("MajorMonoDisplay-Regular.ttf")
}

function setup() {
  createCanvas(600, 600);
  textAlign(CENTER, CENTER)
  
  fill('#000000')
  
  button = createButton("Show Date")
  button.position(10,10)
  button.size(100,25)
  button.mousePressed(pressFn)
  
  activated = false
}

function myDesign() {
    push()
  translate(width/2,height/2)
  
  textFont(myFont);
  
  //textSize(100)

  textSize(25)
    fill(255)
  text(nf(day(),2) + " " + nf(month(),2) + " " + year(), 0, 150)
    pop()
}

function pressFn() {
  if (activated) {
    activated = false }
      else {
        activated = true
      }
} 

function draw() {
  background(0);
  
  if (activated) {
    myDesign()
  }
  
  if (activated) {
    button.html("Hide Date")
  } else {
    button.html("Show Date")
  }
  
  translate(width/2,height/2)
  
  textFont(myFont);
  
  textSize(75)
  
  fill(255)
  
  text(nf(hour(),2) + " " + nf(minute(),2) + " " + nf(second(),2), 0, 0)
  
  fill(25)
  
  text(nf(hour(),2) + " " + nf(minute(),2) + " " + nf(second()-1,2), 0, -100)
  
  fill(12.5)
  
  text(nf(hour(),2) + " " + nf(minute(),2) + " " + nf(second()-2,2), 0, -200)
  
  //if (second() = 59) {
  //  second() = 00
  //}
  
}

style.css：

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

index.html:


<!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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

【问题讨论】：

期望的结果是什么？
对不起应该说，希望底部时间是实时的，上面的时间比实时时间晚 1 秒，然后上面的时间比实时时间晚 2 秒创建一个现在是静态的滑动效果，遇到当 seconds()=0 时显示 0-1 或 0-2 等的问题。
我相信我有一个解决方案，但我不确定如何正确地将其放入语法中：if s=-01 let s=59 if s=-02 let s=58

标签： time p5.js seconds

【解决方案1】：

最简单的方法是将时间状态存储在数组中。如果没有存储数组，您将需要使用模数和三元运算符进行大量数学运算，可能还需要做更多的事情。

这是一个使用 JavaScript 控制 HTML 元素的简单演示：

// you won't need this, this just gets the elements
const prev2 = document.querySelector("#prev2"),
  prev1 = document.querySelector("#prev1"),
  current = document.querySelector("#current");

//
//
//
//

let times = Array(3).fill(['','',''])

function draw() {
  if (second() !== +times[2][2]) {
    times.shift();
    times.push([hour(), minute(), second()].map(n=>n.toString().padStart(2, 0)));
  }

  // you would use text() here, like:
  // text(times[0].join`:`, x, y);
  prev2.innerText = times[0].join`:`;
  prev1.innerText = times[1].join`:`;
  current.innerText = times[2].join`:`;
}

//
//
//
//

// since p5 isnt working in snippets, this stuff below makes a mock version

setInterval(draw, 16.67);

function hour () {
  return new Date().getHours();
}

function minute () {
  return new Date().getMinutes();
}

function second () {
  return new Date().getSeconds();
}

<p id="prev2"></p>
<p id="prev1"></p>
<p id="current"></p>

【讨论】：

editor.p5js.org/miteshjethwa/sketches/s1eto41Op
[对象对象]
好的，所以我尝试将其添加到 HTML 和 JS 中，尝试使用和不使用我的时间部分并得出 [object Object] 的结果，p5.js 也使用 second() 而不是比 seconds() 例如，所以我调整了它们，但我无法弄清楚为什么它说 [object Object] 以及为什么它通常不起作用，我花了一整天时间并且无法将它们放在一起。谢谢你的帮助，真的很感激