使用 Vue.js 创建一个时钟

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

我的计划是用 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>

从这里进行一些修改：

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 部分不会更改。

相关内容

最新更新

热门标签：