web时钟（时钟）

最新推荐文章于 2024-05-11 19:06:41 发布

Alphamilk

最新推荐文章于 2024-05-11 19:06:41 发布

阅读量897

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/dogxixi/article/details/130316429

版权

1.代码展示（核心通过settimeout 实现）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>日期和时间</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			 body{
				background-image: url("../素材库/sky.jpg");
				background-repeat: no-repeat;
				background-size: cover;
			} 
			
			span{
				width: 360px;
				height: 422px;
				background-color: black;
				display: inline-block;
				color: cyan;
				line-height: 422px;
				text-align: center;
				font-size: 150px;
				margin-top: 100px;
				margin-left: 80px;
				
				
				text-shadow: 0 2px 20px white;
				box-shadow: 10px 15px 10px rgba(0, 0, 0, 0.5);
				transition: all 1s;
			}
			span:hover{
				transform: translateY(-15px);
				
			}
			.firsts{
				margin-left: 500px;
				margin-top: 50px;
			}
			
			.time{
				height: 700px;
				width: 1350px;
				margin: 100px auto;
				
			}
			button{
				width: 80px;
				height: 80px;
				border-radius: 50%	;
				font-size: 13px;
			}
			button:hover{
				color: aqua;
				overflow: hidden;
				
			}
		</style>
   
    </head>
    <body>
		<div class="time">
			<span class="hours">00:</span>
			<span class="minutues">00:</span>
			<span class="seconds">00</span>
	       <button class="firsts" id="times">时钟模式</button>
	     <button id="const">计时器模式</button>
	     <button id="lasted">倒计时模式</button>
		
		</div>
		
		<script>
		      
			  var but = document.querySelectorAll("button");
			  var flag = 0;
			 
			    but[0].onclick = function(){
					flag++;
					flag = flag%2;
				 var clock = window.setTimeout(
				         function run(){
				 	
				 	var h = document.getElementsByClassName("hours")[0];
				 	var m = document.getElementsByClassName("minutues")[0];
				 	var s = document.getElementsByClassName("seconds")[0];
				 	
				 	    var date = new Date();
				 	    var hour =date.getHours();
				 	    var minute =date.getMinutes();
				 	    var second = date.getSeconds();
				 	    
				 		
				 		if(hour<10){
				 			hour = "0"+ hour;
				 		}
				 		if(minute<10){
				 			minute = "0"+ minute;
				 		}
				 		if(second<10){
				 			second = "0"+ second;
				 		}
				 		
				 		
				 	    h.innerHTML = hour +":";
				 		m.innerHTML = minute +":";
				 		s.innerHTML = second;
				 	if(flag == 1){
						setTimeout(run,1000);
					}
					else{
						h.innerHTML = "00:";
						m.innerHTML = "00:";
						s.innerHTML = "00";
					}
				 },1000)  
			  }
			 
			  
		</script>
    </body>
</html>