基于计时器的 HTML JavaScript 条件 href 链接

Posted 2023-03-05

【中文标题】基于计时器的 HTML JavaScript 条件 href 链接

【英文标题】：HTML JavaScript Conditional href link based on timer

【发布时间】：2021-09-07 07:14:02

【问题描述】：

我正在尝试根据条件将用户重定向到特定页面。如果计时器仍在运行，则打开 booknow.html 如果计时器到期，则打开 booknowcode.html

伪代码

定时器仍在运行

用户单击“立即预订”按钮 如果条件： a) 如果计时器仍在运行 -> 将用户发送到 booknowcode.html 页面 b) 如果计时器过期 -> 将用户发送到 booknow.html 页面

// Set the date we're counting down to
var countDownDate = new Date("June 30, 2021 09:17:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() 

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";

  // If the count down is over, write Expired text 
  if (distance < 0) 
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  
  //===if timer still running then redirect to dicount page (distance more than zero) Start ===
  let link;

  if (distance <= 0) 
    link = "booknow.html";
   else 
    link = "booknowcode.html";
  
  document.getElementById("demo").innerHTML = link;
  //===if timer still running then redirect to dicount page (distance more than zero) End ===

, 1000);

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <a href="booknow.html">
    <button class="btn btn-info" type="button" onclick="">Book Now</button>
  </a>
</div>

<p id="demo"></p>

那么如何根据计时器条件将booknow.html替换为booknowcode.html？

【参考方案1】：

您应该设置href 而不是innerHTML。

document.querySelector("#conditional-button a").href = link;

【讨论】：

这将改变完整的 url，使用 setAttribute 而不是这个

@TimGivois setAttribute 在这种情况下会做同样的事情——试试看。另见：***.com/questions/3919291/…

是的，它对某些属性做同样的事情。对于 href 它不做同样的事情，另请参阅：javascript.info/…

@TimGivois 这只是检索属性的区别，而不是设置它。自己尝试或在此处查看结果：jsfiddle.net/1f57njt4

根据文档，我认为.href 和setAttribute 的行为与.href 和getAttribute 相同。这次我给你！

【参考方案2】：

像这样

版本 1

删除按钮并使其成为链接 给链接一个 ID 定时器到期时更改为document.getElementById("link").href = "booknowcode.html";

// Set the date we're counting down to
var countDownDate = new Date("June 30, 2021 09:17:25").getTime();
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;


// Update the count down every 1 second
var x = setInterval(function() 

  // Get today's date and time
  now = new Date().getTime();

  // Find the distance between now and the count down date
  distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";

// If the count down is over, write Expired text 
  if (distance < 0) 
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";

  //===if timer stops, the link changes  ===

    document.getElementById("link").href = "booknowcode.html";
  




, 1000);

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <a href="booknow.html" class="btn btn-info" id="link">Book Now</button>
</div>

第 2 版

删除按钮周围的链接并使其成为按钮 点击按钮添加事件监听器 在点击处理程序中测试距离 更改document.getElementById("demo").innerHTML = link; 运行时location = link

// Set the date we're counting down to
var countDownDate = new Date("June 30, 2021 09:17:25").getTime();
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;


// Update the count down every 1 second
var x = setInterval(function() 

  // Get today's date and time
  now = new Date().getTime();

  // Find the distance between now and the count down date
  distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";

  // If the count down is over, write Expired text 
  if (distance < 0) 
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  
  //===if timer still running then redirect to dicount page (distance more than zero) Start ===
  let link;



, 1000);
document.getElementById("but").addEventListener("click", function() 
  if (distance <= 0) 
    link = "booknow.html";
   else 
    link = "booknowcode.html";
  
  document.getElementById("demo").innerHTML = link;
  // change this to 
  // location  = link; 
  // when running

  //===if timer still running then redirect to dicount page (distance more than zero) End ===
)

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <button class="btn btn-info" id="but" type="button">Book Now</button>
</div>

<p id="demo"></p>

【讨论】：

您不应该使用按钮来创建链接。您可以更改锚的按钮，而不是更改 innerHTML，您可以使用 setAttribute

@TimGivois 查看第一版

【参考方案3】：

只需将您的新链接应用到<a>（我提供了一个数据属性以使我们的替换准确）

if (distance <= 0) 
  // ....
  document.querySelector('a[data-rel=book-link]').setAttribute('href', link)

我不知道你为什么在锚标记中有一个按钮，所以我删除了这个按钮并将 css 应用于a，它应该看起来一样。

// Set the date we're counting down to
//var countDownDate = new Date("June 30, 2021 09:17:25").getTime();
countDownDate = new Date().getTime() + 10000;
// Update the count down every 1 second
var x = setInterval(function() 

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";
  let link;

  // If the count down is over, write Expired text 
  if (distance <= 0) 
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
    link = "booknow.html";
    document.querySelector('a[data-rel=book-link]').setAttribute('href', link)

  //===if timer still running then redirect to dicount page (distance more than zero) Start ===
   else 
    link = "booknowcode.html";
  
  document.getElementById("demo").innerHTML = link;
  //===if timer still running then redirect to dicount page (distance more than zero) End ===

, 1000);

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <a data-rel='book-link' href="booknow.html" class="btn btn-info">Book Now</a>
</div>

<p id="demo"></p>