[JavaScript知识库] 用javascript实现钟表的写法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 用javascript实现钟表的写法 -> 正文阅读

[JavaScript知识库]用javascript实现钟表的写法

效果图如下
在这里插入图片描述

1.HTML代码

<div id="number">
  <div><span>9</span></div>
  <div><span>10</span></div>
  <div><span>11</span></div>
  <div><span>12</span></div>
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
  <div><span>7</span></div>
  <div><span>8</span></div>
</div>

css代码

#number div {
  width: 190px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 90px;
}
#number span {
  display: block;
  width: 20px;
  height: 20px;
}

每个div都利用绝对布局定位，那不应该是重叠在一起的吗，本身是重叠在一起的，但是我们看了一下利用旋转，让他展成一个圆盘，下面是js代码

const numberDivs = document.querySelectorAll('#number div');
const numberSpans = document.querySelectorAll('#number span');

// 容器渲染
for (let i = 0; i < numberDivs.length; i++) {
  numberDivs[i].style.transform = 'rotate(' + i * 30 + 'deg)';
}

// 纠正文字的旋转度数
for (let j = 0; j < numberSpans.length; j++) {
  numberSpans[j].style.transform = 'rotate(' + j * -30 + 'deg)';
}