基于Vue.js的轮盘时钟

基于Vue.js的轮盘时钟哈哈哈最近很流行这个时钟啊，正好在学习Vue，就用它来练练，别说还挺方便，代码可能存在冗余，请大家留下意见。<!DOCTYPE html><html><head><meta charset="utf-8"><title>轮盘时钟</title><style>...

狄大人的打火机

4987人浏览 · 2019-04-21 17:52:19

狄大人的打火机 · 2019-04-21 17:52:19 发布

基于Vue.js的轮盘时钟

哈哈哈最近很流行这个时钟啊，正好在学习Vue，就用它来练练，别说还挺方便，代码可能存在冗余，请大家留下意见。

在这里插入图片描述

<!DOCTYPE html>
<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>

修改版

在这里插入图片描述

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^