使用 Vue.js 创建时钟答案

【问题标题】：Creating a clock with Vue.js使用 Vue.js 创建时钟
【发布时间】：2019-02-02 11:06:09
【问题描述】：

最近我找到了一个脚本并开始开发它。但我遇到了一个问题。

我的计划是用 Vue.js 做一个时钟。但在此脚本中，时间以 24 小时格式显示。我需要将其设置为 12 小时格式。

除此之外，我还想在其上添加不同的时区，例如“亚洲/达卡”、“亚洲/印度”等。

这是 JavaScript 代码：

var clock = new Vue({
el: '#clock',
data: {
    time: '',
    date: ''
}
  });

var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
 var timerID = setInterval(updateTime, 1000);updateTime();
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
  };

function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
    zero += '0';
}
return (zero + num).slice(-digit);
}

为了帮助，我还提供了下面的 HTML 文件：

HTML：

<!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>Xenon Clock</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Share+Tech+Mono'>
  <link rel="stylesheet" href="css/style.css">
 </head>
<body>
     <div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">Xenon Production</p>
  </div>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
    <script  src="js/index.js"></script>
  </body>
</html>

【问题讨论】：

我不明白问题出在哪里。
没有问题。我只是想修改它

标签： javascript vue.js time timezone

【解决方案1】：

经过一些修改from here:

function updateTime() {
  var cd = new Date();
  var hours = cd.getHours();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // The hour '0' should be '12'
  clock.time = zeroPadding(hours, 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2) + ' ' + ampm;
  clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
}

HTML 部分没有改变。

【讨论】：