Question

我想以HH：mm：ss格式显示当前时间，我想显示通过['↑'，'↗'，'→'，'↘'，'↓'， '↙'，'←'，'↖']。（即HTML字形字符：↑，↗，→，↘，↓，↙，←和↖）微调器应每125毫秒更新一次，并在时钟滴答每秒钟时显示↑。

到目前为止，我可以使用以下代码显示当前时间

function checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }

    function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      // add a zero in front of numbers<10
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
      t = setTimeout(function() {
        startTime()
      }, 500);
    }
    startTime();

但是我无法显示每125ms移动一次的微调器

Answer 1

为澄清起见，您当前编写的代码正在设法不断更新时间，而无需刷新页面，还是只是在每次运行函数时正确显示时间？

至于我在下面写的内容，我只是在这里扔了些东西-不确定它是否可以工作，因为我看不到会触发它连续运行/循环并像动画一样运行的东西。

let index = 0
setInterval(() => {
  (index === 7) ? index = 0 : index++
}, 125)

const spinner = index => {
  const spinnerArray =  [ '↑', '↗', '→', '↘', '↓', '↙', '←', '↖' ]
  return spinnerArray[index]
}

document.getElementById('time').innerHTML = spinner(index) + " " h + ":" + m + ":" + s

Answer 2

从此处有关睡眠功能的问题转换：What is the JavaScript version of sleep()?

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
    const spinnerArray =  [ '↑', '↗', '→', '↘', '↓', '↙', '←', '↖' ]
    var spinCounter = 0;
    while(true){
      console.log('Taking a break...');
      await sleep(125);
      console.log('125 ms later');
      spinCounter++;
      if(spinCounter >= spinnerArray.length) spinCounter = 0;
      document.getElementById('time').innerHTML = spinnerArray[spinCounter] 
                                                  + " " h + ":" + m + ":" + s
    }
}

如何显示每125ms旋转一次的微调器

2 个答案: