<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內(nèi)容

<body>

<div id="clock">
? ? <p class="date">{{ date }}</p>
? ? <p class="time">{{ time }}</p>
? ? <p class="name">數(shù)字時(shí)鐘</p>
</div>

</body>

Vue內(nèi)容

<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>

快去制作屬于我的時(shí)鐘吧?。?！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue組合式API如何正確解構(gòu)props不會丟失響應(yīng)性
響應(yīng)式?API?賦予了組合式?API?一大坨可能性的同時(shí),代碼精簡,雖然但是,我們應(yīng)該意識到響應(yīng)性的某些陷阱,比如丟失響應(yīng)性,在本文中,我們將學(xué)習(xí)如何正確解構(gòu)?Vue?組件的?props,使得?props?不會丟失響應(yīng)性
2024-01-01
vue-router命名路由和編程式路由傳參講解
今天小編就為大家分享一篇關(guān)于vue-router命名路由和編程式路由傳參講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
vue實(shí)現(xiàn)用戶登錄切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
很棒的vue彈窗組件
這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
vue組件發(fā)布成npm包
平常使用Vue開發(fā)時(shí),一個(gè)項(xiàng)目中多個(gè)地方需要用到的相同組件通常我們會封裝為一個(gè)公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
Vue3引入axios封裝接口的兩種方法實(shí)例
在vue項(xiàng)目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下
2022-05-05
vue運(yùn)行報(bào)錯(cuò)cache-loader的解決步驟
最近運(yùn)行vue項(xiàng)目的時(shí)候報(bào)錯(cuò)了,通過查找相關(guān)資料最終解決,下面這篇文章主要給大家介紹了關(guān)于vue運(yùn)行報(bào)錯(cuò)cache-loader的解決步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
關(guān)于Vue中的全局導(dǎo)航守衛(wèi)(beforeEach、afterEach)
這篇文章主要介紹了關(guān)于Vue中的全局導(dǎo)航守衛(wèi)(beforeEach、afterEach)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue中vue-router的使用說明(包括在ssr中的使用)
這篇文章主要介紹了vue中vue-router的使用說明(包括在ssr中的使用)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05