PROMULGATOR

    Mr Mouse

    上海市
    Html
    Css
    Js

    
                        


                        

                            


* {
	margin:0;
	padding:0;
}
html,body {
	background:#021246;
}
.container {
	display:flex;
	align-items:center;
	justify-content:center;
}
.clockCase {
	width:240px;
	height:240px;
	border-radius:50%;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	text-align:center;
	border:5px solid #2DF8FA;
	box-shadow:0 0 8px 5px rgba(45,248,250,.5),inset 0 0 8px 5px rgba(45,248,250,.5);
}
.pointer {
	width:200px;
	height:200px;
	border-radius:50%;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	text-align:center;
}
.mini {
	position:absolute;
	left:50%;
	top:0;
	width:0px;
	height:100%;
}
.mini::after {
	content:"";
	display:block;
	width:1px;
	height:4px;
	background:#2DF8FA;
}
.large {
	position:absolute;
	left:50%;
	top:0;
	width:0px;
	height:100%;
	color:#2DF8FA;
}
.large::after {
	content:"";
	display:block;
	width:2px;
	height:12px;
	background:#2DF8FA;
}
.hh {
	width:4px;
	height:25%;
	background:#2DF8FA;
	position:absolute;
	left:calc(50% - 1px);
	top:50px;
	transform:rotate(0deg);
	transform-origin:bottom center;
}
.mm {
	width:4px;
	height:35%;
	background:#2DF8FA;
	position:absolute;
	left:calc(50% - 1px);
	top:30px;
	transform:rotate(0deg);
	transform-origin:bottom center;
}
.ss {
	width:2px;
	height:50%;
	background:#2DF8FA;
	position:absolute;
	left:50%;
	top:0;
	transform:rotate(0deg);
	transform-origin:bottom center;
}
.ss::before {
	content:"";
	position:absolute;
	left:calc(50% - 5px);
	bottom:-5px;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#2DF8FA;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
js时钟（原创）

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
更新时间：2024-01-02 14:47:37
js时钟，待优化

                         

                     

                   
                


                
1



  
    
      
    
    

     

            
    
              
    
              
      
                
       Mr Mouse0
      
                
       2024/1/3 14:28:14
      
                
      
              
    
              
      
                
      各位，补发一下角度、时间进制问题。
      // 小时数转换
const totwelve = (h) => {
    if (h >= 0 && h < 12) return h;
    if (h >= 12 && h < 24) return (h - 12);
}
const hh = document.queryselector(".hh")
const mm = document.queryselector(".mm")
const ss = document.queryselector(".ss")
const date = new date()
let hours = date.gethours()
let minutes = date.getminutes()
let seconds = date.getseconds()
// 分针角度 每分钟6度 每秒额外增加 0.1度 6/60
let minuteangle = (minutes * 6) + (seconds * 0.1)
// 时针角度 每小时30度 每分钟额外增加 0.5度  30/60
let hourangle = totwelve(hours) * 30 + (minutes * 0.5)
// 设置旋转角度  
ss.style.transform = `rotate(${seconds * 6}deg)`;
mm.style.transform = `rotate(${minuteangle}deg)`;
hh.style.transform = `rotate(${hourangle}deg)`;
      
                
                回复