时间戳

首页 > 解决方案 > 为什么下面的代码没有显示预期的结果

javascript - 为什么下面的代码没有显示预期的结果

问题描述

因此，我正在使用 HTML/CSS/JS 开发数字时钟，但由于某种原因，它无法按我预期的方式工作。有什么建议吗？提前致谢！它在片段上工作正常，但是当我尝试在浏览器中打开它时，我只看到黑色背景......

function startTime(){
  var date = new Date()
  var h = date.getHours() // 0 - 23
  var m = date.getMinutes() // 0 - 59
  var s = date.getSeconds() // 0 - 59
  var session = "AM"

  if (h == 0){
    h = 12
  }

  if (h > 12){
    h = h - 12 
    session = "PM"
  }

  h = (h < 10)? "0" + h : h
  m = (m < 10)? "0" + m : m
  s = (s < 10)? "0" + s : s
   
  var time = h + ":" + m + ":" + s + " " + session
  document.getElementById("digclock").innerHTML = time
  document.getElementById("digclock").textContent = time

  setTimeout(startTime, 1000) //1000ms = 1sec
}

startTime()
    body {
    background: black;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: Orbitron;
    letter-spacing: 7px;
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>
    
</head>
<body>
    <div class="clock" id="digclock" onload="startTime()"></div>
</body>
</html>

标签： javascripthtmlcss

解决方案

在下面的代码片段中，我为您想要的任务添加了 CSS。背景颜色是黑色的，因为body { background-color: black; }. 要使时钟在 rgeen 中着色，请使用{ color: green; }. 然后我使用包装器将时钟垂直和水平居中，如片段所示。

function startTime(){
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59
  var session = "AM";

  if (h == 0){
    h = 12;
  }

  if (h > 12){
    h = h - 12; 
    session = "PM";
  }

  h = (h < 10)? "0" + h : h;
  m = (m < 10)? "0" + m : m;
  s = (s < 10)? "0" + s : s;
   
  var time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("digclock").innerHTML = time;
  document.getElementById("digclock").textContent = time;

  setTimeout(startTime, 1000); //1000ms = 1sec
}

startTime();
body {
  background-color: black;
}

.wrapper {
  display: table;
  text-align: center;
  color: green;
  height: calc(100vh - 1em);
  width: 100%;
}

.clock {
  display: table-cell;
  vertical-align: middle;
}
<div class="wrapper"> 
  <div class="clock" id="digclock" onload="startTime()">
  </div>
</div>

推荐阅读