看效果（欢迎各位同学推荐更好的gif制作软件）

请看代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body {

             padding: 0;

             margin: 0;

             background-color: rgba(0, 0, 0, 1);

         }

         canvas {

             background-color: rgba(255, 255, 255, 1);

             display: block;

             margin: 10px auto;

         }

     </style>

 </head>

 <body>

 <canvas id="clock" width="600" height="600">当前浏览器不支持Canvas</canvas>

 <script>

     (function(){

         let canvas = document.querySelector("#clock");

         let ctx = canvas.getContext("2d");

         existRequestAnimationFrame();

         draw(ctx);

     })();

     function existRequestAnimationFrame(){

         var vendors = ['webkit', 'moz'];

         for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {

             var vp = vendors[i];

             window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];

         }

         if(!window.requestAnimationFrame){

             var lastTime = 0;

             window.requestAnimationFrame = function(callback){

                 var now = new Date().getTime();

                 var nextTime = Math.max(lastTime + 16, now);//浏览器渲染的间隔时间大约16ms

                 return window.setTimeout(function(){

                     callback(lastTime = nextTime);

                 },nextTime - now);

             };

         }

     }

     function draw(ctx){

         requestAnimationFrame(function step(){

             drawDial(ctx); //绘制表盘

             drawAllHands(ctx); //绘制时分秒针

             requestAnimationFrame(step);

         });

     }

     /*绘制时分秒针*/

     function drawAllHands(ctx){

         let time = new Date();

         let s = time.getSeconds(),m = time.getMinutes(),h = time.getHours();

         let pi = Math.PI;

         let secondAngle = pi / 180 * 6 * s + time.getMilliseconds()*pi*6/1000/180;  //计算出来s针的弧度

         let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度

         let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度

         drawHand(hourAngle, 90, 6, "NavyBlue", ctx);  //绘制时针

         drawHand(minuteAngle, 146, 4, "black", ctx);  //绘制分针

         drawHand(secondAngle, 248, 2, "red", ctx);  //绘制秒针

     }

     /* 绘制时针、或分针、或秒针

      * 参数1：要绘制的针的角度

      * 参数2：要绘制的针的长度

      * 参数3：要绘制的针的宽度

      * 参数4：要绘制的针的颜色

      * 参数4：ctx

      * */

     function drawHand(angle, len, width, color, ctx){

         ctx.save();

         ctx.translate(300, 300); //把坐标轴的远点平移到原来的中心

         ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度

         ctx.beginPath();

         ctx.moveTo(-4, 0);

         ctx.lineTo(len, 0);  // 沿着x轴绘制针

         ctx.lineWidth = width;

         ctx.strokeStyle = color;

         ctx.lineCap = "round";

         ctx.stroke();

         ctx.closePath();

         ctx.restore();

     }

     /*绘制表盘*/

     function drawDial(ctx){

         let pi = Math.PI;

         ctx.clearRect(0, 0, 600, 600); //清除所有内容

         ctx.save();

         //设置canvas四边角弧度区域为背景色

         ctx.translate(0, 0);

         ctx.beginPath();

         ctx.fillStyle = 'rgba(0, 0, 0, 1)';

         ctx.fillRect(0,0,600,600);

         ctx.fill();

         ctx.translate(300, 300);

         ctx.beginPath();

         ctx.arc(0, 0, 300, 0, 2 * pi); //绘制圆周

         ctx.fillStyle = 'rgb(255,255,255)';

         ctx.fill();

         ctx.stroke();

         ctx.closePath();

         //绘制数字

         for (let i = 0; i < 12; i++){

             let deg = -pi / 2 + i * pi / 6 + pi / 180 * 30,//旋转的角度

                 text = (i+1)+'';//数值

             ctx.save();

             ctx.beginPath();

             ctx.font = '27px Microsoft Yahei';

             ctx.fillStyle = 'rgb(0,0,0)';

             ctx.fillText(text, 250*Math.cos(deg) - 6, 250*Math.sin(deg) + 7);

             ctx.restore();

         }

         ctx.restore();

     }

 </script>

 </body>

 </html>

