会python真的可以为所欲为0(回)
352天前
这里还有人吗1(回)
538天前这里还有人吗0(回)
538天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
762天前到处都是羊，不想上班0(回)
842天前
鸽子
0(回)
846天前<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
<title>时钟</title> |
<style type="text/css"> |
*{ |
margin:0; |
padding:0 |
} |
html,body{ |
width:100%; |
height:100%; |
background-color:#000; |
overflow:hidden |
} |
#clock{ |
position:relative; |
width:100%; |
height:100%; |
background:#000 |
} |
.label{ |
display:inline-block; |
color:#4d4d4d; |
text-align:center; |
padding:0 5px; |
font-size:19px; |
transition:left 1s,top 1s; |
transform-origin:0% 0% |
} |
</style> |
|
</head> |
<body> |
<div id="clock"></div> |
<script> |
var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; |
var dayText=["一日","二日","三日","四日","五日","六日","七日","八日","九日","十日","十一日","十二日","十三日","十四日","十五日","十六日","十七日","十八日","十九日","二十日","二十一日","二十二日","二十三日","二十四日","二十五日","二十六日","二十七日","二十八日","二十九日","三十日","三十一日"]; |
var weekText=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; |
var hourText=["零点","一点","两点","三点","四点","五点","六点","七点","八点","九点","十点","十一点","十二点","十三点","十四点","十五点","十六点","十七点","十八点","十九点","二十点","二十一点","二十二点","二十三点"]; |
var minuteText=["六十分","一分","二分","三分","四分","五分","六分","七分","八分","九分","十分","十一分","十二分","十三分","十四分","十五分","十六分","十七分","十八分","十九分","二十分","二十一分","二十二分","二十三分","二十四分","二十五分","二十六分","二十七分","二十八分","二十九分","三十分","三十一分","三十二分","三十三分","三十四分","三十五分","三十六分","三十七分","三十八分","三十九分","四十分","四十一分","四十二分","四十三分","四十四分","四十五分","四十六分","四十七分","四十八分","四十九分","五十分","五十一分","五十二分","五十三分","五十四分","五十五分","五十六分","五十七分","五十八分","五十九分"]; |
var secondsText=["五十九秒","零一秒","零二秒","零三秒","零四秒","零五秒","零六秒","零七秒","零八秒","零九秒","零十秒","十一秒","十二秒","十三秒","十四秒","十五秒","十六秒","十七秒","十八秒","十九秒","二十秒","二十一秒","二十二秒","二十三秒","二十四秒","二十五秒","二十六秒","二十七秒","二十八秒","二十九秒","三十秒","三十一秒","三十二秒","三十三秒","三十四秒","三十五秒","三十六秒","三十七秒","三十八秒","三十九秒","四十秒","四十一秒","四十二秒","四十三秒","四十四秒","四十五秒","四十六秒","四十七秒","四十八秒","四十九秒","五十秒","五十一秒","五十二秒","五十三秒","五十四秒","五十五秒","五十六秒","五十七秒","五十八秒"]; |
var clock;var monthList=[]; |
var zhongList=[]; |
var dayList=[]; |
var weekList=[]; |
var hourList=[]; |
var minuteList=[]; |
var secondsList=[]; |
var isCircle=false; |
var textSet=[[monthText,monthList], |
[dayText,dayList], |
[weekText,weekList], |
[hourText,hourList], |
[minuteText,minuteList], |
[secondsText,secondsList]]; |
window.onload=function() |
{ |
init(); |
setInterval(function() |
{runTime(); |
},100); |
changePosition(); |
setTimeout(function() |
{changeCircle(); |
},2000); |
} |
function init() |
{clock=document.getElementById('clock'); |
for(var i=0; |
i<textSet.length;i++) |
{for(var j=0;j<textSet[i][0].length;j++) |
{var temp=createLabel(textSet[i][0][j]); |
clock.appendChild(temp);textSet[i][1].push(temp); |
} |
} |
} |
function createLabel(text) |
{ |
var div=document.createElement('div'); |
div.classList.add('label'); |
div.innerText=text;return div; |
} |
function runTime() |
{ |
var now=new Date(); |
var month=now.getMonth(); |
var day=now.getDate(); |
var week=now.getDay(); |
var hour=now.getHours(); |
var minute=now.getMinutes(); |
var seconds=now.getSeconds(); |
initStyle(); |
var nowValue=[month,day-1,week,hour,minute,seconds]; |
for(var i=0; |
i<nowValue.length; |
i++) |
{var num=nowValue[i]; |
textSet[i][1][num].style.color='#fff'; |
} |
if(isCircle) |
{var widthMid=document.body.clientWidth/2; |
var heightMid=document.body.clientHeight/2; |
for(var i=0; |
i<textSet.length; |
i++){for(var j=0; |
j<textSet[i][0].length; |
j++){var r=(i+1)*35+50*i; |
var deg=360/textSet[i][1].length*(j-nowValue[i]); |
var x=r*Math.sin(deg*Math.PI/180)+widthMid; |
var y=heightMid-r*Math.cos(deg*Math.PI/180); |
var temp=textSet[i][1][j]; |
temp.style.transform='rotate('+(-90+deg)+'deg)'; |
temp.style.left=x+'px'; |
temp.style.top=y+'px'; |
} |
} |
} |
} |
function initStyle() |
{var label=document.getElementsByClassName('label'); |
for(var i=0; |
i<label.length;i++) |
{label[i].style.color='#4d4d4d'; |
} |
} |
function changePosition() |
{ |
for(let i=0;i<textSet.length; |
i++) |
{ |
for(let j=0; |
j<textSet[i][1].length; |
j++){ |
let tempX=textSet[i][1][j].offsetLeft+"px"; |
let tempY=textSet[i][1][j].offsetTop+"px"; |
setTimeout(function(){ |
textSet[i][1][j].style.position="absolute"; |
textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY; |
},50); |
} |
} |
} |
function changeCircle() |
{ |
isCircle=true; |
clock.style.transform="rotate(90deg)"; |
} |
</script> |
</body> |
</html> |
中级程序员
by: FN 发表于：2021-08-03 18:28:24 顶(0) | 踩(0) 回复
不错不错
回复评论