看效果（欢迎各位同学推荐更好的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. 2018-10-19,下午4点拿到京东offer

    今天12点没有问题就签.岗位,地点都很满足.京东居然对我这么好,保证以后不做损坏京东利益的事写给以后的自己.

  2. javaScrpit 开端

    JavaScript 代码可以直接嵌在网页的任何地方,不过我们通常把JavaScrpit放到<head>中: <html> <head> <script> ...

  3. Ubuntu 利用 crontab 和 notify-send 定时发送桌面通知，提示该休息啦

    [经测试,每隔多少分钟执行并不像自己想象的一样] 比如:每隔50分钟执行一次提醒      */50 * * * * export DISPLAY=:0.0; notify-send -i /home ...

  4. （转）Flex 布局教程：

    这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...

  5. js实现粒子特效，particles.js的使用

    今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...

  6. java jar 包加载文件问题

    场景:   A 项目是一个服务,然后部署到本地 maven 仓库里,然后 B 项目依赖 A 项目,调用  A 项目的方法,但是发现,报错,说找不到文件(config.xsv).这就很奇怪了,怎么会呢, ...

  7. MySQL—函数大全

    一.数学函数: #ABS 绝对值函数 ) ; #BIN 返回二进制,OCT()八进制,hex十六进制 ); #ceiling 天花板整数,也就是大于x的整数 select CEILING(-13.5) ...

  8. kaldi脚本注释一

    utils/split_data.sh ##再$data文件夹下,创建split{num_split}文件夹,再split×里面创建所有的数字文件夹#后面基本上是把$data文件夹下的各个文件都进行s ...

  9. MySQL 字符集utf8和utf-8的关系

    目录 什么是字符集(character set) 校对规则(collation) ASCII码 Unicode国际化支持 UTF-8 utf8 utf8与utf8mb4的关系 超集 字符集设置 什么是 ...

  10. Maven - 实例-1-手工创建Maven项目

    1- 根据包结构创建maven项目目录 TestMaven - src - src/main/java/anliven/testmaven01/HelloMaven.java - src/test/j ...