我正在构建或试图构建Firefox扩展。当您单击工具栏上的按钮时,弹出窗口打开,并且用户输入数字,然后该弹出窗口从该数字开始递减计数。但是,弹出窗口没有显示任何值。
JavaScript:
function timeInMinutesLeft(time){
let timeSetByUser=(time*60);//converting to seconds
let start=Date.now();
let elapsed = (Date.now() - start)/1000;//time elapsed in seconds
let timeLeft = Math.round(timeSetByUser - elapsed)
return timeLeft;
}
function set(tabs) {
let timesUp=False;
let timeInput=document.getElementById('timerValue');
let timeInputValue=timeInput.value();
let timeLeft = 2;
while(timelift !=0){
let interval = setInterval(function() {
timeLeft=timeInMinutesLeft(timeInputValue);
let timeOutput=document.getElementById('timeLeft');
timeOutput.value=timeLeft;
},1000);
}
document.getElementById("timeLeft").value = timeLeft;
if(timeLeft==0){
timesUp=True;
}
if(timesUp==True){
browser.tabs.sendMessage(tabs[0].id, {
command: "set"
});
}
}
HTML:
<div id="popup-content">
<h6 id=title></h6>
<input type="number" name="quantity" min="1" max="60" id="timerValue">
<p id="timeLeft"></p>
<div class="set button">Timer</div>
</div>
问题是,每次更改值重新创建elementSelector时,它都会失去其绑定,这就是DOM的工作方式。您需要让您的范围元素可以从您的间隔访问,例如:
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("timeLeft").innerHTML = t;
}
<!DOCTYPE html>
<html>
<body>
<div id="popup-content">
<h6 id=title></h6>
<input type="number" name="quantity" min="1" max="60" id="timerValue">
<p id="timeLeft"></p>
<div class="set button">Timer</div>
</div>
</body>
</html>