JS框架_(Vue.js)带有星期日期的数字时钟
Posted Cynical丶Gary
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS框架_(Vue.js)带有星期日期的数字时钟相关的知识,希望对你有一定的参考价值。
百度云盘 传送门 密码:tv1v
数字时钟效果:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>vue.js带有星期日期的数字时钟代码</title> <style> html, body { height: 100%; } body { background:#C7C7C7; } 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 .text { letter-spacing: 0.1em; font-size: 12px; padding: 20px 0 0; } </style> </head> <body> <script type="text/javascript" src="js/vue.min.js"></script> <div id="clock"> <h1>Gary</h1> <p class="date">{{ date }}</p> <p class="time">{{ time }}</p> <p class="text">数字时钟</p> </div> <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> </body> </html>
实现过程:
一、设置CSS样式
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
letter-spacing :增加或减少字符间的空白
font-size :设置字体的尺寸
padding:设置内边距
一个参数
padding:10px;
所有 4 个内边距都是 10px
两个参数
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
三个参数
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
四个参数
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
设置四个外边距的顺序是上、右、下、左,请记住顺时针即可。
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
padding: 20px 0 0;
}
二、引入vue.js
<script type="text/javascript" src="js/vue.min.js"></script> <div id="clock"> <h1>Gary</h1> <p class="date">{{ date }}</p> <p class="time">{{ time }}</p> <p class="text">数字时钟</p> </div>
创建数字时钟对象
<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>
setInterval(code,millisec) :可按照指定的周期(以毫秒计)来调用函数或计算表达式
code:要调用的函数或要执行的代码串
millisec :周期性执行或调用 code 之间的时间间隔,以毫秒计
function zeroPadding(num, digit) { var zero = \'\'; for(var i = 0; i < digit; i++) { zero += \'0\'; } return (zero + num).slice(-digit); }
num参数:返回系统时间
dight参数:当时钟小于两位数digit位数时候补,年份四位,月日为两位
js.slice() 方法可从已有的数组中返回选定的元素
updateTime()函数中调用zeroPadding()统一数字时钟时间格式
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()]; };
JavaScript Date 对象:传送门
getHours() :返回 Date 对象的小时 (0 ~ 23)
getMinutes() :返回 Date 对象的分钟 (0 ~ 59)
getSeconds() :返回 Date 对象的秒数 (0 ~ 59)
setFullYear() :设置 Date 对象中的年份(四位数字)
getMonth() :从Date 对象返回月份 (0 ~ 11)
getDate() :从Date 对象返回一个月中的某一天 (1 ~ 31)
以上是关于JS框架_(Vue.js)带有星期日期的数字时钟的主要内容,如果未能解决你的问题,请参考以下文章
带有 vue.js 的 bootstrap-datetimepicker 无法正常工作