如何不借用图片就实现好看的时钟

柔情只为你懂 2023-02-20 03:14 8阅读 0赞

先看看效果图吧，如果喜欢这个效果再向下看吧，以免浪费各位的宝贵时间。  
效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NxaHJlbjYyNjIzMg_size_16_color_FFFFFF_t_70][]

下面介绍一下我的思路。其实很简单：  
1、利用border-radius这个展示圆角效果的属性做出三个长短和粗细均不相同的时钟指针。同时为了让三个指针的展示有里外的层次感，三个指针虽然均是使用的红色，但是红色的深浅不同，这样看起来就稍微有层次感，以免三个指针看起来融到一起去了。  
2、利用定时函数setInterval不断的绘制三个指针的角度，从而达到指针旋转的效果。当然，指针的旋转还得用到一个style属性transform。利用该属性的两个参数rotate和translateX(或者translateY)就可以让一个元素绕着相对于该元素中心的位置以translateX(或者translateY)为半径旋转rotate角度。  
3、整个表盘是由三部分组成的。最底层蓝紫色的原型底盘。然后在该底盘上面覆盖了一个小一圈的浅蓝色圆盘作为时钟的内部背景。最后利用内部背景循环创建了12个时钟刻度。这样的效果就是浅蓝色的表盘外面套了一个蓝紫色为背景的刻度盘。  
4、为了让三个指针显得不是那么突兀，在时钟的正中心画了一个比时针稍宽的一个与秒针同色的小圆，同时用了一个很小的灰白色小圆位于秒针之上，这样能够达到有个灰白色的小钉固定秒针并带动其旋转的效果。  
想要查看效果其实很简单，将下面代码拷贝到一个文本文档中，然后将文件的后缀由txt改成html，然后右键打开方式选择浏览器打开就可以了。由于部分属性是较新版的浏览器才会支持的，所以只要不是老古董的浏览器都是能看到效果的。  
好了，喜欢的朋友拿去好好改改吧，配色不是特别好，稍微优化一下或许会更加好看。  
当初写这个时钟的原因就是偶然的情况下看到了transform这个属性，感觉挺好玩的，于是就写了这么个时钟玩玩，现在分享给大家，希望各位能够喜欢。  
详细代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
    	<style>
    		#circle{
    			left: 80px;
    			top: 80px;
    			position: absolute;
    			background-color: #6A5ACD;
    			border-radius: 100%;
    			height: 480px;
    			width: 480px;
    		}
    		#clock{
    			left: 40px;
    			top: 40px;
    			position: absolute;
    			background-color: #00BFFF;
    			border-radius: 100%;
    			height: 400px;
    			width: 400px;
    		}
    		#secondPointer{
    			width: 200px;
    			height: 10px;
    			left: 100px;
    			top: 195px;
    			position: absolute;
    			background-color: #CD3700;
    			float: right;
    			color: #CD3700;
    			border-radius: 10px 100% 100% 10px;
    		}
    		#minutePointer{
    			width: 150px;
    			height: 14px;
    			left: 125px;
    			top: 193px;
    			position: absolute;
    			background-color: #CD4F39;
    			float: right;
    			color: #CD4F39;
    			border-radius: 14px 100% 100% 14px;
    		}
    		#hourPointer{
    			width: 100px;
    			height: 20px;
    			left: 150px;
    			top: 190px;
    			position: absolute;
    			background-color: #CD5B45;
    			float: right;
    			color: #CD5B45;
    			border-radius: 20px 100% 100% 20px;
    		}
    		#bigCircle{
    			width: 28px;
    			height: 28px;
    			left: 186px;
    			top: 186px;
    			position: absolute;
    			background-color: #CD3700;
    			float: right;
    			color: #CD3700;
    			border-radius: 100%;
    		}
    		#smallCircle{
    			width: 8px;
    			height: 8px;
    			left: 196px;
    			top: 196px;
    			position: absolute;
    			background-color: #C0C0C0;
    			float: right;
    			color: #C0C0C0;
    			border-radius: 100%;
    		}
    		.hourScale{
    			width: 40px;
    			height: 40px;
    			left: 180px;
    			top: 180px;
    			font-size: 30px;
    			position: absolute;
    			float: right;
    			color: #E8E8E8;
    		}
    		#numberTime{
    			margin-left: 50px;
    			font-size:36px;
    		}
    	</style>
    </head>
    <body>
    <div id="numberTime">
    	现在时间是北京时间：
    	<span id="numberHour"></span>
    	<span id="numberMinute"></span>
    	<span id="numberSecond"></span>
    </div>
    <div id="circle">
    	<div id="clock">
    		<div id="hourPointer" style="display: none;"> </div>
    		<div id="minutePointer" style="display: none;"> </div>
    		<div id="secondPointer" style="display: none;"> </div>
    		<div id="bigCircle"> </div>
    		<div id="smallCircle"> </div>
    	</div>
    </div>
    </body>
    <script>
    	let clock = document.getElementById("clock");
    	let secondPointer = document.getElementById("secondPointer");
    	let minutePointer = document.getElementById("minutePointer");
    	let hourPointer = document.getElementById("hourPointer");
    	
    	let numberHour = document.getElementById("numberHour");
    	let numberMinute = document.getElementById("numberMinute");
    	let numberSecond = document.getElementById("numberSecond");
    	
    	// 初始化时钟的刻度
        let initHourScale = function(){
            for(let i=1; i<=12; i++){
                let span = document.createElement("span");
    			if(i<10){
    				span.innerHTML = " "+i+" ";
    			} else {
    				span.innerHTML = i;
    			}
    			//span.innerHTML = i;
    			span.classList.add("hourScale");
    			span.style.transform="rotate("+ (30*i)%360+"deg) translateY("+(-220)+"px)";
                clock.appendChild(span);
            }
        };
    	initHourScale();
    	
    	//以两位数显示数字
    	let showNumberWithTwo = function(num){
    		if(num<10){
    			return "0"+num;
    		} else {
    			return num;
    		}
    	}
    	
    	setInterval(function(){
    		let currentTime = new Date();
    		showNow( currentTime );
    	},1000);
    	
    	let  showNow = function( date ){
    		let second = date.getSeconds();
    		let minute = date.getMinutes();
    		let hour = date.getHours();
    		console.log("second:" + second);
    		console.log("minute:" + minute);
    		console.log("hour:" + hour);
    		
    		//显示北京时间
    		numberHour.innerHTML=showNumberWithTwo(hour)+" :";
    		numberMinute.innerHTML=showNumberWithTwo(minute)+" :";
    		numberSecond.innerHTML=showNumberWithTwo(second);
    		
    		//显示时钟指针
    		secondPointer.style.transform="rotate("+ (6*second-90)%360+"deg) translateX("+100+"px)";
    		secondPointer.style.display="block";
    		minutePointer.style.transform="rotate("+ (6*minute-90+second/10)%360+"deg) translateX("+75+"px)";
    		minutePointer.style.display="block";
    		hourPointer.style.transform="rotate("+ (30*hour-90+minute/2)%360+"deg) translateX("+50+"px)";
    		hourPointer.style.display="block";
        };
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NxaHJlbjYyNjIzMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622222919677.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NxaHJlbjYyNjIzMg==,size_16,color_FFFFFF,t_70