javascript - 在计时器上更改 jQuery 中的 CSS 背景颜色

Question

我必须在 JQuery 中通过 WordPress Quiz 和 Survey Master 插件的计时器创建一个函数。

只要计时器未超过 45 分钟，它就会显示为绿色，但超过后必须显示为红色(有关信息，计时器是倒计时器，目前预设为 3 小时)。

在我的研究中，我知道我必须使用这样的 css 函数

$('div.mlw_qmn_timer').css("background-color": "green");
$('div.mlw_qmn_timer').css("background-color": "red");

所以我不知道如何才能在 3 小时开始时获得 45 分钟的时间来更改背景。

Answer 1

您可以使用 setTimeout 在 45 分钟后更改颜色。

// Initially, set the background as green
$('div.mlw_qmn_timer').css("background-color", "green");

var interval = 45 * 60 * 1000; // `setTimeout` accepts time in millis

// Change the color to red after 45 minutes    
setTimeout(function() {
  $('div.mlw_qmn_timer').css("background-color", "red");
}, interval);

以下是一个演示，它执行完全相同的操作，但间隔为 10 秒:

// Initially, set the background as green
$('div.mlw_qmn_timer').css("background-color", "green");

var interval = 10000; // `setTimeout` accepts time in millis

// Change the color to red after 10 seconds
setTimeout(function() {
  $('div.mlw_qmn_timer').css("background-color", "red");
}, interval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mlw_qmn_timer">test</div>