您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“怎么用vue2实现简易时钟效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用vue2实现简易时钟效果”吧!
预览效果:
2.代码如下:
<template> <div class="main"> <div class="time"> <div class="hour_wrap"> <div class="hour_item" : v-for="(item,index) in 12" :key="index"> {{index+1}} <div class="ke"></div> </div> </div> <div class="minute_wrap"> <div class="minute_item" : v-for=" (item,index) in 60" :key="index"> <div class="ke"></div> </div> </div> <div class="hour_hand" :></div> <div class="minute_hand" :></div> <div class="second_hand" :></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>
到此,相信大家对“怎么用vue2实现简易时钟效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。