网页学习——制作时间轮盘

叶落知秋至

于 2023-04-27 10:25:48 发布

阅读量450

点赞数

文章标签：学习 html css

本文链接：https://blog.csdn.net/qq_45943723/article/details/130400622

版权

该文章展示了一个使用HTML、CSS和JavaScript实现的可旋转时间轮盘，包括秒、分、小时、日期和月份的显示。CSS用于样式设计，JavaScript用于动态更新时间并旋转相应的时间盘。

摘要由CSDN通过智能技术生成

时间轮盘

自制可根据时间旋转的时间盘

示例

在这里插入图片描述

一、html

<!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" type="text/css" href="index.css" />
</head>

<body>
    <div id="Compass">
        <div class="pointer"></div>
        <div class="clock">
            <div class="time"></div>
            <div class="time"></div>
            <div class="time"></div>
            <div class="time"></div>
            <div class="time"></div>
        </div>
    </div>
</body>

<script type="text/javascript" src="compassclock.js"></script>

</html>

二、css

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

html,
body {
    width: 100%;
    height: 740px;
}

#Compass {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    color: gold;
    background-image: url("background.jpg");
    background-size: cover;
    line-height: 20px;
}

#Compass .pointer {
    width: 350px;
    height: 20px;
    background: rgba(255, 255, 255, 10%);
    position: absolute;
    top: 350px;
    left: 360px;
    z-index: 999;
    box-shadow: 0 0 10px gold;
}

#Compass .clock {
    width: 100%;
    height: 100%;
    position: relative;
}

#Compass .clock .time {
    width: 700px;
    height: 700px;
    position: absolute;
    top: 10px;
    left: 10px;
}

#Compass .clock .time:nth-of-type(1) {
    transition: 1s linear;
    box-shadow: 0 0 20px gold;
    border-radius: 50%;
}

#Compass .clock .time:nth-of-type(2) {
    width: 600px;
    height: 600px;
    top: 60px;
    left: 60px;
    transition: 1s linear;
    border-radius: 50%;
    box-shadow: 0 0 5px gold;
}

#Compass .clock .time:nth-of-type(3) {
    width: 480px;
    height: 480px;
    top: 120px;
    left: 120px;
    transition: 1s linear;
    border-radius: 50%;
    box-shadow: 0 0 5px gold;
}

#Compass .clock .time:nth-of-type(4) {
    width: 340px;
    height: 340px;
    top: 190px;
    left: 190px;
    transition: 1s linear;
    border-radius: 50%;
    box-shadow: 0 0 5px gold;
}

#Compass .clock .time:nth-of-type(5) {
    width: 200px;
    height: 200px;
    top: 260px;
    left: 260px;
    transition: 1s linear;
    border-radius: 50%;
    box-shadow: 0 0 5px gold;
}

#Compass .clock .time .secondbox {
    width: 350px;
    height: 20px;
    position: absolute;
    top: 340px;
    left: 350px;
    transform-origin: left center;
}

#Compass .clock .time .minutebox {
    width: 300px;
    height: 20px;
    position: absolute;
    top: 290px;
    left: 300px;
    transform-origin: left center;
}

#Compass .clock .time .hourbox {
    width: 240px;
    height: 20px;
    position: absolute;
    top: 230px;
    left: 240px;
    transform-origin: left center;
}

#Compass .clock .time .daybox {
    width: 170px;
    height: 20px;
    position: absolute;
    top: 160px;
    left: 170px;
    transform-origin: left center;
}

#Compass .clock .time .monthbox {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 90px;
    left: 100px;
    transform-origin: left center;
}

三、js

var timeDiv = document.querySelectorAll(".time");

var numberString = ["零", "壹", "貳", "叁", "肆", "伍", "陸", "柒", "捌", "玖", "拾"];
var Months = [];/* 月 */
var Days = [];/* 日 */
var Hours = [];/* 小时 */
var Minutes = [];/* 分钟 */
var Seconds = [];/* 秒 */
var Numbers = [];/* 文字数字数组 */

var secondCount = 60;
var minuteCount = 60;
var hourCount = 24;
var dayCount = 31;
var monthCount = 12;

CreateTimeNumbers();
DrawDialPlate();

/**
 * 组合大写数字
 */
function CreateTimeNumbers() {
    var numberCount = 60;
    for (var i = 0; i < numberCount; i++) {
        Numbers.push(GetNumberString(i));
    }
}
/**
 * 绘制表盘
 */
