重新开始倒计时器,每当新用户登陆页面时,将其设置为120秒。

huangapple go评论101阅读模式
英文:

How do I restart countdown timer to 120 seconds every time a new user lands on the page?

问题

  1. <style>
  2. #countdown {
  3. font-size: 36px;
  4. font-weight: bold;
  5. color: white;
  6. text-align: center;
  7. margin: 20px 0;
  8. }
  9. </style>
  10. <p id="countdown"></p>
  11. <script>
  12. function updateCountdown() {
  13. let startTime = new Date("2023-02-28T15:22:00");
  14. const currentTime = new Date();
  15. let diffTime = startTime - currentTime;
  16. let totalSeconds = diffTime / 1000;
  17. while (totalSeconds <= 0) {
  18. startTime.setDate(startTime.getDate() + 7);
  19. diffTime = startTime - currentTime;
  20. totalSeconds = diffTime / 1000;
  21. }
  22. const days = Math.floor(totalSeconds / (24 * 60 * 60));
  23. const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
  24. const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
  25. const seconds = Math.floor(totalSeconds % 60);
  26. document.getElementById("countdown").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
  27. }
  28. setInterval(updateCountdown, 1000);
  29. </script>
英文:

I am trying to use this snippet to refresh a countdown timer to 120 seconds when a new user lands on the page. Any help is appreciated.

I am having trouble on two things: how to set the start date to the current time and then to have this countdown from 120 seconds vs. 7 days.

  1. &lt;style&gt;
  2. #countdown {
  3. font-size: 36px;
  4. font-weight: bold;
  5. color: white;
  6. text-align: center;
  7. margin: 20px 0;
  8. }
  9. &lt;/style&gt;
  10. &lt;p id=&quot;countdown&quot;&gt;&lt;/p&gt;
  11. &lt;script&gt;
  12. function updateCountdown() {
  13. let startTime = new Date(&quot;2023-02-28T15:22:00&quot;);
  14. const currentTime = new Date();
  15. let diffTime = startTime - currentTime;
  16. let totalSeconds = diffTime / 1000;
  17. while (totalSeconds &lt;= 0) {
  18. startTime.setDate(startTime.getDate() + 7);
  19. diffTime = startTime - currentTime;
  20. totalSeconds = diffTime / 1000;
  21. }
  22. const days = Math.floor(totalSeconds / (24 * 60 * 60));
  23. const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
  24. const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
  25. const seconds = Math.floor(totalSeconds % 60);
  26. document.getElementById(&quot;countdown&quot;).innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
  27. }
  28. setInterval(updateCountdown, 1000);
  29. &lt;/script&gt;

答案1

得分: 0

  1. 你可以使用

document.addEventListener('DOMContentLoaded', function() {
// 重置计时器
});

  1. 像这样
英文:

You can use

  1. document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
  2. // reset timer
  3. });

like this

huangapple
  • 本文由 发表于 2023年6月29日 07:04:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76577191.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定