vue2实现简易时钟效果
作者:蜂巢糖FCT
这篇文章主要为大家详细介绍了vue2实现简易时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue2实现简易时钟效果的具体代码,供大家参考,具体内容如下
1.vue2+纯css实现
预览效果:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。