Javascript 使用Vue.js创建时钟_Javascript_Vue.js_Time_Timezone

Javascript 使用Vue.js创建时钟

javascript vue.js time

Javascript 使用Vue.js创建时钟,javascript,vue.js,time,timezone,Javascript,Vue.js,Time,Timezone,最近我发现了一个脚本，并开始开发它。但我遇到了一个问题我的计划是用Vue.js制作一个时钟。但在这个脚本中，时间是以24小时格式显示的。我需要把它做成12小时的格式除此之外，我想在上面添加不同的时区，如“亚洲/达卡”、“亚洲/印度”等以下是JavaScript代码： var clock = new Vue({ el: '#clock', data: { time: '', date: '' } }); var week = ['SUN', 'MON', 'TUE',

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

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

var clock=新的Vue({
el:'时钟'，
数据：{
时间：''，
日期：''
}
});
var week=[‘星期日’、‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’、‘星期六’]；
var timerID=setInterval（updateTime，1000）；updateTime（）；
函数updateTime（）{
var cd=新日期（）；
clock.time=zeroppadding（cd.getHours（），2）+'：'+zeroppadding（cd.getMinutes（），2）+'：'+zeroppadding（cd.getSeconds（），2）；
clock.date=zeroppadding（cd.getFullYear（），4）+'-'+zeroppadding（cd.getMonth（）+1,2）+'-'+zeroppadding（cd.getDate（），2）+'+week[cd.getDay（）]；
};
函数零填充（num，digital）{
var零=“”；
对于（变量i=0；i


为了获得帮助，我还提供了以下HTML文件：
HTML:

氙气钟
{{date}
{{time}
氙气生产
经过一些修改：
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()];
}