Question

我制作了一个格式如下的时钟。 HH:MM AM HH:MM S

我的问题是，只要秒数发生变化，分钟和小时数就会被推到适合的数字。我的字体Modern Sans不是等宽字体，这可能是导致这种情况的主要原因，但我想保留该字体，当然只有在可能的情况下。我还想让时钟以页面为中心谢谢你的帮助！

编辑：请全屏查看该代码段。它在普通盒子里有点怪异（呃）。

function updateClock() {
  var date = new Date();
  var h = (date.getHours() + 24) % 12 || 12,
    m = date.getMinutes(),
    s = date.getSeconds(),
    dm = "AM";
  if (h >= 12)
    dm = "PM";
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  $(".mt.h").html(h);
  $(".mt.m").html(m);
  $(".mt.s").html(s);
  $(".mt.dm").html(dm);
  setTimeout(updateClock, 1000);
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
}

* {
  font-family: "Modern Sans", Helvetica;
}

.main-content {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.search {
  vertical-align: middle;
}

.clock {
  color: rgba(0, 0, 0, 0.65);
}

.clock .unflex div {
  display: inline-block;
}

.clock .unflex {
  display: inline;
}

.mt.h,
.mt.m,
.mt.c {
  font-size: 250px;
}

.mt.s {
  font-size: 125px;
  color: rgba(250, 0, 0, 0.45);
}

.mt.dm {
  font-size: 75px;
}

.flexclock {
  position: relative;
  top: -125.5px;
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
</head>

<body onload="updateClock()">
  <div class="main-content">
    <div class="clock">
      <div class="unflex">
        <div class="mt h"></div>
        <div class="mt c">:</div>
        <div class="mt m"></div>
      </div>
      <div class="flexclock">
        <div class="mtsdm">
          <div class="mt dm"></div>
          <div class="mt s"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

由于不同的数字字符具有不同的宽度，并且为了避免文本在这样的情况下移动，可以在每个项目上设置足够宽的宽度，这样它们就不会影响周围环境。

另一种选择也是绝对定位，但我发现下面的内容更好，响应更快。

我在这里添加/更新了这些规则

.mt.h {
  width: 160px;
}
.mt.m {
  width: 320px;
}
.mt.c {
  width: 80px;
}

.mt.s {
  font-size: 125px;
  color: rgba(250, 0, 0, 0.45);
  width: 160px;
}

Stack snippet

function updateClock() {
  var date = new Date();
  var h = (date.getHours() + 24) % 12 || 12,
    m = date.getMinutes(),
    s = date.getSeconds(),
    dm = "AM";
  if (h >= 12)
    dm = "PM";
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  $(".mt.h").html(h);
  $(".mt.m").html(m);
  $(".mt.s").html(s);
  $(".mt.dm").html(dm);
  setTimeout(updateClock, 1000);
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
}

* {
  font-family: "Modern Sans", Helvetica;
}

.main-content {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.search {
  vertical-align: middle;
}

.clock {
  color: rgba(0, 0, 0, 0.65);
}

.clock .unflex div {
  display: inline-block;
}

.clock .unflex {
  display: inline;
}

.mt.h,
.mt.m,
.mt.c {
  font-size: 250px;
}

.mt.h {
  width: 160px;
}
.mt.m {
  width: 320px;
}
.mt.c {
  width: 80px;
}

.mt.s {
  font-size: 125px;
  color: rgba(250, 0, 0, 0.45);
  width: 160px;
}

.mt.dm {
  font-size: 75px;
}

.flexclock {
  position: relative;
  top: -125.5px;
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
</head>

<body onload="updateClock()">
  <div class="main-content">
    <div class="clock">
      <div class="unflex">
        <div class="mt h"></div>
        <div class="mt c">:</div>
        <div class="mt m"></div>
      </div>
      <div class="flexclock">
        <div class="mtsdm">
          <div class="mt dm"></div>
          <div class="mt s"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

当时钟滴答时，一切都会移动

1 个答案: