学习目标：
css样式学习、总结，知识巩固
学习内容：
在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。
目的就是巩固css的基础知识，防止遗忘
一、css画时钟
1、涉及到的css技术
- 利用css绘制圆形
.circle{
border-radius: 50%;// 将一个div变为圆形
}- 画线并将线按照中心点旋转
{
transform:rotate(6deg);//旋转角度
transform-origin: center 150px;//改变旋转中心点
}2、思路
2、绘制表盘刻度及数字，使用旋转；利用js循环画出所有刻度和数字；
3、绘制时分秒指针；
4、利用setInterval让指针动起来。
3、实现
1、页面基本布局
<--外部圆形————表盘-->
<div class="time-clock">
<!-- 表盘 刻度 数字 -->
<ul>
</ul>
<!-- 时针 -->
<div id="hour" class="hour"></div>
<!-- 分针 -->
<div id="minute" class="minute"></div>
<!-- 秒针 -->
<div id="second" class="second"></div>
<!-- 中心点 -->
<div class="ball"></div>
</div>
2、css画出圆形作为表盘，页面上显示一个圆形
.time-clock {
margin: 50px;
width: 300px;
height: 300px;
border: 3px solid black;
border-radius: 50%;
position: relative;
}3、画刻度
html元素中的 ul下加<li><span>数字</span></li>实现刻度和数字的画法。
我们画了一个300px*300px的表盘，要再这个圆里面画出刻度线并把这个圆等分；
分析：刻度：12*5=60；表盘上的刻度总共有60个刻度。
度数：360/60=6deg；每个刻度占的度数；
偏移量：i*6 i 为表盘上的刻度6为偏移度数，得出每个刻度的偏移度
旋转中心：150px；我们画了一个直径300的圆，那它的中心点在150px处
接下来我们利用css角度偏移控制，刻度线的位置，利用js循环画出所有刻度线
先看css
.time-clock {
margin: 50px;
width: 300px;
height: 300px;
border: 3px solid black;
border-radius: 50%;
position: relative;
ul {
list-style: none;
position: relative;
width: 100%;
height: 100%;
li {
width: 2px;
height: 8px;
position: absolute;
background: black;
left: 50%;
transform-origin: center 150px;
span {
position: absolute;
top: 15px;
left: -5px;
}
}
}
}js画出所有线和数字
let ul = document.querySelector("ul");
let num = 0;
for(let i=0;i<60;i++){
let li = document.createElement('li');
li.style.transform = `rotate(${i*6}deg)`;
if(i%5 == 0){
li.style.height='16px'// 一个大格的线要长一些
let span = document.createElement('span');
let clockNum = i==0 ? 12 : num;
span.innerText = clockNum +'';
span.style.transform = `rotate(-${i*6}deg)`;
num++
li.appendChild(span);
}
ul.appendChild(li);
}结果如下：
4、指针和中心点的制作
表盘画完了，我们开始画指针，这里指针就是三个div设置宽度和长度。中心点是一个小圆画法同第一步，主要是确认中心点。指针上不要使用transform，因为一会儿要写脚本通过transfrom改变指针的角度，让指针动起来，css中使用的transform会被脚本中的所替代。
.time-clock {
margin: 50px;
width: 300px;
height: 300px;
border: 3px solid black;
border-radius: 50%;
position: relative;
.hour,.minute,.second{
position: absolute;
left:50%;
top:50%;
background:black;
transform-origin: center bottom;
}
.hour{
width:6px;
height:50px;
// 时针设置到中心点
margin: -50px 0 0 -3px;
}
.minute{
width:4px;
height:80px;
// 时针设置到中心点
margin: -80px 0 0 -3px;
}
.second{
width:2px;
height: 120px;
margin: -120px 0 0 -3px;
}
.ball{
width:20px;
height:20px;
position: absolute;
background: black;
border-radius: 50%;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
ul {
list-style: none;
position: relative;
width: 100%;
height: 100%;
li {
width: 2px;
height: 8px;
position: absolute;
background: black;
left: 50%;
transform-origin: center 150px;
span {
position: absolute;
top: 15px;
left: -5px;
}
}
}
}5、css完成，利用js使指针动起来
let hour = document.querySelector('#hour');
let minute = document.querySelector('#minute');
let second = document.querySelector('#second');
// hour.style.transform=`rotate(${5*30}deg)`;
setInterval(()=>{
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
hour.style.transform=`rotate(${h*30+m/2}deg)`;
minute.style.transform=`rotate(${m*6}deg)`;
second.style.transform=`rotate(${s*6}deg)`;
},1000)4、全部代码
这里的css使用less写的，生成的css放到了 css文件夹下；
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/time.css">
</head>
<body>
<div class="time-clock">
<!-- 表盘 刻度 数字 -->
<ul>
</ul>
<!-- 时针 -->
<div id="hour" class="hour"></div>
<!-- 分针 -->
<div id="minute" class="minute"></div>
<!-- 秒针 -->
<div id="second" class="second"></div>
<!-- 中心点 -->
<div class="ball"></div>
</div>
</body>
<script>
let ul = document.querySelector("ul");
let num = 0;
for(let i=0;i<60;i++){
let li = document.createElement('li');
li.style.transform = `rotate(${i*6}deg)`;
if(i%5 == 0){
li.style.height='16px'// 一个大格的线要长一些
let span = document.createElement('span');
let clockNum = i==0 ? 12 : num;
span.innerText = clockNum +'';
span.style.transform = `rotate(-${i*6}deg)`;
num++
li.appendChild(span);
}
ul.appendChild(li);
}
let hour = document.querySelector('#hour');
let minute = document.querySelector('#minute');
let second = document.querySelector('#second');
setInterval(()=>{
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
hour.style.transform=`rotate(${h*30+m/2}deg)`;
minute.style.transform=`rotate(${m*6}deg)`;
second.style.transform=`rotate(${s*6}deg)`;
},1000)
</script>
</html>// out: ../css/
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
}
.time-clock {
margin: 50px;
width: 300px;
height: 300px;
border: 3px solid black;
border-radius: 50%;
position: relative;
.hour,.minute,.second{
position: absolute;
left:50%;
top:50%;
background:black;
transform-origin: center bottom;
}
.hour{
width:6px;
height:50px;
// 时针设置到中心点
margin: -50px 0 0 -3px;
}
.minute{
width:4px;
height:80px;
// 时针设置到中心点
margin: -80px 0 0 -3px;
}
.second{
width:2px;
height: 120px;
margin: -120px 0 0 -3px;
}
.ball{
width:20px;
height:20px;
position: absolute;
background: black;
border-radius: 50%;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
ul {
list-style: none;
position: relative;
width: 100%;
height: 100%;
li {
width: 2px;
height: 8px;
position: absolute;
background: black;
left: 50%;
transform-origin: center 150px;
span {
position: absolute;
top: 15px;
left: -5px;
}
}
}
}版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
