js实现简洁壁挂式可走动显示时间时钟效果代码
代码语言:html
所属分类:其他
代码描述:js实现简洁壁挂式可走动显示时间时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #bbb } </style> </head> <body > <script > const createClock = (context, offset = 0) => { const numbers = Array(12). fill(null). map((_, i) => i). map(index => { const position = index / 12; const numberContainer = document.createElement("div"); const text = document.createElement('div'); text.textContent = (index + 2) % 12 + 1; numberContainer.style.fontFamily = 'Helvetica Neue, sans-serif'; numberContainer.style.fontWeight = 200; numberContainer.style.fontSize = 'min(3vh, 3vw)'; numberContainer.appendChild(text); numberContainer.style.width = '60px'; numberContainer.style.height = '60px'; numberContainer.style.display = 'flex'; numberContainer.style.alignItems = 'center'; numberContainer.style.justifyContent = 'center'; numberContainer.style.color = '#444'; // numberContainer.style.border = '1px solid white' numberContainer.style.position = "absolute"; numberContainer.style.left = "calc(50%)"; numberContainer.style.top = "calc(50%)"; //numberContainer.style.transition = '1s'; numberContainer.style.transform = `translate(-30px, -30px)` + `rotate(${position}turn) ` + `translateX(min(24vh, 24vw)) ` + //;// + `rotate(-${position}turn) `;+ context.appendChild(numberContainer); return numberContainer; }); const marks = Array(60). fill(null). map((_, i) => i). map(index => { const position = index / 60; const mark = document.createElement("div"); mark.style.width = "8px"; mark.style.height = "2px"; mark.style.borderRadius = '2px'; mark.style.background = index % 5 === 0 ? "white" : "#333"; mark.style.position = "absolute"; mark.style.left = "calc(50% - 4px)"; mark.style.top = "calc(50% - 2px)"; mark.style.transform = `rotate(${pos.........完整代码请登录后点击上方下载按钮下载查看
网友评论0