如何创建在特定日期和时间启用的按钮,例如翻车促销

时间:2018-10-24 11:43:39

标签: javascript jquery html

我喜欢创建一个按钮,我们可以在翻车促销中看到该按钮,可以在特定的日期和时间单击该按钮。

我可以使用此代码禁用特定的时间。

按钮:

<div id="wrapper">
  <div id="myTimer"></div>
  <button type="button" id="myBtn" class="btnDisable" disabled onclick="alert('Finally!')">Please wait...</button>
</div>

CSS:

#wrapper {
  text-align:center;
  border:1px solid #7F7F7F;
  width:150px;
  margin:25px auto;
  padding:25px;
  background-color:#E3E4E4;
}

#myTimer {
  font:64px Tahoma bold;
  padding:20px;
  display:block;
}

button {
  width:125px;
  padding:10px;
}

.btnEnable {
  background-color:#E6F9D2;
  border:1px solid #97DE4C;
  color:#232323;
  cursor:pointer;
}

.btnDisable {
  background-color:#FCBABA;
  border:1px solid #DD3939;
  color:#232323;
  cursor:wait;
}

Javascript:

var sec = 15;
var myTimer = document.getElementById('myTimer');
var myBtn = document.getElementById('myBtn');
window.onload = countDown;

function countDown() {
  if (sec < 10) {
    myTimer.innerHTML = "0" + sec;
  } else {
    myTimer.innerHTML = sec;
  }
  if (sec <= 0) {
    $("#myBtn").removeAttr("disabled");
    $("#myBtn").removeClass().addClass("btnEnable");
    $("#myTimer").fadeTo(2500, 0);
    myBtn.innerHTML = "Click Me!";
    return;
  }
  sec -= 1;
  window.setTimeout(countDown, 1000);
}

创建这样的按钮。 image of button

但是我无法指定启用按钮的日期和时间。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您可以将setInterval像继续一样检查

setInterval(function(){
    var today = new Date();
    var dd = today.getDate();

   if ( dd == Date.parse ("your date") ) {
       // enable your button
   } 
}, 3000);