看效果（欢迎各位同学推荐更好的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. 【Mybatis】MyBatis快速入门（一）

    Mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可 ...

  2. Kotlin 开篇

    Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发官网地址:http://kotlinlang.org.JetBrains,作为目前广受欢迎的 Java IDE Intel ...

  3. Buffer cache hit ratio性能计数器真的可以作为SQL Server 内存瓶颈的判断指标吗？

    SQL Server中对于Buffer cache hit ratio的理解: Buffer cache hit ratio官方是这么解释的:“指示在缓冲区高速缓存中找到而不需要从磁盘中读取的页的百分 ...

  4. HSmartWindowControl之安装篇 (Visual Studio 2013 & Halcon 18）

    1.环境简介 Visual Studio 2013社区版 Halcon18.05 2.使用Nuget在VS工程中安装Halcon插件 搜索栏输入关键字halcon,出现两个插件,分别是halcon语言 ...

  5. 背水一战 Windows 10 (74) - 控件（控件基类）: UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件

    [源码下载] 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件 作者:webabcd 介绍 ...

  6. Mybatis关系映射

    一.一对一关系映射 使用resultType+包装类实现 1.假设问题背景是要求在某一个购物平台的后台程序中添加一个这样的功能:查询某个订单的信息和下该订单的用户信息.首先我们可以知道,一般这样的平台 ...

  7. 五花八门的CSS

    一.颜色 rgba(0, 0, 0, 0.5) rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值.范围从0到1, ...

  8. [CocoaPods]如何使用CocoaPods插件

    CocoaPods +插件 CocoaPods是一个由极少数维护者运营的社区项目,需要维护大量的表面区域.可以肯定地说CocoaPods永远不会支持Xcode支持的每个功能,即使这样,团队也必须对许多 ...

  9. Swift5 语言指南(十一) 结构和类

    结构和类是通用的,灵活的结构,它们成为程序代码的构建块.您可以使用与定义常量,变量和函数相同的语法来定义属性和方法,以便为结构和类添加功能. 与其他编程语言不同,Swift不要求您为自定义结构和类创建 ...

  10. mysql数据表修复

    当数据库表被破坏,运行报错: Table './database/tablename' is marked as crashed and last (automatic?) repair failed ...