Question

我正在尝试将计时器添加到后台以仅显示空的输入框。否则，如果用户添加了数字，它就会消失。

if (!$("form input[span2]").val()) {
  $('.span2:empty').css("background", "rgb(255,220,200)");
  alert('Please fill empty fields');
}
else {......... }

Answer 1

如果您真的只是想要一个计时器，那是setTimeout可以实现的。

setTimeout(functionToExecute, time);

您的代码是要执行的功能。所以看起来像这样：

setTimeout(function(){
  if(!$("form input[span2]").val())
    {
      $('.span2:empty').css( "background", "rgb(255,220,200)" );
      alert('Please fill empty fields');
    }
    else{.........}
}, 5000);

Answer 2

假设您想让背景颜色在延迟后消失，则可以使用setTimeout()。我还建议使用类来应用样式，因为这使逻辑更简单。试试这个：

if(!$("form input[span2]").val()) {
  $('.span2:empty').addClass('error');
  alert('Please fill empty fields');

  setTimeout(function() {
    $('.span2:empty').removeClass('error');
  }, 3000); // 3 second timer, amend as required
} else {
  // valid logic here...
}

.error {
  background: rgb(255, 220, 200);
}

还要注意，您的jQuery选择器暗示该元素具有非标准的span2属性。我建议不要使用非标准属性，因为它们会导致某些奇怪的行为。使用data属性将自定义元数据与元素一起存储。

Answer 3

setTimeout 是一个本机JavaScript函数（尽管它可以与jQuery之类的库一起使用，我们将在后面看到），它会在指定的时间后调用函数或执行代码片段延迟（以毫秒为单位）。例如，如果您希望在访问者浏览页面一定时间后显示弹出窗口，或者希望在从元素上移除悬停效果之前等待一小段时间（以防用户意外操作，则此功能很有用）鼠标移出。）

例如：

function explode(){
  alert("Boom!");
}
setTimeout(explode, 2000);

引用函数的变量：

var explode = function(){
  alert("Boom!");
};
setTimeout(explode, 2000);

或

setTimeout(function(){alert("Boom!");}, 2000);

如何将计时器设置为CSS属性

3 个答案: