利用html 5制作一个简单的时钟效果-H5教程-PHP中文网

首页

web前端

H5教程

利用html 5制作一个简单的时钟效果

王林

Mar 04, 2021 am 11:21 AM

时钟

利用html 5制作一个简单的时钟效果

我们先来看看最终效果：

看上去很简单的一个时钟效果，但是具体实现代码仍然包含了一些重点知识。

下面是具体的实现代码：

（提示：要特别注意fillText drawhand 的使用及其中角度的计算）

<%-- 
    Document   : 时钟
    Created on : 2016-5-19, 9:49:29
    Author     : Administrator
--%>
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
    <script>
        (function(){
            //cavas元素对象
            var canvas=null;
            //canvas的3d上下文
            var ctx=null;
            //cavan的尺寸
            var cw=0;
            var ch=0;
            /**
             * 页面导入时的事件处理
             */
            window.addEventListener("load",function(){
                canvas=document.getElementById("sample");
                ctx=canvas.getContext("2d");
                cw=parseInt(canvas.width);
                ch=parseInt(canvas.height);
                
                ctx.translate(cw/2, ch/2);
            
                //绘制时钟
                draw_watch();
            },false);  
 
        
            /**
             * 绘制时钟
             */
            function draw_watch(){
                //清空Canvas
                ctx.clearRect(-cw/2,-ch/2,cw,ch);
                //计算针的最大长度
                var len=Math.min(cw, ch)/2;
                //绘制刻度盘
                var tlen=len*0.85;
                ctx.font="14px &#39;Arial&#39;";
                ctx.fillStyle="black";
                ctx.textAlign="center";
                ctx.textBaseLine="middle";
            
                for(var i=0; i<12; i++){
                    var tag1=Math.PI*2*(3-i)/12;
                    var tx=tlen * Math.cos(tag1);
                    var ty=-tlen * Math.sin(tag1);
                    ctx.fillText(i,tx,ty);
                }
                //获取当前的时分秒
                var d=new Date();
                var h=d.getHours();
                var m=d.getMinutes();
                var s=d.getSeconds();
                if(h >12 ){
                    h=h-12;
                }
            
                //绘制时针
                var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
                var length1=len * 0.5;
                var width1=5;
                var color1="#000000";
                drawhand(angle1,length1,width1,color1);
            
                //绘制分针
                var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
                var length2=len * 0.7;
                var width2=3;
                var color2="#555555";
                drawhand(angle2,length2,width2,color2);
            
                //绘制秒针
                var angle3 = Math.PI * 2 *(15 - s)/60;
                var length3=len * 0.8;
                var width3=1;
                var color3="#aa0000";
                drawhand(angle3,length3,width3,color3);
            
                //设置timer
                setTimeout(draw_watch,1000);
            }
            /**
             * 针绘制函数
             */
        
            function drawhand(angle,len,width,color){
                //计算针端的坐标
                var x=len*Math.cos(angle);
                var y=-len * Math.sin(angle);
                //绘制针
                ctx.strokeStyle=color;
                ctx.lineWidth=width;
                ctx.lineCap="round";
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(x,y);
                ctx.stroke();
            
            }
        })();
    </script>
    <body>
        <canvas id="sample" width="150" height="150"></canvas>
    </body>
</html>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7513

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

iPhone中缺少时钟应用程序：如何修复 May 03, 2024 pm 09:19 PM

您的手机中缺少时钟应用程序吗？日期和时间仍将显示在iPhone的状态栏上。但是，如果没有时钟应用程序，您将无法使用世界时钟、秒表、闹钟等多项功能。因此，修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序，您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动，直到到达“应用程序库”页面。步骤2–接下来，在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时，请按住它并

如何在 iPhone 上使用多计时器与 iOS 17 Jun 21, 2023 am 08:18 AM

什么是iOS17上的多计时器？在iOS17中，Apple现在为用户提供了在iPhone上一次设置多个计时器的能力。这是一个可喜的变化，许多人多年来一直期待的变化。时钟应用程序在iOS16之前只允许用户一次设置一个计时器，现在可用于激活任意数量的计时器，使其成为您一次完成多个任务的理想选择。您可以在计时器屏幕中设置任意数量的计时器。启动计时器后，所有活动计时器都将在锁屏界面和通知中心显示为“实时活动”通知。从这里，您可以查看计时器关闭、暂停或停止计时器的剩余时间，而无需打开时钟应用程序。当您在时钟

