html5&css&js代码 019旋转时钟

明月看潮生

于 2024-03-15 10:55:46 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

分类专栏： # 编程笔记：网页编程代码文章标签： html5 css javascript 少年工程师青少年编程

原文链接：https://huaweicloud.csdn.net/638ee025dacf622b8df8d4ab.html

编程笔记：网页编程代码专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了如何使用HTML5、CSS和JavaScript实现一个旋转时钟，包括代码实现、标签创建、时间获取、颜色和位置的动态变化过程，以及如何通过定时器实现时钟的自动旋转。

这段HTML代码实现了一个旋转时钟的效果。页面加载时，会根据当前时间将月份、日期、星期、小时、分钟和秒分别渲染为一个标签，并通过动态修改标签的位置和颜色来实现时钟的旋转效果。

本文对原文进行了简化。
原文地址：https://huaweicloud.csdn.net/638ee025dacf622b8df8d4ab.html

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转时钟</title>
    <style>
        body{
         background-color: #333333;
            color: #ffa500;
            background-size: cover;
            margin: 200px;
        }
        #clock {
            background-color: #333333;
            margin-top: 500px;
        }
        .label{
            display:inline-block;
            text-align: center;
            font-size:12px;
            transition:left 1s,top 1s;
            transform-origin: 0 0;
            width: 50px;
        }
        .out{
            width: 300px;
            height: 800px;
            line-height: 100px;
            background-size: contain;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
            font-size: 100px;
            position: absolute;
            top: 50%;
            transform: translate(-10%,-50%);
        }
    </style>
</head>

<body>
<div id="clock"></div>
<div class="out">
    当间时间
