Vue 数字时钟

用Vue写了一个简单的时间钟。

此时钟内容包括年月日及星期和时分秒。

功能分析：
1.年份，日期，时间的显示
2.动态的变化
3.获取本地时间方法

效果图演示

在这里插入图片描述

代码演示

注意：引入vue.min.js架包

<script src="js/vue.min.js"></script>

CSS样式

<script src="js/vue.min.js"></script>
<style>
html, body {height: 100%;
}body {background: #0f3854;background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);background-size: 100%;
}p {margin: 0;padding: 0;
}#clock {font-family: 'Share Tech Mono', monospace;color: #ffffff;text-align: center;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);color: #daf6ff;text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {letter-spacing: 0.05em;font-size: 80px;padding: 5px 0;
}
#clock .date {letter-spacing: 0.1em;font-size: 24px;
}
#clock .name {letter-spacing: 0.1em;font-size: 12px;padding: 20px 0 0;
}
</style>

Body内容

<body><div id="clock"><p class="date">{{ date }}</p><p class="time">{{ time }}</p><p class="name">数字时钟</p>
</div></body>

Vue内容

<script>
var clock = new Vue({el: '#clock',data: {time: '',date: ''}
});var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
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);
}
</script>