如何使从02:00开始的计时器达到00:00,然后在06:00重新开始?
How can I make a timer that starts at 02:00 reaches 00:00 and then restarts at 06:00
如何制作一个计时器,它开始计数在02:00,当它达到00:00时,它将在06:00重新开始,然后再次计数,直到达到00:00,并开始从00:00开始计数。我已经有代码,当它达到00:00时,计数。
var direction = 'down';
var mins = 30;
var secs = mins * 60;
function colorchange(minutes, seconds) {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
var colon = document.getElementById('divide');
var color;
if (direction == 'up') {
color = 'black';
} else if (secs <= 30) {
color = 'red';
} else if (secs <= 59) {
color = 'orange';
}
minutes.style.color = seconds.style.color = colon.style.color = color
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
function countdown() {
setInterval(function() {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
minutes.value = getminutes();
seconds.value = getseconds();
colorchange(minutes, seconds);
if (direction == 'down') {
secs--;
if (secs <= 0) {
direction = 'up';
}
} else if (direction == 'up') {
secs++;
}
}, 1000);
}
countdown();
<div id="timer" style="width: 90%;">
<input id="minutes" type="text" style="width: 90%; border: none; background- color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -2%;">
<input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -42%;">
<span id="divide" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">: </span>
</div>
var direction = 'down';
var first = true; // added
var mins = 2; // changed
var secs = mins * 60;
function colorchange() {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
var colon = document.getElementById('divide');
var color="black";
if (secs <= 30) {
color = 'red';
} else if (secs <= 59) {
color = 'orange';
}
minutes.style.color = seconds.style.color = colon.style.color = color
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
function countdown() {
setInterval(function() {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
if (direction == 'down') {
secs--;
if (secs <= 0) {
if (first) { // added
first=false;
mins = 6;
secs = mins*60;
}
else direction = 'up'; // added
}
} else if (direction == 'up') {
secs++;
}
minutes.value = getminutes();
seconds.value = getseconds();
colorchange();
}, 1000);
}
countdown();
<div id="timer" style="width: 90%;">
<input id="minutes" type="text" style="width: 90%; border: none; background- color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -2%;">
<input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -42%;">
<span id="divide" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">: </span>
</div>
相关文章:
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- 如何在从顶部滚动时暂停转盘/滑块,并在滚动到顶部时重新开始
- 更新画布上的高度/宽度并重新开始绘制
- 如何删除元素的结束标记,添加一些文本,然后重新添加标记
- 将表单输入传递到高图表,然后重新生成图表
- 禁用.click(),然后重新启用它
- 单击一个按钮10次,然后重新加载页面
- 如何在第一次点击时突出显示链接;并在第二次单击时跟随它,除非在其他地方单击,然后重新初始化未高亮显示的状态
- 如果我重新加载页面,倒计时将重新开始 - 如何设置修复
- 重新开始并承诺取得进展
- 如何使用 Javascript 从字符串中间提取然后重新格式化文本
- JQuery 自动收报机通过减速和停止然后重新开始来播放
- 如何暂时禁用提交按钮 3 秒钟(提交时),然后重新启用它
- JQuery 可排序的“sortupdate”事件每次销毁可排序时都会触发额外的次数,然后重新添加
- 在aspx webform中从Javascript调用C#函数,然后重新加载页面
- 删除类,然后重新添加
- 如何重置 jquery 动画并重新开始
- 失败后重新开始承诺
- 从局部视图打开一个弹出窗口,然后重新加载父局部视图
- 如何使从02:00开始的计时器达到00:00,然后在06:00重新开始?