(Javascript）如何将倒数计时器添加到选择选项

(Javascript) How do I add a countdown timer to a selection option

本文关键字：添加 计时器 选择 选项 倒数 Javascript      更新时间：2023-09-26

我想在选择选项中添加一个倒数计时器。这是 html 代码的一个片段：

<select id="patientSelect">
<option> Heart Attack, 65, ETA: <span id="timer"></span></option>
</select>

还有javascript：

$(document).ready(function(){
var count=30;
var counter=setInterval(timer, 1000);
function timer(){
    count--;
    if(count <= 0){
        clearInterval(counter);
        return;
    }
    document.getElementById("timer").innerHTML=count + " secs";
}
});

但只有当我将 id 放在选项标签中时，它才会显示（这也删除了所有当前的 html）。任何帮助，不胜感激。:-)

编辑：完美，谢谢大家！

试试这个

.HTML 

<select id="patientSelect">
<option id="timer">Heart Attack, 65, ETA: 30 secs</option>
</select>

JAVASCRIPT

$(document).ready(function(){
var count=30;
var counter=setInterval(timer, 1000);
function timer(){
    count--;
    if(count <= 0){
        clearInterval(counter);
        return;
    }
    document.getElementById("timer").innerHTML= "Heart Attack, 65, ETA: " + (count.toString()) + " secs";
}
});

这是因为您的标记无效，option元素不能有子元素，您可以选择option并使用 JavaScript 在原始字符串前置：

document.getElementById("timer").innerHTML = 'Heart Attack, 65, ETA:' +  count + " secs";
相关文章：