看效果（欢迎各位同学推荐更好的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. 数据库-mysql语句-查

    复习: 列类型: 数值类型:   20   '20' tinyint / smallint / int / bigint float / double / decimal(m,d) bool (TRU ...

  2. java crach 日志解析

    在java开发中,或许会出现如下错误,这种错误大多出现在开发中涉及本地代码的地方. ## A fatal error has been detected by the Java Runtime Env ...

  3. SAS 输入与输出格式

    SAS 输入与输出格式 一.认识SAS中的数据格式 SAS 中的格式有: 数字型 字符型 日期型 1.其中数字型的格式有一下集中表示方式: 整型数值:321 浮点数值:321.123 带逗号的数值:1 ...

  4. fly插件飞向购物车

    首先载入jQuery库文件和jquery.fly.min.js插件. 插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs ...

  5. git-创建新项目

    1.一般第一次使用git,需要进行全局设置,如果下次创建新项目或者fork别人的项目,则不需要再进行设置:但是如果想要提交到不同的代码管理网站,则需要再设置,比如现在我的是在gitlab.com上进行 ...

  6. re、词云

    正则:   re.S使点也能匹配到\n:re.I不区分规则中的大小写:re.X忽略空格及#后的注释:re.M把^和$由文首文末变为各行的首尾.   Egの删除各行行尾的alex,alex不区分大小写: ...

  7. Ngui分辨率适配

    必备知识点 1.分辨率适配必然是Orthographic Camera 2.Camera下对应的“Size”(图1)属性大小的理解:当前摄像机高度 = Size * 2 * UnityUnit(Uni ...

  8. day15_雷神_前端03

    # 前端 day03 内容回顾 javascript: 1.ECMAScript5.0 es6(阮一峰) es7 es8 (1)声明变量 var let (2)内置函数 Date Math.rando ...

  9. InstallShield 创建 visual studio 工程的时候 指向 任意 visual studio 版本 方法 (修改 计算机 默认 visual studio shell 版本)

    这需要 修改 计算机 默认 visual studio shell 版本 注册表 HKEY_CLASSES_ROOT VisualStudio.DTE 配置节点 描述的是 默认的 visual stu ...

  10. 使用 Resharper 快速做适配器

    如果需要做一个类的重写,需要重新写这个类的所有属性和函数,本文提供一个简单的方法让大家快速重写一个类的所有属性和函数. 在有 Resharper 之后,对一个比较长的类进行重构.例如有这个类 clas ...