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 =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0