reveal.js / html 幻燈片的倒數計時器
[英]Countdown timer for reveal.js / html slides
問題描述
我想在我的 reveal.js 平台中的特定幻燈片上集成倒數計時器。
為此，我使用了此 Codepen 示例中的代碼並將其集成到我的幻燈片中。 它適用於計時器的第一個實例，但當我嘗試將計時器添加到第二張幻燈片時不會出現。
// the js code for the timer (source: https://codepen.io/geoffgraham/pen/yLywVbW) // Credit: Mateusz Rybczonec const FULL_DASH_ARRAY = 283; const WARNING_THRESHOLD = 10; const ALERT_THRESHOLD = 5; const COLOR_CODES = { info: { color: "green" }, warning: { color: "orange", threshold: WARNING_THRESHOLD }, alert: { color: "red", threshold: ALERT_THRESHOLD } }; const TIME_LIMIT = 20; let timePassed = 0; let timeLeft = TIME_LIMIT; let timerInterval = null; let remainingPathColor = COLOR_CODES.info.color; document.getElementById("app").innerHTML = ` <div class="base-timer"> <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g class="base-timer__circle"> <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle> <path id="base-timer-path-remaining" stroke-dasharray="283" class="base-timer__path-remaining ${remainingPathColor}" d=" M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0 " ></path> </g> </svg> <span id="base-timer-label" class="base-timer__label">${formatTime( timeLeft )}</span> </div> `; startTimer(); function onTimesUp() { clearInterval(timerInterval); } function startTimer() { timerInterval = setInterval(() => { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; document.getElementById("base-timer-label").innerHTML = formatTime( timeLeft ); setCircleDasharray(); setRemainingPathColor(timeLeft); if (timeLeft === 0) { onTimesUp(); } }, 1000); } function formatTime(time) { const minutes = Math.floor(time / 60); let seconds = time % 60; if (seconds < 10) { seconds = `0${seconds}`; } return `${minutes}:${seconds}`; } function setRemainingPathColor(timeLeft) { const { alert, warning, info } = COLOR_CODES; if (timeLeft <= alert.threshold) { document.getElementById("base-timer-path-remaining").classList.remove(warning.color); document.getElementById("base-timer-path-remaining").classList.add(alert.color); } else if (timeLeft <= warning.threshold) { document.getElementById("base-timer-path-remaining").classList.remove(info.color); document.getElementById("base-timer-path-remaining").classList.add(warning.color); } } function calculateTimeFraction() { const rawTimeFraction = timeLeft / TIME_LIMIT; return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction); } function setCircleDasharray() { const circleDasharray = `${( calculateTimeFraction() * FULL_DASH_ARRAY ).toFixed(0)} 283`; document.getElementById("base-timer-path-remaining").setAttribute("stroke-dasharray", circleDasharray); } // this code is to initialize the slideshow Reveal.initialize({ hash: true, });
/* all css is for the timer*/ body { font-family: sans-serif; display: grid; height: 100vh; place-items: center; }.base-timer { position: relative; width: 300px; height: 300px; }.base-timer__svg { transform: scaleX(-1); }.base-timer__circle { fill: none; stroke: none; }.base-timer__path-elapsed { stroke-width: 7px; stroke: grey; }.base-timer__path-remaining { stroke-width: 7px; stroke-linecap: round; transform: rotate(90deg); transform-origin: center; transition: 1s linear all; fill-rule: nonzero; stroke: currentColor; }.base-timer__path-remaining.green { color: rgb(65, 184, 131); }.base-timer__path-remaining.orange { color: orange; }.base-timer__path-remaining.red { color: red; }.base-timer__label { position: absolute; width: 300px; height: 300px; top: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" /> <,doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1,0. user-scalable=no"> <title>reveal.js</title> <link rel="stylesheet" href="plugin/highlight/monokai.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>the timer appears here<br> <div id="app"></div> </section> <section>but does not appear here<br> <div id="app"></div> </section> </div> </div> </body> </html>
我不是很熟悉 Javascript.. 誰能告訴我我該怎么做才能讓計時器的第二個實例正常工作？
1 個解決方案
解決方案1
0 已采納 2022-03-03 06:50:38
reveal-countdown 插件已經提供了這個功能，無需自己構建！ 您可以通過下載 repo 並將其添加到插件/倒計時或通過npm來安裝它
在reveal.js幻燈片中，matheax中未經請求的字體大小更改
[英]unsolicited change of font size in mathjax in reveal.js slides
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.