我这里有一个 JavaScript 计时器，我正在尝试删除数字周围的空白，以便整个计时器都是绿色的。
我曾尝试使用 CSS 删除空白，但没有成功。我不确定是否必须使用 CSS 或 JS 来删除空格。
这是定时器的代码
可以找到图片here
我只想删除数字周围的空白。谢谢
var flagclock = 0;
var flagstop = 1;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
var thetable = document.getElementById("timerTable");
// Adjust limits and colors here
// Specify limits in seconds
var limit1 = 0;
color1 = "lightgreen";
var limit2 = 360;
color2 = "orange";
var limit3 = 600;
color3 = "red";
function startstop() {
var startdate = new Date();
var starttime = startdate.getTime();
if (flagclock == 0) {
startstop.value = 'Stop';
flagclock = 1;
counter(starttime);
} else {
startstop.value = 'Start';
flagclock = 0;
flagstop = 1;
splitdate = '';
}
}
function counter(starttime) {
output = document.getElementById('output');
clock = document.getElementById('clock');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if (flagstop == 1) {
timediff = timediff + stoptime
}
if (flagclock == 1) {
clock.value = formattime(timediff, '');
refresh = setTimeout('counter(' + starttime + ');', 100);
var secs = timediff / 1000;
var thecolor = "white";
if (secs > limit3) thecolor = color3;
else if (secs > limit2) thecolor = color2;
else if (secs > limit1) thecolor = color1;
thetable.style.backgroundColor = thecolor;
console.log(timediff / 1000)
} else {
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime, roundtype) {
if (roundtype == 'round') {
var ds = Math.round(rawtime / 100) + '';
} else {
var ds = Math.floor(rawtime / 100) + '';
}
var sec = Math.floor(rawtime / 1000);
var min = Math.floor(rawtime / 60000);
ds = ds.charAt(ds.length - 1);
if (min >= 15) {
startstop();
}
sec = sec - 60 * min + '';
if (sec.charAt(sec.length - 2) != '') {
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
} else {
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if (min.charAt(min.length - 2) != '') {
min = min.charAt(min.length - 2) + min.charAt(min.length - 1);
} else {
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec;
}<body onload="startstop();">
<table id="timerTable">
<tr>
<td>
<input class="timerArea" id="clock" type="text" value="00:00" style="text-align:center;font-weight:bold;font-size:14pt;" readonly><br>
</td>
</tr>
</table>
</body>最佳答案
为了让整个计时器变成绿色，可以设置CSS属性 background-color 的 <input>元素为“透明”。我还删除了元素的默认边框。
.timerArea {
text-align: center;
font-weight: bold;
font-size: 14pt;
background-color: transparent;
border: none;
}
这是一个演示:
var flagclock = 0;
var flagstop = 1;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
var thetable = document.getElementById("timerTable");
// Adjust limits and colors here
// Specify limits in seconds
var limit1 = 0;
color1 = "lightgreen";
var limit2 = 360;
color2 = "orange";
var limit3 = 600;
color3 = "red";
function startstop() {
var startdate = new Date();
var starttime = startdate.getTime();
if (flagclock == 0) {
startstop.value = 'Stop';
flagclock = 1;
counter(starttime);
} else {
startstop.value = 'Start';
flagclock = 0;
flagstop = 1;
splitdate = '';
}
}
function counter(starttime) {
output = document.getElementById('output');
clock = document.getElementById('clock');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if (flagstop == 1) {
timediff = timediff + stoptime
}
if (flagclock == 1) {
clock.value = formattime(timediff, '');
refresh = setTimeout('counter(' + starttime + ');', 100);
var secs = timediff / 1000;
var thecolor = "white";
if (secs > limit3) thecolor = color3;
else if (secs > limit2) thecolor = color2;
else if (secs > limit1) thecolor = color1;
thetable.style.backgroundColor = thecolor;
console.log(timediff / 1000)
} else {
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime, roundtype) {
if (roundtype == 'round') {
var ds = Math.round(rawtime / 100) + '';
} else {
var ds = Math.floor(rawtime / 100) + '';
}
var sec = Math.floor(rawtime / 1000);
var min = Math.floor(rawtime / 60000);
ds = ds.charAt(ds.length - 1);
if (min >= 15) {
startstop();
}
sec = sec - 60 * min + '';
if (sec.charAt(sec.length - 2) != '') {
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
} else {
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if (min.charAt(min.length - 2) != '') {
min = min.charAt(min.length - 2) + min.charAt(min.length - 1);
} else {
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec;
}
startstop();.timerArea {
text-align: center;
font-weight: bold;
font-size: 14pt;
background-color: transparent;
border: none;
}<table id="timerTable">
<tr>
<td>
<input class="timerArea" id="clock" type="text" value="00:00" readonly><br>
</td>
</tr>
</table>关于css - 如何删除 JS 计时器上数字周围的空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56453325/