</div>
</body>
<!-- 原创地址：https://huaweicloud.csdn.net/638ee025dacf622b8df8d4ab.html-->
<script>
    let weekText = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    // 使用循环生成月日时分秒
    let monthText = [];
    for(let i=0;i<12;i++){
        if(i<9){
            let j=i+1
            monthText[i]='0'+j+'月';
        }else{
            monthText[i]=i+1+'月';
        }
    }
    let dayText = [];
    for(let i=0;i<31;i++){
        if(i<9){
            let j=i+1
            dayText[i]='0'+j+'号';
        }else{
            dayText[i]=i+1+'号';
        }
    }
    let hourText = [];
    for(let i=0;i<24;i++){
        if(i<10){
            hourText[i]='0'+i+'点';
        }else{
            hourText[i]=i+'点';
        }
    }
    let minuteText = [];
    for(let i=0;i<60;i++){
        if(i<10){
            minuteText[i]='0'+i+'分';
        }else{
            minuteText[i]=i+'分';
        }
    }
    let secondText = [];
    for(let i=0;i<60;i++){
        if(i<9){
            let j=i+1
            secondText[i]='0'+j+'s';
        }else{
            secondText[i]=i+1+'s';
        }
    }

    // 存放dom元素的数组
    let monthList = [];
    let dayList = [];
    let weekList = [];
    let hourList = [];
    let minuteList = [];
    let secondList = [];

    //二维数组 存放文字内容及页面显示标签
    let timeTextSet = [
        [monthText, monthList],
        [dayText, dayList],
        [weekText, weekList],
        [hourText, hourList],
        [minuteText, minuteList],
        [secondText, secondList]
    ];
    console.log(timeTextSet);
    // 判断是否为旋转页面
    let isRotating = false;
    //时钟页面
    let clock;
    window.onload = function () {
        init();
        // 每隔100ms获得 当前时间
        setInterval(function () {
            runTime();
        }, 100);

        // 旋转之前定位到当前时间
        locateCurrent();
        // 变成旋转样式
        setTimeout(function () {
            toRotate();
        }, 100);
    }
    // 初始化函数
    function init() {
        clock = document.getElementById('clock');
        // 生成标签 存放文字展示
        for (let i = 0; i < timeTextSet.length; i++) {
            for (let j = 0; j < timeTextSet[i][0].length; j++) {
                let temp = createLabel(timeTextSet[i][0][j]);
                clock.appendChild(temp);
                // 将生成的标签存放在数组list中
                timeTextSet[i][1].push(temp);
            }
        }
    }

    // 创建标签并将文字填充标签内 接收参数为文字内容
    function createLabel(text) {
        let div = document.createElement('div');
        div.classList.add('label');
        div.innerText = text;
        return div;
    }

    function runTime() {
        //当前时间获取
        let now = new Date();
        let month = now.getMonth();
        let day = now.getDate();
        let week = now.getDay();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let seconds = now.getSeconds();

        // 初始化时间颜色 并将走过的时间设置为黄色
        initStyle();

        // 将当前时间月份存放在数组中
        let nowValue = [month, day - 1, week, hour, minute, seconds];
        for (let i = 0; i < nowValue.length; i++) {
            let num = nowValue[i];
            timeTextSet[i][1][num].style.color = 'rgb(255, 255, 200)';
            timeTextSet[i][1][num].style.width = '75px';
            timeTextSet[i][1][num].style.borderBottom = '1px solid rgb(255, 0, 255)';
        }

        // 变成旋转时钟
        if (isRotating) {
            // 圆心位置确定
            let widthMid = document.body.clientWidth / 2
            let heightMid = document.body.clientHeight/2
            // 将每一个dom元素确定到圆的位置
            for (let i = 0; i < timeTextSet.length; i++) {
                for (let j = 0; j < timeTextSet[i][0].length; j++) {
                    // 计算出每一个元素的位置  x y 坐标，圆的半径与时分秒的位置有关
                    let r = (i + 1) * 35 + 30 * i;
                    // 计算每一个平均的角度  将每一个单位对齐,再转化成弧度
                    let deg = 360 / timeTextSet[i][1].length * (j - nowValue[i]) ;
                    // 计算dom元素的坐标
                    let x = r * Math.sin(deg * Math.PI / 180) + widthMid;
                    let y = heightMid - r*Math.cos(deg * Math.PI / 180);
                    // 样式
                    let temp =  timeTextSet[i][1][j];
                    temp.style.transform = 'rotate(' + (-90 + deg ) + 'deg)';
                    temp.style.left = x + 'px';
                    temp.style.top = y + 'px';
                }
            }
        }
    }

    // 将所有标签置为灰色
    function initStyle() {
        let label = document.getElementsByClassName('label');
        for (let i = 0; i < label.length; i++) {
            label[i].style.color = 'rgb(251, 255, 0)';
            label[i].style.borderBottom = 'none';
            label[i].style.width = '30px';
            label[i].style.background = 'none';
        }
    }

    function locateCurrent() {
        for (let i = 0; i < timeTextSet.length; i++) {
            for (let j = 0; j < timeTextSet[i][1].length; j++) {
                // 获取原来的位置  再修改position 设置left top
                let tempX = timeTextSet[i][1][j].offsetLeft + "px";
                let tempY = timeTextSet[i][1][j].offsetTop + "px";
                // console.log(timeTextSet[i][1][j]);
                // 利用let 防止闭包
                setTimeout(function () {
                    timeTextSet[i][1][j].style.position = "absolute";
                    timeTextSet[i][1][j].style.left = tempX;
                    timeTextSet[i][1][j].style.top = tempY;
                }, 50);
            }
        }
    }

    function toRotate() {
        isRotating = true;
        clock.style.transform = "rotate(90deg)";
    }

</script>
</html>

二、解释

这段HTML代码实现了一个旋转时钟的效果。页面加载时，会根据当前时间将月份、日期、星期、小时、分钟和秒分别渲染为一个标签，并通过动态修改标签的位置和颜色来实现时钟的旋转效果。
首先，定义了若干变量和数组，如星期、月份、日期、小时、分钟和秒的文本，并初始化了存放DOM元素的数组。
接着，通过init函数创建标签并将其添加到页面中，同时将生成的标签存放在对应的数组中。
在runTime函数中，获取当前时间并初始化时间颜色，然后将当前时间的文本标签颜色设为黄色，并计算每个时间单位的位置和角度，通过修改标签的transform、left和top属性实现时钟的旋转效果。
initStyle函数用于将所有标签的颜色和样式重置为初始状态。
locateCurrent函数用于在时钟开始旋转之前将标签定位到当前时间的位置。
toRotate函数用于将时钟的样式变为旋转状态。
整体而言，该代码通过动态修改DOM元素的位置和样式实现了时钟的旋转效果。