Html5代码实现动态时钟

最新推荐文章于 2024-10-05 19:50:23 发布

小激动. Caim

最新推荐文章于 2024-10-05 19:50:23 发布

阅读量5.2k

点赞数 6

分类专栏：网站建设基础（html+div+css）文章标签： html5 javascript html

本文链接：https://blog.csdn.net/dica54dica/article/details/129977318

版权

网站建设基础（html+div+css）专栏收录该内容

11 篇文章 4 订阅

订阅专栏

以下是一个简单的HTML5动态时钟的示例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5动态时钟</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            color: #fff;
            font-size: 5em;
            font-family: Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        function updateTime() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            hours = (hours < 10 ? "0" : "") + hours;
            minutes = (minutes < 10 ? "0" : "") + minutes;
            seconds = (seconds < 10 ? "0" : "") + seconds;
            var timeString = hours + ":" + minutes + ":" + seconds;
            document.getElementById("clock").innerHTML = timeString;
        }
        setInterval(updateTime, 1000);
    </script>
    <div id="clock"></div>
</body>
</html>

该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。

动态时钟效果

在这里插入图片描述

以下是一个HTML5动态时钟表盘的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5动态时钟表盘</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        canvas {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="clock" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById("clock");
        var context = canvas.getContext("2d");
        var radius = canvas.height / 2;
        context.translate(radius, radius);
        radius = radius * 0.90;
        setInterval(drawClock, 1000);
        
        function drawClock() {
            drawFace(context, radius);
            drawNumbers(context, radius);
            drawTime(context, radius);
        }
        
        function drawFace(context, radius) {
            var grad;
            context.beginPath();
            context.arc(0, 0, radius, 0, 2*Math.PI);
            context.fillStyle = '#333';
            context.fill();
            grad = context.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
            grad.addColorStop(0, '#fff');
            grad.addColorStop(0.5, '#333');
            grad.addColorStop(1, '#fff');
            context.strokeStyle = grad;
            context.lineWidth = radius*0.1;
            context.stroke();
            context.beginPath();
            context.arc(0, 0, radius*0.1, 0, 2*Math.PI);
            context.fillStyle = '#fff';
            context.fill();
        }
        
        function drawNumbers(context, radius) {
            var ang;
            var num;
            context.font = radius*0.15 + "px arial";
            context.textBaseline="middle";
            context.textAlign="center";
            for(num = 1; num < 13; num++){
                ang = num * Math.PI / 6;
                context.rotate(ang);
                context.translate(0, -radius*0.85);
                context.rotate(-ang);
                context.fillText(num.toString(), 0, 0);
                context.rotate(ang);
                context.translate(0, radius*0.85);
                context.rotate(-ang);
            }
        }
        
        function drawTime(context, radius){
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            // 小时
            hour=hour%12;
            hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
            drawHand(context, hour, radius*0.5, radius*0.07);
            // 分钟
            minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
            drawHand(context, minute, radius*0.8, radius*0.07);
            // 秒钟
            second=(second*Math.PI/30);
            drawHand(context, second, radius*0.9, radius*0.02);
        }
        
        function drawHand(context, pos, length, width) {
            context.beginPath();
            context.lineWidth = width;
            context.lineCap = "round";
            context.moveTo(0,0);
            context.rotate(pos);
            context.lineTo(0, -length);
            context.stroke();
            context.rotate(-pos);
        }
    </script>
</body>
</html>

该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。CSS样式用于设置页面的背景颜色，文本颜色，字体样式和文本对齐方式。JavaScript代码用于画出时钟表盘，包括表盘的外圆，刻度线，数字和时、分、秒针。setInterval函数用于每秒钟调用一次drawClock函数，以便时钟表盘可以动态更新。