1

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

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

以下是需要时的代码：

草图.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
  //}
  
}

样式.css：

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

索引.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>
4

1 回答 1

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>

于 2020-11-22T05:53:28.303 回答