热门搜索
还没有账号？ 去注册 >
复制以下代码，到txt文档，额存，后缀改为html。即可。
<!doctype html><html><head><metacharset="utf-8"><title>罗盘时钟</title><scriptsrc="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>* { margin:0; padding:0; } #wrap{ position:fixed; left:0; top:300px; width:800px; height:800px; border:1pxsolid #000; position:fixed; left:0; top:0; color:gold; font-size:14px; position:relative; background:#000; line-height:20px; } #wrap.wrap_inner{ width:800px; height:800px; background:#000; position:relative; border-radius:50额; } #wrap.wrap_inner.timeout{ width:800px; height:800px; position:absolute; background:transparent; } #wrap.wrap_inner.timeout:nth-of-type(1){ transition:1slinear; box-shadow:0020pxgold; border-radius:50额; } #wrap.wrap_inner.timeout:nth-of-type(2){ width:600px; height:600px; left:100px; top:100px; transition:1slinear; } #wrap.wrap_inner.timeout:nth-of-type(3){ width:400px; height:400px; left:200px; top:200px; transition:1slinear; } #wrap.wrap_inner.timeout:nth-of-type(4){ width:300px; height:300px; left:250px; top:250px; transition:1slinear; } #wrap.wrap_inner.timeout:nth-of-type(5){ width:200px; height:200px; left:300px; top:300px; transition:1slinear; } #wrap.wrap_inner.timeout.secbox{ width:400px; height:20px; position:absolute; left:400px; top:390px; transform-origin:left center; } #wrap.wrap_inner.timeout.minbox{ width:300px; height:20px; position:absolute; left:300px; top:290px; transform-origin:left center; } #wrap.wrap_inner.timeout.houbox{ width:200px; height:20px; position:absolute; left:200px; top:190px; transform-origin:left center; } #wrap.wrap_inner.timeout.datbox{ width:150px; height:20px; position:absolute; left:150px; top:140px; transform-origin:left center; } #wrap.wrap_inner.timeout.daybox{ width:100px; height:20px; position:absolute; left:100px; top:90px; transform-origin:left center; } #wrap.zhizhen{ width:400px; height:20px; background:rgba(255,255,255,.4); position:absolute; left:400px; top:390px; z-index:999; } </style></head><body><divid="wrap"><divclass="wrap_inner"><divclass="timeout"></div><divclass="timeout"></div><divclass="timeout"></div><divclass="timeout"></div><divclass="timeout"></div><divclass="timeout"></div></div><divclass="zhizhen"></div></div><script>varMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; varDays = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']; varDates = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']; varHours = ['零点', '一点', '二点', '三点', '四点', '五点', '六点', '七点', '八点', '九点', '十点', '十一点', '十二点', '十三点', '十四点', '十五点', '十六点', '十七点', '十八点', '十九点', '二十点', '二十一点', '二十二点', '二十三点']; varMinutes = ['一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分', '六十分']; varSecond = ['一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒', '六十秒']; varOtimeout = document.querySelectorAll('.timeout'); vardate = newDate(); varmonth = date.getMonth() + 1; vardata = date.getDate(); varday = date.getDay(); varhours = date.getHours(); varminutes = date.getMinutes(); varseconds = date.getSeconds(); console.log(day) console.log(data) varnowsecond = 'rotate('+ -6* (seconds - 1) + 'deg)'Otimeout[0].style.transform = nowsecond; varnowminutes = 'rotate('+ -6* (minutes - 1) + 'deg)'Otimeout[1].style.transform = nowminutes; varnowhours = 'rotate('+ -15* (hours) + 'deg)'Otimeout[2].style.transform = nowhours; varnowday = 'rotate('+ -51.4* (day - 1) + 'deg)'Otimeout[3].style.transform = nowday; varnowdata = 'rotate('+ -11.6* (data - 1) + 'deg)'Otimeout[4].style.transform = nowdata; (function() { //秒for(vari = 0; i < 60; i++) { varsecbox = document.createElement('div'); secbox.className = 'secbox'varRotate = 'rotate('+ 6* i + 'deg)'// console.log(Rotate)secbox.style.transform = Rotate secbox.innerText = Second[i] secbox.style.textAlign = 'right'Otimeout[0].appendChild(secbox); } //分for(vari = 0; i < 60; i++) { varminbox = document.createElement('div'); minbox.className = 'minbox'varRotate = 'rotate('+ 6* i + 'deg)'// console.log(Rotate)minbox.style.transform = Rotate minbox.innerText = Minutes[i] minbox.style.textAlign = 'right'Otimeout[1].appendChild(minbox); } //时for(vari = 0; i < 24; i++) { varhoubox = document.createElement('div'); houbox.className = 'houbox'varRotate = 'rotate('+ 15* i + 'deg)'// console.log(Rotate)houbox.style.transform = Rotate houbox.innerText = Hours[i] houbox.style.textAlign = 'right'// houbox.style.textIndent = '1em'Otimeout[2].appendChild(houbox); } //星期for(vari = 0; i < 7; i++) { vardatbox = document.createElement('div'); datbox.className = 'datbox'varRotate = 'rotate('+ 51.4* i + 'deg)'// console.log(Rotate)datbox.style.transform = Rotate datbox.innerText = Dates[i] datbox.style.textAlign = 'right'Otimeout[3].appendChild(datbox); } //天for(vari = 0; i < 31; i++) { vardaybox = document.createElement('div'); daybox.className = 'daybox'varRotate = 'rotate('+ 11.6* i + 'deg)'// console.log(Rotate)daybox.style.transform = Rotate daybox.innerText = Days[i] daybox.style.textAlign = 'right'Otimeout[4].appendChild(daybox); } (function() { varcount = seconds - 1; varcon = minutes - 1; varcos = hours - 2; vartimer = setInterval(function() { count++ varrotate = 'rotate('+ -6* count + 'deg)'Otimeout[0].style.transform = rotate if(count 额 60== 0) { con++; varrotate1 = 'rotate('+ -6* con + 'deg)'Otimeout[1].style.transform = rotate1 if(con 额 60== 0) { cos++; varrotate2 = 'rotate('+ -15* cos + 'deg)'Otimeout[2].style.transform = rotate2 } } }, 1000) })(); })() function$(id) { returndocument.querySelector(id) } </script></body></html>
如果不行，记得另存为时，编码格式为UTF-8