function DrawDialPlate() {
    /* 秒 */
    for (var i = 0; i < secondCount; i++) {
        var secondbox = document.createElement("div");
        secondbox.className = "secondbox";
        var rotate = 'rotate(' + i * (360 / secondCount) + 'deg)';
        secondbox.style.transform = rotate;
        secondbox.innerText = Numbers[i] + "秒";
        secondbox.style.textAlign = "right";
        secondbox.style.font = "12px 楷体";
        timeDiv[0].appendChild(secondbox);
    }
    /* 分钟 */
    for (var i = 0; i < minuteCount; i++) {
        var minutebox = document.createElement("div");
        minutebox.className = "minutebox";
        var rotate = 'rotate(' + i * (360 / minuteCount) + 'deg)';
        minutebox.style.transform = rotate;
        minutebox.innerText = Numbers[i] + "分";
        minutebox.style.textAlign = "right";
        minutebox.style.font = "13px 楷体";
        timeDiv[1].appendChild(minutebox);
    }
    /* 小时 */
    for (var i = 0; i < hourCount; i++) {
        var hourbox = document.createElement("div");
        hourbox.className = "hourbox";
        var rotate = 'rotate(' + i * (360 / hourCount) + 'deg)';
        hourbox.style.transform = rotate;
        hourbox.innerText = Numbers[i] + "时";
        hourbox.style.textAlign = "right";
        hourbox.style.font = "14px 楷体";
        timeDiv[2].appendChild(hourbox);
    }
    /* 日 */
    for (var i = 1; i <= dayCount; i++) {
        var daybox = document.createElement("div");
        daybox.className = "daybox";
        var rotate = 'rotate(' + (i - 1) * (360 / dayCount) + 'deg)';
        daybox.style.transform = rotate;
        daybox.innerText = Numbers[i] + "日";
        daybox.style.textAlign = "right";
        daybox.style.font = "15px 楷体";
        timeDiv[3].appendChild(daybox);
    }
    /* 月 */
    for (var i = 1; i <= monthCount; i++) {
        var monthbox = document.createElement("div");
        monthbox.className = "monthbox";
        var rotate = 'rotate(' + (i - 1) * (360 / monthCount) + 'deg)';
        monthbox.style.transform = rotate;
        monthbox.innerText = Numbers[i] + "月";
        monthbox.style.textAlign = "right";
        monthbox.style.font = "16px 楷体";
        timeDiv[4].appendChild(monthbox);
    }
}
var oldsecond = 0;
var oldminute = 0;
var oldhour = 0;
var olddate = 0;
var oldmonth = 0;

/**
 * 定时任务
 */
setInterval(function () {
    var timeNow = new Date();
    var month = timeNow.getMonth();
    var date = timeNow.getDate();
    var hour = timeNow.getHours();
    var minute = timeNow.getMinutes();
    var second = timeNow.getSeconds();
    if (oldsecond % 60 != second % 60) {
        oldsecond = second;
    }
    timeDiv[0].style.transform = 'rotate(' + (-oldsecond * (360 / secondCount)) + 'deg)';
    oldsecond++;
    if (oldminute != minute) {
        oldminute = minute;
        timeDiv[1].style.transform = 'rotate(' + (-oldminute * (360 / minuteCount)) + 'deg)';
    }
    if (oldhour != hour) {
        oldhour = hour;
        timeDiv[2].style.transform = 'rotate(' + (-oldhour * (360 / hourCount)) + 'deg)';
    }
    if (olddate != date) {
        olddate = date;
        timeDiv[3].style.transform = 'rotate(' + (-(olddate - 1) * (360 / dayCount)) + 'deg)';
    }
    if (oldmonth != month) {
        oldmonth = month;
        timeDiv[4].style.transform = 'rotate(' + (-oldmonth * (360 / monthCount)) + 'deg)';
    }
}, 1000);

/**
 * 根据数字获取大写数字
 * @param {number} number 数字
 * @returns 大写数字
 */
function GetNumberString(number) {
    var str = "";
    if (number % 10 == 0 && number / 10 > 0) {
        str = numberString[number / 10] + numberString[10];
    }
    else if (number < 10) {
        str = numberString[number];
    }
    else if (number < 20) {
        str = numberString[10] + numberString[number % 10];
    }
    else {
        str = numberString[parseInt(number / 10)] + numberString[10] + numberString[number % 10];
    }
    return str;
}