`

HTML5编程百例之一：HTML5时钟

    博客分类：
  • web
web 
阅读更多


本文主要用到的知识

　　1、Canvas

　　2、三角函数

　　3、JavaScript

以上知识学习资源推荐

　　Canvas：https://developer.mozilla.org/en/Canvas_tutorial、http://www.w3.org/TR/2dcontext/

　　三角函数：http://zh.wikipedia.org/zh/%E4%B8%89%E8%A7%92%E5%87%BD%E6%95%B0

　　JavaScript：https://developer.mozilla.org/en/JavaScript、http://www.w3school.com.cn/js/index.asp

效果

 

源代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>超酷HTML5时钟(作者：http://www.cnblogs.com/jscode/)</title>
    <style type="text/css">
        .time {
            text-align: center;
            width:400px;
            font-family: "Book Antiqua",Palatino,serif;
            font-size: 40px;
            font-weight: bold;
            text-shadow: 1px 1px 3px #333;
            position:absolute;
        }
        .time em {
            background: white;
            position: absolute;
            top: 5px;
            left: 130px;
            height: 18px;
            width: 140px;
            opacity: 0.4;
        }
    </style>
    <script type="text/javascript">
        var canvas, context;
        function DrawClock() {
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            setInterval("drawbackground()", 1000);
        }
        function drawbackground() {
            var radius = Math.min(canvas.width / 2, canvas.height / 2) - 15;
            var centerx = canvas.width / 2;
            var centery = canvas.height / 2;
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.save();
            context.lineWidth = 15;
            context.fillStyle = "#EFEFEF";
            context.strokeStyle = "#000";
            context.beginPath();
            context.arc(centerx, centery, radius, 0, Math.PI * 2, 0);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
            for (var i = 0; i < 60; i++) {
                context.save();
                context.fillStyle = "#EFEFEF";
                context.strokeStyle = "#000";   
                if (i % 5 == 0) {
                    context.lineWidth = 3;
                }
                context.beginPath();
                context.moveTo(centerx, centery);
                context.lineTo(centerx + (radius-6) * Math.cos(i * 6 * Math.PI / 180), centery - (radius-5) * Math.sin(i * 6 * Math.PI / 180));
                context.fill();
                context.stroke();
                context.closePath();
                context.restore();
            }
            context.moveTo(centerx, centery);
            context.save();
            context.fillStyle = "#EFEFEF";
            context.strokeStyle = "#EFEFEF";
            context.beginPath();
            context.arc(centerx, centery, radius-15, 0, Math.PI * 2, 0);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
        
            var r = radius - 25;
            context.font = "bold 20px 宋体";
            Drawtext("1", centerx + (Math.cos(60 * Math.PI / 180) * r), centery - (Math.sin(60 * Math.PI / 180) * r));
            Drawtext("2", centerx + (Math.cos(30 * Math.PI / 180) * r), centery - (Math.sin(30 * Math.PI / 180) * r));
            Drawtext("3", centerx + (Math.cos(0 * Math.PI / 180) * r), centery - (Math.sin(0 * Math.PI / 180) * r));
            Drawtext("4", centerx + (Math.cos(330 * Math.PI / 180) * r), centery - (Math.sin(330 * Math.PI / 180) * r));
            Drawtext("5", centerx + (Math.cos(300 * Math.PI / 180) * r), centery - (Math.sin(300 * Math.PI / 180) * r));
            Drawtext("6", centerx + (Math.cos(270 * Math.PI / 180) * r), centery - (Math.sin(270 * Math.PI / 180) * r));
            Drawtext("7", centerx + (Math.cos(240 * Math.PI / 180) * r), centery - (Math.sin(240 * Math.PI / 180) * r));
            Drawtext("8", centerx + (Math.cos(210 * Math.PI / 180) * r), centery - (Math.sin(210 * Math.PI / 180) * r));
            Drawtext("9", centerx + (Math.cos(180 * Math.PI / 180) * r), centery - (Math.sin(180 * Math.PI / 180) * r));
            Drawtext("10", centerx + (Math.cos(150 * Math.PI / 180) * r), centery - (Math.sin(150 * Math.PI / 180) * r));
            Drawtext("11", centerx + (Math.cos(120 * Math.PI / 180) * r), centery - (Math.sin(120 * Math.PI / 180) * r));
            Drawtext("12", centerx + (Math.cos(90 * Math.PI / 180) * r), centery - (Math.sin(90 * Math.PI / 180) * r));
            context.save();
            context.fillStyle="black";
            context.beginPath();
            context.arc(centerx,centery,10,0,Math.PI*2,0);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
        
            drawpoint(centerx, centery, radius);
        
        }
        
        function drawpoint(centerx, centery, radius) {
            var date = new Date();
            var h = date.getHours();
            h = h < 13 ? h : h - 12;
            var m = date.getMinutes();
            var s = date.getSeconds();
        
            var th = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var tm = m < 10 ? "0" + m : m;
            var ts = s < 10 ? "0" + s : s;
            document.getElementById("currtime").innerHTML = th + ":" + tm + ":" + ts;
        
            var hr = h * 30 * Math.PI / 180 + (m / 60) * 30 * Math.PI / 180 + 90 * Math.PI / 180;
            var mr = m * 6 * Math.PI / 180 + s / 60 * 6 * Math.PI / 180 + 90 * Math.PI / 180;
            var sr = s * 6 * Math.PI / 180 + 90 * Math.PI / 180;
            context.save();
            context.lineWidth = 5;
            context.fillStyle = "darkgray";
            context.strokeStyle = "black";
            context.beginPath();
            context.moveTo(centerx + 20 * Math.cos(hr), centery + 20 * Math.sin(hr));
            context.lineTo(centerx - (radius - 120) * Math.cos(hr), centery - (radius - 120) * Math.sin(hr));
        
            context.moveTo(centerx + 20 * Math.cos(mr), centery + 20 * Math.sin(mr));
            context.lineTo(centerx - (radius - 80) * Math.cos(mr), centery - (radius - 80) * Math.sin(mr));
        
        
            context.moveTo(centerx + 20 * Math.cos(sr), centery + 20 * Math.sin(sr));
            context.lineTo(centerx - (radius - 50) * Math.cos(sr), centery - (radius - 50) * Math.sin(sr));
        
            context.closePath();
            context.fill();
            context.stroke();
            context.restore();
        }
        
        function Drawtext(text, x, y) {
            context.save();
            x -= (context.measureText(text).width / 2);
            y += 9;
            context.beginPath();
            context.translate(x, y);
            context.fillText(text, 0, 0);
            context.restore();
        }
        
        window.onload = DrawClock;
    </script>
</head>
<body>
    <h1>超酷HTML5时钟(作者：http://www.cnblogs.com/jscode/)</h1>
    <canvas id="canvas" width="400px" height="400px"></canvas>
    <div class="time"><span id="currtime">00:00:00</span><em></em></div>
</body>
</html>

方法作用解释：

DrawClock方法取得Canvas上下文

drawbackground 方法主要是画时钟的背景部分：边框、文字、刻度线

drawpoint 方法用来画时、分、秒线

Drawtext 方法是添加文字的

分享到：
| discuz x2.0 人人连接最新插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JAVA编程百例(照着例子更容易!)

    实例29 绘制指针时钟 实例3 数组数据操作 实例30 三围立方框 实例31 三围立方体 实例32 标准输入输出 实例33 读写文件（字节） 实例34 读写文件（字符操作） 实例35 获取文件信息 实例36 目录操作 实例37 读取随机...

    罗盘时钟Python HTML代码文件

    大家在刷视频的时候看到的动态罗盘时钟，今天给出源码，供喜欢的...html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化。动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟

    java编程100例

    java编程100实例，适合初学java的朋友学习，含有源代码，省去了码代码的时间，可以直接导入，运行。建议实用eclipse，内容如下： 实例1 产生自己的控件 实例2 控件的排布示例 实例3 控件的相互控制与消息传递 实例4 ...

    带表盘和数字刻度HTML5时钟代码

    canvas实现的带表盘和数字刻度HTML5时钟代码，里面有3种内置的主题，它带有时钟表盘界面和数字刻度。

    Visual.C#.编程精彩百例

    实例5 文件与目录管理 实例6 用户界面上的“Hello，World！” 实例7 组件化“Welcome”程序 实例8 网络上的“Hello World” 实例9 Ref、Out与Params描述符的应用 实例10 C#自动内存管理的应用 实例11 一个有趣...

    HTML网页数字时钟代码.rar

    居中的数字时钟，电子时钟样式，包含年月日时分秒。

    网红罗盘时钟.rar

    网红罗盘时钟，利用js、css、html创作的一款动态壁纸，该动态壁纸是一个时钟，实时更新。如果要把他用于电脑壁纸使用，需要找两万一款壁纸软件，然后使用该壁纸即可。

    数字时钟.html

    数字时钟.html

    《Visual.C#.编程精彩百例》配套光盘part1

    第1篇 Visual C#基础编程实例 实例1 C#经典程序--Hello World 实例2 C#的简单输入输出（I/O） 实例3 C#的复杂输入输出（I/O） 实例4 通信录管理与维护 实例5 文件与目录管理 实例6 用户界面...

    【小程序素材】画布：时钟.zip

    JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS...

    HTML编程计时器钟表

    计时器钟表，实时显示当前时间，通过网页显示，可通过记事本观看代码

    HTML5 Canvas爱心时钟代码

    HTML5 Canvas爱心时钟代码是一款爱心组成的数字时钟网页特效下载。

    《Visual.C#.编程精彩百例》配套光盘.part2

    第1篇 Visual C#基础编程实例 实例1 C#经典程序--Hello World 实例2 C#的简单输入输出（I/O） 实例3 C#的复杂输入输出（I/O） 实例4 通信录管理与维护 实例5 文件与目录管理 实例6 用户界面...

    jQuery酷炫LED数字时钟.zip

    Jquery是网页编程所需的重要技术之一。Jquery是继prototype之后又一个优秀的Javascrīpt框架，它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、...

    Tcl_TK编程权威指南pdf

    它其实是指两样东西：一种脚本语言，以及该脚本语言的解释器。该解释器可以很容易地嵌入到你的应用程序中。Tcl和与之关联的图形用户界面工具包(Tk)是由加州大学的John Ousterhout教授设计并编写的。尽管它是个商用...

    使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程).zip

    使用 HTML、CSS 和 JavaScript 编程代码制作模拟时钟，这是一个非常简单很基础的设计，你可以在这里延伸扩展。这里有时针、分针和秒针，可以查看时间。时钟脉冲中有1 到 12 的数字。时间取决于您设备的时间，即时间...

    抖音很火罗盘时钟.rar

    用JavaScript写抖音很火的罗盘时钟源码

    圆盘时钟动画源码

    圆盘时钟动画源码,很有美感，希望对在学前端的你能有所帮助

    PERL编程24学时教程.pdf

    15.2 练习：一种自由格式备忘记事板 171 15.3 将文本文件用作数据库 173 15.4 随机访问文件 175 15.4.1 打开文件进行读写操作 175 15.4.2 在读写文件中移动 176 15.5 锁定文件 176 15.5.1 锁定UNIX和NT下的文件 178 ...

    jsp编程技巧集锦

    JSP中显示图片的方法之一? 74. int转为Integer的方法? 75. 请求jsp页面禁止缓存方法? 76. select选中其中的值自动到一个文本框? 77. JSP连接数据库? 78. JSP两级下拉列表框联动（数据库）? 79. ...

Magicbox
Global site tag (gtag.js) - Google Analytics