Html+Css+javaScript实现的动态时钟

最新推荐文章于 2023-08-01 20:34:28 发布

Y-ZBC

最新推荐文章于 2023-08-01 20:34:28 发布

阅读量607

点赞数 3

本文链接：https://blog.csdn.net/weixin_43943075/article/details/107030925

版权

Html+Css+javaScript实现的动态时钟

效果图

时钟根据系统日期进行相应变化

Html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子时钟</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!--背景-->
    <div class="background">
        <!--中心红点-->
        <div class="center_dot"></div>
        <!--数字-->
        <div class="num_box"></div>
        <!--指针-->
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <!--日期-->
        <div class="date">2022年5月29日星期一</div>
        <!--时间-->
        <div class="time">
            <div class="box">14</div>
            <div class="box">10</div>
            <div class="box">24</div>
        </div>
        <!--刻度在js里设置-->
    </div>
    <script type="text/javascript" src="setTime.js"></script>
</body>

</html>

Css部分：

.background {
    margin: 50px auto;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 13px solid #8bf0f0;
    box-shadow: 0px 0px 30px 6px #444 inset;
    position: relative;
}

.center_dot {
    margin: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ff0000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
}

.num_box {
    width: 460px;
    height: 460px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -230px;
}

.num {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 26px;
    position: absolute;
}

.hour {
    width: 6px;
    height: 110px;
    background-color: #000;
    position: absolute;
    top: 140px;
    left: 247px;
    box-shadow: 1px -3px 8px 3px #ccc;
    transform-origin: bottom center;
    transform: rotate(90deg);
}

.minute {
    width: 4px;
    height: 150px;
    background-color: #444;
    position: absolute;
    top: 100px;
    left: 248px;
    box-shadow: 1px -3px 8px 2px #ccc;
    transform-origin: bottom center;
    transform: rotate(230deg);
}

.second {
    width: 2px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 249px;
    box-shadow: 1px -3px 8px 1px #ccc;
    transform-origin: bottom center;
}

.date {
    width: 200px;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
    position: absolute;
    top: 270px;
    left: 150px;
}

.time {
    width: 160px;
    height: 50px;
    position: absolute;
    top: 320px;
    left: 174px;
}

.time .box {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #333;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
}

.scale {
    width: 2px;
    height: 15px;
    background-color: #444;
    position: absolute;
    transform-origin: top left;
}

.long_scale {
    width: 4px;
    height: 25px;
    background-color: #222;
    position: absolute;
    transform-origin: top left;
}

js部分：

// 设置数字位置
var num_box = document.querySelector(".num_box");
var num_array = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
for (var i = 0; i < num_array.length; i++) {
    var div = document.createElement('div');
    var theta = 30 * i * Math.PI / 180;
    var left_gap = Math.round(210 * (1 + Math.sin(theta)));
    var top_gap = Math.round(210 * (1 - Math.cos(theta)));
    div.setAttribute('style', 'left:' + left_gap + 'px;top:' + top_gap + 'px;');
    div.setAttribute('class', 'num');
    div.innerHTML = num_array[i];
    num_box.appendChild(div);
}
// 设置刻度位置
var background = document.querySelector(".background");
for (var i = 0; i < 60; i++) {
    var div = document.createElement('div');
    var theta = 6 * i * Math.PI / 180;
    var left_gap = Math.round(250 * (1 + Math.sin(theta)));
    var top_gap = Math.round(250 * (1 - Math.cos(theta)));
    div.setAttribute('style', 'left:' + left_gap + 'px;top:' + top_gap + 'px;transform: rotate(' + 6 * i + 'deg);');
    if (i % 5 == 0) {
        div.setAttribute('class', 'long_scale');
    } else {
        div.setAttribute('class', 'scale');
    }
    background.appendChild(div);
}
// 获取指针、三个box、日期信息
var second_line = document.querySelector(".second");
var minute_line = document.querySelector(".minute");
var hour_line = document.querySelector(".hour");
var time = document.querySelector(".time");
var time_boxes = time.children;
var date = document.querySelector('.date');
// 改变日期的函数
function changeDate() {
    var cur_time = new Date();
    var year = cur_time.getFullYear();
    var month = cur_time.getMonth();
    var day = cur_time.getDate();
    var weekday = cur_time.getDay();
    var num_weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    date.innerHTML = year + '年' + (month + 1) + '月' + day + '日' + num_weekday[weekday];
}
// 改变显示时间的函数
function changeTime() {
    var cur_time = new Date();
    var cur_time_info = [cur_time.getHours(), cur_time.getMinutes(), cur_time.getSeconds()]
    if (cur_time_info[0] == 0 && cur_time_info[1] == 0 && cur_time_info[2] == 0) {
        // 新的一天到了
        changeDate();
    }
    var theta_second = cur_time_info[2] * 6;
    var theta_minute = (cur_time_info[1] + cur_time_info[2] / 60) * 6;
    var theta_hour = (cur_time_info[0] + cur_time_info[1] / 60 + cur_time_info[2] / 3600) * 30;
    second_line.style.transform = "rotate(" + theta_second + "deg)";
    minute_line.style.transform = "rotate(" + theta_minute + "deg)";
    hour_line.style.transform = "rotate(" + theta_hour + "deg)";
    for (var i = 0; i < 3; i++) {
        if (cur_time_info[i] < 10) {
            cur_time_info[i] = '0' + cur_time_info[i];
        }
        time_boxes[i].innerHTML = cur_time_info[i];
    }
}
changeDate();
changeTime();
setInterval(changeTime, 1000);

Y-ZBC

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Html+Css+javaScript实现的动态时钟

Html+Css+javaScript实现的动态时钟效果图时钟根据系统日期进行相应变化Html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电子时钟</ti
复制链接

扫一扫