vue2實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果
本文實(shí)例為大家分享了vue2實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果的具體代碼,供大家參考,具體內(nèi)容如下
1.vue2+純css實(shí)現(xiàn)
預(yù)覽效果:
2.代碼如下:
<template> ? ? <div class="main"> ? ? ? ? <div class="time"> ? ? ? ? ? ? <div class="hour_wrap"> ? ? ? ? ? ? ? ? <div class="hour_item" :style="{transform:'translate(-50%,-50%)'+'rotate('+30*(index+1)+'deg)'}" v-for="(item,index) in 12" :key="index"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{index+1}} ? ? ? ? ? ? ? ? ? ? ?<div class="ke"></div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="minute_wrap"> ? ? ? ? ? ? ? ? <div class="minute_item" :style="{transform:'translate(-50%,-50%)'+'rotate('+6*(index+1)+'deg)'}" v-for="?? ??? ??? ??? ??? ??? ?(item,index) in 60" :key="index"> ? ? ? ? ? ? ? ? ? ? ?<div class="ke"></div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="hour_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+30*hour+'deg)'}"></div> ? ? ? ? ? ? <div class="minute_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+6*minute+'deg)'}"></div> ? ? ? ? ? ? <div class="second_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+6*second+'deg)'}"></div> ? ? ? ? </div> ? ? </div> </template> <script> export default { ? ? data(){ ? ? ? ? return{ ? ? ? ? ? ? interval:{}, ? ? ? ? ? ? date:'', ? ? ? ? ? ? hour:0, ? ? ? ? ? ? minute:0, ? ? ? ? ? ? second:0, ? ? ? ? } ? ? }, ? ? mounted(){ ? ? ? ? this.interval = setInterval(()=>{ ? ? ? ? ? ? this.date = this.getDate(); ? ? ? ? ? ? this.hour = this.date.toString().split(' ')[1].split(':')[0]; ? ? ? ? ? ? this.minute = this.date.toString().split(' ')[1].split(':')[1]; ? ? ? ? ? ? this.second = this.date.toString().split(' ')[1].split(':')[2]; ? ? ? ? },1000); ? ? }, ? ? beforeDestroy(){ ? ? ? ? clearInterval(this.interval); ? ? }, ? ? methods:{ ? ? ? ?getDate(time,format){ ?? ? ? ?var tf = function (i) { ?? ? ? ? ? ?return (i < 10 ? '0' : '') + i ?? ? ? ?}; ?? ? ? ?var now = time?new Date(time):new Date(); ?? ? ? ?var year = now.getFullYear(); ?? ? ? ?var month = now.getMonth() + 1; ?? ? ? ?var date = now.getDate(); ?? ? ? ?var hour = now.getHours(); ?? ? ? ?var minute = now.getMinutes(); ?? ? ? ?var second = now.getSeconds(); ?? ? ? ?if(format=='yyyy-mm-dd HH:mm:ss'){ ?? ? ? ? ?return year + "-" + tf(month) + "-" + tf(date)+' '+hour+':'+tf(minute)+':'+tf(second); ?? ? ? ?}else{ ?? ? ? ? ?return year + "/" + tf(month) + "/" + tf(date)+' '+hour+':'+tf(minute)+':'+tf(second); ?? ? ? ?} ?? ?} ? ? } } </script> <style scoped lang="less"> .time{ ? ? border-radius:50%; ? ? width: 140px; ? ? height: 140px; ? ? border: 1px solid #000; ? ? position: relative; ? ? .hour_wrap{ ? ? ? ? width: 100%; ? ? ? ? height: 100%; ? ? ? ? position: absolute; ? ? ? ? left: 0; ? ? ? ? top: 0; ? ? ? ? z-index: 3; ? ? ? ? .hour_item{ ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? top: 50%; ? ? ? ? ? ? left: 50%; ? ? ? ? ? ? height: 100%; ? ? ? ? ? ? width: 12px; ? ? ? ? ? ? font-size: 12px; ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? transform-origin: 6px 70px;? ? ? ? ? ? ? //transform: translate(-50%,-50%); ? ? ? ? ? ? .ke{ ? ? ? ? ? ? ? ? width: 3px; ? ? ? ? ? ? ? ? height: 8px; ? ? ? ? ? ? ? ? background-color: #000; ? ? ? ? ? ? ? ? margin: 0 auto; ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? .minute_wrap{ ? ? ? ? width: 100%; ? ? ? ? height: 100%; ? ? ? ? position: absolute; ? ? ? ? left: 0; ? ? ? ? top: 0; ? ? ? ? z-index: 2; ? ? ? ? .minute_item{ ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? top: 50%; ? ? ? ? ? ? left: 50%; ? ? ? ? ? ? height: 100%; ? ? ? ? ? ? width: 10px; ? ? ? ? ? ? font-size: 12px; ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? transform-origin: 5px 70px;? ? ? ? ? ? ? //transform: translate(-50%,-50%); ? ? ? ? ? ? .ke{ ? ? ? ? ? ? ? ? width: 2px; ? ? ? ? ? ? ? ? height: 4px; ? ? ? ? ? ? ? ? background-color: #000; ? ? ? ? ? ? ? ? margin: 0 auto; ? ? ? ? ? ? ? ? margin-top: 10px; ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? .hour_hand{ ? ? ? ? width: 3px; ? ? ? ? height: 30px; ? ? ? ? background-color: #000; ? ? ? ? position: absolute; ? ? ? ? top: 50%; ? ? ? ? left: 50%; ? ? ? ? transform-origin: 1.5px 30px; ? ? } ? ? .minute_hand{ ? ? ? ? width: 2px; ? ? ? ? height: 50px; ? ? ? ? background-color: #000; ? ? ? ? position: absolute; ? ? ? ? top: 50%; ? ? ? ? left: 50%; ? ? ? ? transform-origin: 1px 50px; ? ? } ? ? .second_hand{ ? ? ? ? width: 1px; ? ? ? ? height: 60px; ? ? ? ? background-color: #000; ? ? ? ? position: absolute; ? ? ? ? top: 50%; ? ? ? ? left: 50%; ? ? ? ? transform-origin: 0.5px 60px; ? ? } } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue編寫炫酷的時(shí)鐘插件
- Vue實(shí)現(xiàn)數(shù)字時(shí)鐘效果
- vue實(shí)現(xiàn)電子時(shí)鐘效果
- vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果(開箱即用)
- vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
- vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件(已發(fā)布到npm的vue2插件,開箱即用)
- 基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
- vue.js實(shí)現(xiàn)帶日期星期的數(shù)字時(shí)鐘功能示例
- 用Vue.js開發(fā)網(wǎng)頁時(shí)鐘
相關(guān)文章
解決VueCil代理本地proxytable無效報(bào)錯(cuò)404的問題
這篇文章主要介紹了解決VueCil代理本地proxytable無效報(bào)錯(cuò)404的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過實(shí)例代碼介紹了父頁面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02分析 Vue 中的 computed 和 watch 的區(qū)別
這篇文章分析 Vue 的 computed 和 watch 的區(qū)別,computed 用來監(jiān)控自己定義的變量,頁面上可直接使用。watch 是監(jiān)測(cè) Vue 實(shí)例上的數(shù)據(jù)變動(dòng),通俗地講,就是檢測(cè) data 內(nèi)聲明的數(shù)據(jù),需要的朋友可以參考一下2021-09-09適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程(jsapi方式)
vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號(hào)支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Vue替代marquee標(biāo)簽超出寬度文字橫向滾動(dòng)效果
這篇文章主要介紹了Vue替代marquee標(biāo)簽超出寬度文字橫向滾動(dòng)效果,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue 實(shí)現(xiàn)分頁與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁+輸入框關(guān)鍵字篩選功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03對(duì)Vue- 動(dòng)態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
今天小編就為大家分享一篇對(duì)Vue- 動(dòng)態(tài)元素屬性及v-bind和v-model的區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08