Question

我正在RStudio中创建Reveal.js幻灯片，我想包含一个带有倒数计时器的幻灯片，以便在演示过程中进行10分钟的休息。

我有一个带有计时器代码的externaml html文件（如下），并使用Rmd代码块将其包括在幻灯片中：

```{r, echo=FALSE}
htmltools::includeHTML("timer.html")
```

问题在于计时器在演示文稿文件打开时启动，我需要在特定幻灯片显示时启动它。

我尝试按照建议的here和Reveal.addEventListener()一起玩，但是我无法使其正常工作（我不太了解javascript）。

我真的很感谢任何建议。特别是，如果有人知道如何在RStudio中完成所有这些操作而不必随后手动编辑演示文稿html，那就太好了。谢谢！

<h1><section id="timer"></section></h1>

<script>
// 10 minutes from now
var current_time = Date.parse(new Date());
var deadline = new Date(current_time + 10*60*1000);

Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
}

var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML = minutes.pad(2) + " : " + seconds.pad(2);
    if (t < 0) {
        clearInterval(x);
        document.getElementById("timer").innerHTML = "Time is up";
    }
}, 1000);

</script>

当幻灯片可见时启动计时器

0 个答案: