基于Vue.js的轮盘时钟
哈哈哈最近很流行这个时钟啊，正好在学习Vue，就用它来练练，别说还挺方便，代码可能存在冗余，请大家留下意见。
<html>
<head>
<meta charset="utf-8">
<title>轮盘时钟title>
<style>
*{margin: 0;padding: 0;}
#app{
position: relative;
font-family: 微软雅黑;
}
h2{text-align: center;}
.s,.i,.h,.d,.w,.m,.y{
position: absolute;
top: 360px;
left: 360px;
transition:transform 1s;
text-shadow: 1px 1px 2px #000;
}
.y{
left: 345px;
top: 357px;
font-weight: bold;
font-size: 20px;
}
.m{
color: blueviolet;
}
.d{
color: darkorange;
}
.w{
color: cornflowerblue;
}
.h{
color: #F34416;
}
.i{
color: crimson;
}
.s{
color: darkseagreen;
}
style>
<script src="js/vue.min.js">script>
head>
<body>
<div id="app">
<h2>轮盘时钟h2>
<div v-for="s in 60" class="s" v-bind:style="{transform:'translate('+300*Math.cos((s+second)*Math.PI/30)+'px,'+300*Math.sin((s+second)*Math.PI/30)+'px)'}">{{60-s}}div>
<div v-for=" i in 60" class="i" v-bind:style="{transform:'translate('+250*Math.cos((i+minute)*Math.PI/30)+'px,'+250*Math.sin((i+minute)*Math.PI/30)+'px)'}">{{60-i}}div>
<div v-for="h in 24" class="h" v-bind:style="{transform:'translate('+200*Math.cos((hour+h)*Math.PI/12)+'px,'+200*Math.sin((hour+h)*Math.PI/12)+'px)'}">{{24-h}}div>
<div v-for="w in 7" class="w" v-bind:style="{transform:'translate('+170*Math.cos(2*(w+week)*Math.PI/7)+'px,'+170*Math.sin(2*(w+week)*Math.PI/7)+'px)'}">{{zw[7-w]}}div>
<div v-for="d in 31" class="d" v-bind:style="{transform:'translate('+140*Math.cos(2*(d+day-1)*Math.PI/31)+'px,'+140*Math.sin(2*(d+day-1)*Math.PI/31)+'px)'}">{{32-d}}div>
<div v-for=" m in 12" class="m" v-bind:style="{transform:'translate('+70*Math.cos((month+m)*Math.PI/6)+'px,'+70*Math.sin((month+m)*Math.PI/6)+'px)'}">{{13-m}}div>
<div class="y">{{year}}div>
div>
<script>
var app=new Vue({
el:'#app',
data:{
year:0,
month:0,
day:0,
week:0,
hour:0,
minute:0,
second:0,
zw:['日','一','二','三','四','五','六']
},
created() {
setInterval(()=>{
var date=new Date()
this.year=date.getFullYear()
this.month=date.getMonth()
this.day=date.getDate()
this.week=date.getDay()
this.hour=date.getHours()
this.minute=date.getMinutes()
this.second=date.getSeconds()
console.log(this.second)
},1000)
}
})
script>
body>
html>
修改版
<html>
<head>
<meta charset="utf-8">
<title>混合时钟title>
<script src="js/vue.min.js">script>
<style>
*{margin: 0;padding: 0;}
body{background-color: #000000;}
#app{
position: relative;
}
.s,.i,.h,.w,.d,.m,.y{
position: absolute;
top: 600px;
left: 600px;
transition:transform 1s;
color: #999999;
}
.xx,.y{
color: #FF0000;
font-size: 18px;
font-weight: bold;
}
style>
head>
<body>
<div id="app">
<div class="s"
v-bind:class="{xx:60-v==s}"
v-for="(v,k) in 60"
v-bind:style="{transform:'translate('+xc(sr,v+s,60)+'px,'+yc(sr,v+s,60)+'px) rotate('+dg(v+s,60)+'deg)'}">{{zh(60-v,1)}}秒div>
<div class="i" v-for="(v,k) in 60"
v-bind:class="{xx:60-v==i}"
v-bind:style="{transform:'translate('+xc(ir,v+i,60)+'px,'+yc(ir,v+i,60)+'px) rotate('+dg(v+i,60)+'deg)'}">{{zh(60-v,1)}}分div>
<div class="h" v-for="(v,k) in 24"
v-bind:class="{xx:24-v==h}"
v-bind:style="{transform:'translate('+xc(hr,v+h,24)+'px,'+yc(hr,v+h,24)+'px) rotate('+dg(v+h,24)+'deg)'}">{{zh(24-v,1)}}时div>
<div class="w" v-for="(v,k) in 7"
v-bind:class="{xx:7-v==w}"
v-bind:style="{transform:'translate('+xc(wr,v+w,7)+'px,'+yc(wr,v+w,7)+'px) rotate('+dg(v+w,7)+'deg)'}">星期{{wk[7-v]}}div>
<div class="d" v-for="(v,k) in 31"
v-bind:class="{xx:31-k==d}"
v-bind:style="{transform:'translate('+xc(dr,k+d,31)+'px,'+yc(dr,k+d,31)+'px) rotate('+dg(k+d,31)+'deg)'}">{{zh(31-k,1)}}日div>
<div class="m" v-for="(v,k) in 12"
v-bind:class="{xx:12-k==m+1}"
v-bind:style="{transform:'translate('+xc(mr,k+m+1,12)+'px,'+yc(mr,k+m+1,12)+'px) rotate('+dg(k+m+1,12)+'deg)'}">{{zh(12-k,1)}}月div>
<div class="y">
{{y}}年
div>
div>
<script>
var mv=new Vue({
el:'#app',
data:{
PI:Math.PI,
s:0,
i:0,
h:0,
d:0,
m:0,
y:0,
w:0,
sr:600,
ir:500,
hr:400,
wr:300,
dr:200,
mr:100,
wk:['日','一','二','三','四','五','六']
},
created() {
setInterval(()=>{
var date=new Date()
this.y=date.getFullYear()
this.m=date.getMonth()
this.d=date.getDate()
this.w=date.getDay()
this.h=date.getHours()
this.i=date.getMinutes()
this.s=date.getSeconds()
Math.cos()
},1000)
},
methods:{
xc(r,k,l){
return r*Math.cos(2*k*this.PI/l)
},
yc(r,k,l){
return r*Math.sin(2*k*this.PI/l)
},
dg(k,l){
return k*360/l
},
zh(num,type){
switch(type){
case 1:
var t1=['零','一','二','三','四','五','六','七','八','九','十']
var sw=parseInt(num/10)
var gw=num%10
return (sw!=0?t1[sw]+'十':'')+(gw!=0?t1[gw]:(sw==0?t1[0]:''))
break
}
}
}
})
script>
body>
html>