iOS 17：如何在待机模式下更改iPhone时钟样式 Sep 10, 2023 pm 09:21 PM

待机是一种锁定屏幕模式，当iPhone插入充电器并以水平（或横向）方向定位时激活。它由三个不同的屏幕组成，其中一个是全屏时间显示。继续阅读以了解如何更改时钟的样式。StandBy的第三个屏幕显示各种主题的时间和日期，您可以垂直滑动。某些主题还会显示其他信息，例如温度或下一个闹钟。如果您按住任何时钟，则可以在不同的主题之间切换，包括数字、模拟、世界、太阳能和浮动。Float以可自定义的颜色以大气泡数字显示时间，Solar具有更多标准字体，具有不同颜色的太阳耀斑设计，而World则通过突出显示世界地

如何在 iPhone 上关闭闹钟 [2023] Aug 21, 2023 pm 01:25 PM

自从智能手机问世以来，它们无疑取代了闹钟。如果您拥有iPhone，则可以使用时钟应用程序在一天中的多个场合轻松设置任意数量的闹钟。该应用程序可让您配置闹钟时间，提示音，重复的频率，以及您是否希望使用“贪睡”选项来延迟它们。如果您想关闭已设置的闹钟，以下帖子应该可以帮助您禁用和删除iPhone上的常规闹钟和唤醒闹钟。如何在iPhone上关闭常规闹钟默认情况下，当您在时钟应用程序上添加闹钟或要求Siri为您添加闹钟时，您实际上是在创建常规闹钟。您可以在iPhone上创建任意数量的闹钟，并且可以将它们

iOS 17中如何自定义待机颜色 Sep 23, 2023 pm 12:53 PM

Apple在iOS17中提供了一种新的锁屏模式，称为待机模式，当您的iPhone插入充电器（有线或无线）并以横向方向放置在支架上时，该模式会激活。此模式将通过显示时钟、天气数据、日历和一些小部件，一目了然地显示比标准锁定屏幕更多的信息。在设置中启用此功能后，当您的iPhone在充电时横向放置时，它将自动进入待机模式。如何在iOS17中更改待机颜色待机模式提供了一组三个页面（小部件、照片和时钟），您可以通过在屏幕上滑动来回切换。在这些页面中，只有“时钟”屏幕可让您自定义屏幕上显示的颜色，以便您可以

win10电脑时钟总是不准确怎么办_调整win10电脑时间的几种方法 Mar 27, 2024 pm 05:10 PM

1、首先点击开始菜单，选择开始菜单里的设置按钮。2、打开后选择时间与语言设置。3、把它换成自动设置时间。4、你也可以把自动设置时间关掉，选择自己更改的时间。方法二：1、打开【其他日期、时间和区域设置】选项。2、选择【设置时间和日期】。3、选择【Internet时间】，打开【更改设置选项】。4、勾选【与Internet时间服务器同步(S)】，点击【立即更新】，然后点击确定就可以了。

抖音标签后面的时钟怎么设置？它的标签怎么设置可以引流？ Mar 25, 2024 pm 05:21 PM

抖音作为全球最受欢迎的短视频平台之一，其强大的功能和丰富的玩法让用户们爱不释手。在抖音中，我们可以给作品添加标签来提高曝光度，而标签后面的时钟则是提示该标签下的内容更新时间。那么，如何设置抖音标签后面的时钟呢？本文将详细介绍抖音标签和时钟的设置方法，以及如何通过标签引流。一、抖音标签后面的时钟怎么设置？1.打开抖音，点击“创作”按钮，进入视频编辑页面。2.选择好素材后，点击“下一步”，进入作品发布页面。3.在作品发布页面，填写作品标题，然后点击“添加标签”。4.在标签页面，输入想要添加的标签名称

如何利用Vue和Canvas创建炫酷的时钟和倒计时应用 Jul 17, 2023 am 09:48 AM

如何利用Vue和Canvas创建炫酷的时钟和倒计时应用引言：在现代的Web开发中，随着Vue框架的流行和Canvas技术的广泛应用，我们可以通过结合Vue和Canvas来创建各种令人叹为观止的动画效果。本文将重点介绍如何利用Vue和Canvas创建炫酷的时钟和倒计时应用，并提供相应的代码示例，方便读者跟随学习。一、时钟应用创建Vue实例和Canvas元素首先

See all articles

利用html 5制作一个简单的时钟效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题