看效果（欢迎各位同学推荐更好的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. 【Git】 GitLab配置优化及汉化

    GitLab配置 1.修改GitLab绑定的域名 a.修改/etc/gitlab/gitlab.rb配置文件,修改成自己的域名 external_url 'http://gitlab.example. ...

  2. python模块：datetime

    # Stubs for datetime # NOTE: These are incomplete! import sys from typing import Optional, SupportsA ...

  3. 【转】Closeable, Readable, Flushable, Appendable

    Closeable: package java.io; import java.io.IOException; public interface Closeable { /** * Closes th ...

  4. PowerShell 使用.NetFramework

    我们都知道,由于PowerShell是基于.NETFramework建立的所以它能够具备访问.NET的能力,因为.NET提供了庞大的数据类库,所以我们可以很好的使用PowerShell去完成一些Pow ...

  5. 冲刺博客NO.7

    今天做了什么: 在Iconfont-阿里巴巴矢量图标库找了个图标,仍感觉不是很好看. 查询函数遇到了很多困难 困难:不会真机测试,链接USB后 adb没检测到设备(包括真机和虚拟机). 在Termin ...

  6. k8s docker集群搭建

    一.Kubernetes系列之介绍篇   •Kubernetes介绍 1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器 ...

  7. RabbitMQ 常用操作

    RabbitMQ简介 1.首先安装erlang rpm -Uvh https://www.rabbitmq.com/releases/erlang/erlang-19.0.4-1.el7.centos ...

  8. 压测工具之JMeter之环境配置及运行

    一.下载JMeter 地址:http://jmeter.apache.org/download_jmeter.cgi 系统:win7 x64 在 Binaries 目录下选择一个合适自己系统的版本,不 ...

  9. Dot & cross product

    https://www.khanacademy.org/math/linear-algebra/vectors-and-spaces/dot-cross-products/v/vector-dot-p ...

  10. centoos内核升级

    1.检查当前CentOS内核版本 uname -r 2.导入key 打开http://elrepo.org/tiki/tiki-index.php 复制执行该命令 3.安装ELRepo 打开2步中的网 ...