刻度时钟~

ZiminLi

已于 2023-01-17 17:15:48 修改

阅读量501

点赞数

分类专栏： demo 文章标签： css html

于 2023-01-17 00:30:23 首次发布

本文链接：https://blog.csdn.net/ziminli/article/details/128710852

版权

demo 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

demo

内容
实验原理
html
css
js
样式

内容

上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时间实时对应。

实验原理

使用js创建li节点做出刻度
计算时间戳与现在的时间的关系并输出
为时分秒针添加transform属性配合时间戳与定时器使时钟能够动起来
使用定时器让时间持续增加

html

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo8</title>
    <link rel="stylesheet" href="./css/demo8.css">
</head>
<body>
    <div id="clock">
        <ul>
            <!-- 刻标 -->
        </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div id="dot"></div>
    </div>
    <div id="time"></div>
    <script src="./js/demo8.js"></script>
</body>
</html>

css

<style>
* {
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
#clock{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background-color: green;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}
#hour,#min,#sec{
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center bottom;
}
#hour{
    width: 10px;
    height: 40px;
    margin: -40px 0 0 -3px;
    background-color: red;
}

#min{
    width: 6px;
    height: 65px;
    margin: -65px 0 0 -2px;
    background-color: blue;
}
#sec{
    width: 2px;
    height: 100px;
    margin: -100px 0 0 -1px;
    background-color: yellow;
}
#dot{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: red;
}
ul{
    position: relative;
    height: 100%;
    width: 100%;
}
li{
    width: 2px;
    height: 8px;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: center 150px;
}
#time{
    width: 100%;
    height: 200px;
    line-height: 200px;
    background-color: aqua;
    text-align: center;
    font-size: 100px;
    color: gray;
}
</style>

js

<script>
// 表盘
var ul = document.querySelector('ul')
for(var i=0;i<60;i++){
    var li=document.createElement('li')
    li.style.transform = 'rotate(' + i * 6 + 'deg)'//添加li使其属性负值
    if (i%5==0){
        li.style.height='18px'
    }
    ul.appendChild(li);
}
//指针运动
var hour = document.getElementById('hour')
var minu = document.getElementById('min')
var second = document.getElementById('sec')
function active() {
    var date = new Date()
    var Hour = date.getHours();
    var Minu = date.getMinutes()
    var S = date.getSeconds()
    //分针走了一半时钟时，时针到下一刻度中间
    hour.style.transform = 'rotate(' + (Hour * 30 + Minu / 3) + 'deg)';
    minu.style.transform = 'rotate(' + Minu * 6  + 'deg)';
    second.style.transform = 'rotate(' + S * 6 + 'deg)';
}
active()
setInterval(active, 1000)
//数字时间
var clock = document.getElementById('clock');
var word = document.getElementById('time');
function Time(date) {
    var sub = date.getTime() / 1000;//获取今天的时间戳
    var hours = parseInt(sub % (60 * 60 * 24) / (60 * 60)) + 8;//计算剩余相差多少小时
    var minutes = parseInt(sub % (60 * 60) / 60);//计算剩余相差多少分钟
    var miaos = parseInt(sub % 60);
    if (hours < 10) {
        hours = "0" + hours
    }
    if (minutes < 10) {
        minutes = "0" + minutes
    }
    if (miaos < 10) {
        miaos = "0" + miaos
    }
    let obj = {
        hours: hours,
        minute: minutes,
        miaos: miaos,
    }
    return obj
}
var date=new Date()
var reset=Time(date)
word.innerHTML = `现在是北京时间：${reset.hours}:${reset.minute}:${reset.miaos}`
//随时间数字增长
setInterval(function(){
    var date=new Date()
    var reset=Time(date)
    word.innerHTML = `现在是北京时间：${reset.hours}:${reset.minute}:${reset.miaos}`
}, 1000)
</script>