Question

由于某种原因，我的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>

Answer 1

将#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>

Answer 2

您不需要单独拨打setInterval，只需拨打一个包含两个电话的功能。
绝对位置是将div定位在时钟div上。

＆＃13;

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.getElementsByClassName('clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);

  function harold(standIn) {
    if (standIn < 10) {
      standIn = '0' + standIn
    }
    return standIn;
  }
}
setInterval(function() {
  clock();
  changeColor();
}, 1000);

＆＃13;

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#full {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.clock {
  position: absolute;
  font-size: 4em;
  z-index: 999;
  color: red;
}

＆＃13;

<!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>

＆＃13;

我在javascript中的函数错误地重叠错误

2 个答案: