自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

上一步保存

webwb的博客

原创 HTML静态网页（html，css，js）

效果：HTML:<!DOCTYPE html><html lang="en"><head> <meta charset=UTF-8"> <title>cute de cc</title> <link rel="stylesheet" href="5.css"></head><body> <div id="head"> ...

2022-06-27 08:23:59 297

今天给大家分享一下罗盘时钟的代码罗盘.html<!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"><t

2022-06-26 18:30:01 7229 3

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

「已注销」 CSDN认证博客专家 CSDN认证企业博客

码龄2年

企业员工

IP 属地：内蒙古

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）

2: 原创

-: 周排名

-: 总排名

7528: 访问

: 等级

38: 积分

7: 粉丝

11: 获赞

3: 评论

17: 收藏

私信

关注

最新评论

HTML罗盘时钟代码
m0_74408361: 这个不行
HTML罗盘时钟代码
殇哀: 连成一串了
HTML罗盘时钟代码
殇哀: \u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u003Ctitle>cc罗盘时钟\u003C/title>\n \n\u003Clink rel=\"stylesheet\" href=\"demo.css\" >\n \n\u003C/head>\n\u003Cbody> \n\u003Cdiv id=\"clock\">\u003C/div>\n\u003Cscript src=\"demo.js\">\u003C/script>\n\u003C/body>\n\u003C/html>\n\ndemo.css\n\n*{\n\n margin:0;\n\n padding:0\n\n}\n\nhtml,body{\n\n width:100%;\n\n height:100%;\n\n background-color:#000;\n\n overflow:hidden\n\n}\n\n#clock{\n\n position:relative;\n\n width:100%;\n\n height:100%;\n\n background:#000\n\n}\n\n.label{\n\n display:inline-block;\n\n color:#4d4d4d;\n\n text-align:center;\n\n padding:0 5px;\n\n font-size:19px;\n\n transition:left 1s,top 1s;\n\n transform-origin:0% 0%\n\n}\n\ndemo.js\n\nvar monthText=[\"一月\",\"二月\",\"三月\",\"四月\",\"五月\",\"六月\",\"七月\",\"八月\",\"九月\",\"十月\",\"十一月\",\"十二月\"];\nvar dayText=[\"零一号\",\"零二号\",\"零三号\",\"零四号\",\"零五号\",\"零六号\",\"零七号\",\"零八号\",\"零九号\",\"十号\",\"十一号\",\"十二号\",\"十三号\",\"十四号\",\"十五号\",\"十六号\",\"十七号\",\"十八号\",\"十九号\",\"二十号\",\"二十一号\",\"二十二号\",\"二十三号\",\"二十四号\",\"二十五号\",\"二十六号\",\"二十七号\",\"二十八号\",\"二十九号\",\"三十号\",\"三十一号\"];\nvar weekText=[\"星期日\",\"星期一\",\"星期二\",\"星期三\",\"星期四\",\"星期五\",\"星期六\"];\nvar hourText=[\"零点\",\"零一点\",\"零两点\",\"零三点\",\"零四点\",\"零五点\",\"零六点\",\"零七点\",\"零八点\",\"零九点\",\"零十点\",\"十一点\",\"十二点\",\"十三点\",\"十四点\",\"十五点\",\"十六点\",\"十七点\",\"十八点\",\"十九点\",\"二十点\",\"二十一点\",\"二十二点\",\"二十三点\"];\nvar minuteText=[\"零一分\",\"零二分\",\"零三分\",\"零四分\",\"零五分\",\"零六分\",\"零七分\",\"零八分\",\"零九分\",\"零十分\",\"十一分\",\"十二分\",\"十三分\",\"十四分\",\"十五分\",\"十六分\",\"十七分\",\"十八分\",\"十九分\",\"二十分\",\"二十一分\",\"二十二分\",\"二十三分\",\"二十四分\",\"二十五分\",\"二十六分\",\"二十七分\",\"二十八分\",\"二十九分\",\"三十分\",\"三十一分\",\"三十二分\",\"三十三分\",\"三十四分\",\"三十五分\",\"三十六分\",\"三十七分\",\"三十八分\",\"三十九分\",\"四十分\",\"四十一分\",\"四十二分\",\"四十三分\",\"四十四分\",\"四十五分\",\"四十六分\",\"四十七分\",\"四十八分\",\"四十九分\",\"五十分\",\"五十一分\",\"五十二分\",\"五十三分\",\"五十四分\",\"五十五分\",\"五十六分\",\"五十七分\",\"五十八分\",\"五十九分\",\"六十分\"];\nvar secondsText=[\"零一秒\",\"零二秒\",\"零三秒\",\"零四秒\",\"零五秒\",\"零六秒\",\"零七秒\",\"零八秒\",\"零九秒\",\"零十秒\",\"十一秒\",\"十二秒\",\"十三秒\",\"十四秒\",\"十五秒\",\"十六秒\",\"十七秒\",\"十八秒\",\"十九秒\",\"二十秒\",\"二十一秒\",\"二十二秒\",\"二十三秒\",\"二十四秒\",\"二十五秒\",\"二十六秒\",\"二十七秒\",\"二十八秒\",\"二十九秒\",\"三十秒\",\"三十一秒\",\"三十二秒\",\"三十三秒\",\"三十四秒\",\"三十五秒\",\"三十六秒\",\"三十七秒\",\"三十八秒\",\"三十九秒\",\"四十秒\",\"四十一秒\",\"四十二秒\",\"四十三秒\",\"四十四秒\",\"四十五秒\",\"四十六秒\",\"四十七秒\",\"四十八秒\",\"四十九秒\",\"五十秒\",\"五十一秒\",\"五十二秒\",\"五十三秒\",\"五十四秒\",\"五十五秒\",\"五十六秒\",\"五十七秒\",\"五十八秒\",\"五十九秒\",\"六十秒\"];\nvar clock;var monthList=[];\nvar dayList=[];\nvar weekList=[];\nvar hourList=[];\nvar minuteList=[];\nvar secondsList=[];\nvar isCircle=false;\nvar textSet=[[monthText,monthList],\n[dayText,dayList],\n[weekText,weekList],\n[hourText,hourList],\n[minuteText,minuteList],\n[secondsText,secondsList]];\nwindow.οnlοad=function()\n{\n init();\n setInterval(function()\n {runTime();\n },100);\n changePosition();\n setTimeout(function()\n {changeCircle();\n },2000);\n}\nfunction init()\n{clock=document.getElementById('clock');\nfor(var i=0;\n i\u003CtextSet.length;i++)\n {for(var j=0;j\u003CtextSet[i][0].length;j++)\n {var temp=createLabel(textSet[i][0][j]);\n clock.appendChild(temp);textSet[i][1].push(temp);\n }\n }\n}\nfunction createLabel(text)\n{\n var div=document.createElement('div');\ndiv.classList.add('label');\ndiv.innerText=text;return div;\n}\nfunction runTime()\n{\n var now=new Date();\n var month=now.getMonth();\n var day=now.getDate();\n var week=now.getDay();\n var hour=now.getHours();\n var minute=now.getMinutes();\n var seconds=now.getSeconds();\n initStyle();\n var nowValue=[month,day-1,week,hour,minute,seconds];\n for(var i=0;\n i\u003CnowValue.length;\n i++)\n {var num=nowValue[i];\n textSet[i][1][num].style.color='#fff';\n }\nif(isCircle)\n{var widthMid=document.body.clientWidth/2;\n var heightMid=document.body.clientHeight/2;\n for(var i=0;\n i\u003CtextSet.length;\n i++){for(var j=0;\n j\u003CtextSet[i][0].length;\n j++){var r=(i+1)*35+50*i;\n var deg=360/textSet[i][1].length*(j-nowValue[i]);\n var x=r*Math.sin(deg*Math.PI/180)+widthMid;\n var y=heightMid-r*Math.cos(deg*Math.PI/180);\n var temp=textSet[i][1][j];\n temp.style.transform='rotate('+(-90+deg)+'deg)';\n temp.style.left=x+'px';\n temp.style.top=y+'px';\n }\n }\n }\n}\nfunction initStyle()\n{var label=document.getElementsByClassName('label');\nfor(var i=0;\n i\u003Clabel.length;i++)\n {label[i].style.color='#4d4d4d';\n}\n}\nfunction changePosition()\n{\n for(let i=0;i\u003CtextSet.length;\n i++)\n {\n for(let j=0;\n j\u003CtextSet[i][1].length;\n j++){\n let tempX=textSet[i][1][j].offsetLeft+\"px\";\n let tempY=textSet[i][1][j].offsetTop+\"px\";\n setTimeout(function(){\n textSet[i][1][j].style.position=\"absolute\";\n textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY;\n },50);\n }\n }\n }\nfunction changeCircle()\n{\n isCircle=true;\n clock.style.transform=\"rotate(90deg)\";\n}

原创 HTML静态网页（html，css，js）

原创 HTML罗盘时钟代码

空空如也

空空如也