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>快去制作屬于我的時鐘吧！！！
總結
- 上一篇： python自增_Python的自增运算
- 下一篇： Springboot 常用注解