出于某种原因，我的 javascript 的两个“部分”相互干扰。我知道是这种情况，因为如果删除变色部分，时钟会突然出现。预期的结果是时钟出现在颜色的前面。我无法确定为什么会这样。谢谢!
var div = document.getElementById("full");
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
function getclockColor() {
var today = new Date();
var h = String(today.getHours());
var m = String(today.getMinutes());
var s = String(today.getSeconds());
var color = '#' + pad(h, 2) + pad(m, 2) + pad(s, 2);
return color;
}
function changeColor() {
div.style.backgroundColor = getclockColor();
}
setInterval(changeColor, 1000);
function clock() {
var time = new Date(),
hours = time.getHours(),
minutes = time.getMinutes(),
seconds = time.getSeconds();
document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);
function harold(standIn) {
if (standIn < 10) {
standIn = '0' + standIn
}
return standIn;
}
}
setInterval(clock, 1000);body {
overflow: hidden;
margin: 0;
padding: 0;
}
#full {
position: absolute;
height: 100%;
width: 100%;
}
.clock {
font-size: 4em;
z-index: 1;
color: red;
}<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/Users/zanolon/Desktop/Color Clock/Clock.css">
</head>
<body>
<div id="full"></div>
<div class="clock"></div>
</body>
</html>最佳答案
将 #full 元素的 z-index 设置为 -1 以将其推到时钟后面。
body {
overflow: hidden;
margin: 0;
padding: 0;
}
#full {
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
.clock {
font-size: 4em;
color: red;
}<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/Users/zanolon/Desktop/Color Clock/Clock.css">
</head>
<body>
<div id="full"></div>
<div class="clock"></div>
<script type="text/javascript">
var div = document.getElementById("full");
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
function getclockColor() {
var today = new Date();
var h = String(today.getHours());
var m = String(today.getMinutes());
var s = String(today.getSeconds());
var color = '#' + pad(h, 2) + pad(m, 2) + pad(s, 2);
return color;
}
function changeColor() {
div.style.backgroundColor = getclockColor();
}
setInterval(changeColor, 1000);
</script>
<script type="text/javascript">
function clock() {
var time = new Date(),
hours = time.getHours(),
minutes = time.getMinutes(),
seconds = time.getSeconds();
document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);
function harold(standIn) {
if (standIn < 10) {
standIn = '0' + standIn
}
return standIn;
}
}
setInterval(clock, 1000);
</script>
</body>
</html>关于javascript - 我在 javascript 中的函数不正确地重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48427584/