vue实现显示日期时间代码
代码语言:html
所属分类:其他
代码描述:vue实现显示日期时间代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Orbitron:700,900,500,400); html, body { width: 100%; height: 100%; } body { margin: 0; padding: 0; font-family: "Orbitron", sans-serif; font-weight: 700; background: #222222; color: #afeeee; display: flex; align-items: center; justify-content: center; } #app { width: 100%; height: auto; } #app #time { width: 40%; margin: 0 auto; text-align: center; font-size: 2.5em; text-shadow: 0px 2px 25px rgba(144, 244, 253, 0.6); } #app #time #ampm { font-size: 0.5em; } #app #days, #app #fullDate { width: 25%; margin: 0 auto; display: flex; text-align: center; align-items: center; justify-content: center; } #app .days { flex: 1; color: #444444; text-align: center; } #app .active { color: paleturquoise; text-shadow: 0px 2px 25px rgba(144, 244, 253, 0.6); } #app #fullDate { margin-top: 0.25em; text-shadow: 0px 2px 25px rgba(144, 244, 253, 0.6); } #app #sec { display: inline-block; width: 70px; } </style> </head> <body> <div id="app"> <div id="main"> <div id="time"> <span id="hours">{{hours}}</span><span id="min">{{minutes}}</span><span id="sec">{{sec}}</span> <span id="ampm">{{ampm}}</span> </div> <div id='days'> <div class="days" v-for="day in days" v-bind:class="{active:day.active}">{{day.text}}</div> </div> <div id="fullDate"> <span id="month">{{month}}</span> <span id="date">{{date}}</span> <span id="year">{{year}}</span> </div> </div> </di.........完整代码请登录后点击上方下载按钮下载查看
网友评论0