h5 混合钟

最新推荐文章于 2022-03-11 10:27:15 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2022-03-11 10:27:15 发布

阅读量180

点赞数

分类专栏： js web

本文链接：https://blog.csdn.net/qq_41241504/article/details/96482634

版权

js 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

web

35 篇文章 0 订阅

订阅专栏

引用vue写的直接复制就能用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大钟</title>
		<!--引入vue的js-->
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style>
			*{margin: 0;padding: 0;}
			body{background-color: #000000;}
			#app{
				position: relative;
				top:50px;
				left: 50%;
				margin-left: -25%;
			}
			.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>

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5 混合钟

引用vue写的直接复制就能用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>大钟</title>  <script src="https://cdn.jsdelivr.net...
复制链接

扫一扫