转载请注明出处，谢谢~

参考资料

http://www.w3school.com.cn/tags/html_ref_canvas.asp

http://www.runoob.com/html/html5-canvas.html

https://blog.csdn.net/u012468376/article/details/73350998

JavaScript实现iphone时钟的更多相关文章

  1. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  2. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  3. JavaScript之“创意时钟”项目

    “时钟展示项目”说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知 ...

  4. JavaScript超酷时钟的制作

    <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. FusionCharts可使用JavaScript渲染iPhone/iPod/iPad图表

    FusionCharts使用JavaScript: FusionCharts允许用户创建建立JavaScript图表(也就是web上的HTML5 /Canvas图表).这个特性允许用户在不支持Flas ...

  6. javascript判断iphone/android手机横竖屏模式的函数

    function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-d ...

  7. HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题

    1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...

  8. 【javascript】基于javascript的小时钟

    计时事件:通过JavaScript,我们可以设置在一段时间间隔后执行一段代码,而不仅仅是在函数调用后立即执行. 在JavaScript中,使用计时事件是很容易的,主要有两个事件供我们使用 setTim ...

  9. JavaScript实现数字时钟功能

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

随机推荐

  1. django by example 第四章 扩展 User 模型（ model）

    描述: RelatedObjectDoesNotExist at /account/edit/ User has no profile.​ 原因: 注意原书,要求新建一个账户才能使用.

  2. HTML语言

    复习: 1.Web项目的部署结构  静态Web技术(客户端技术):提供的内容任何人在任何时间访问都是一样的 HTML/CSS/JS/Flash.... 动态Web技术(服务器端技术):提供的内容不同人 ...

  3. Python Day 14 迭代器、for循环原理、枚举、生成器

    阅读内容 内容回顾   带参装饰器和wraps用法   迭代器知识引入   可迭代对象   迭代器对象   for循环迭代器   枚举对象   生成器 ##内容回顾 函数的嵌套定义:在函数内部定义另一 ...

  4. Unittest中TestCase类中定义的几个特殊方法

    1.setUp():每个测试方法运行前运行,测试前的初始化工作: 2.tearDown():每个测试方法运行结束后运行,测试后的清理工作: 3.setUpClass():所有的测试方法运行前运行,单元 ...

  5. MFC字体样式和颜色设置

    在编写MFC界面程序时,可能会使用不同大小或者颜色的字体,这里稍做记录. 使用方法 CFont *m_pFont;//创建新的字体 m_pFont = new CFont; m_pFont->C ...

  6. 单台机器安装zookeeper

    先给一堆学习文档,方便以后查看 官网文档地址大全: OverView(概述) http://zookeeper.apache.org/doc/r3.4.6/zookeeperOver.html Get ...

  7. Forward团队-爬虫豆瓣top250项目-项目进度

    项目地址:https://github.com/xyhcq/top250 我们的项目是爬取豆瓣top250的电影的信息,在做这个项目前,我们都没有经验,完全是从零开始,过程中也遇到了很多困难,不过我们 ...

  8. Python logging模块简介

    logging模块提供logger,handler,filter,formatter. logger:提供日志接口,供应用代码使用.logger最长用的操作有两类:配置和发送日志消息.可以通过logg ...

  9. RabbitMQ与消息总线

    Windows环境安装RabbitMQ,https://www.cnblogs.com/xibei666/p/5931267.html 1.消息发送流程 using System; using Sys ...

  10. SDWebImage之SDWebImageManager

    SDWebImageManager是SDWebImage的核心类.它拥有一个SDWebImageCache和一个SDWebImageDownloader属性,分别用于图片的缓存和下载处理.虽然是核心类 ...