就着youtube上的教程用html和js做了个小时钟。

Code:

clock.html

//clock.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <canvas id="canvas" width="500" height="500">

    <script type="text/javascript" src="C:\Users\Administrator\Desktop\Clock\clock.js"></script>

  </canvas>

</body>

</html>

clock.js

//clock.js

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'lightblue';

ctx.lineWidth = 17;

ctx.lineCap = 'round';

ctx.shadowBlur = 15;

ctx.shadowColor = 'lightblue';

function degToRad(degree) {

  var factor = Math.PI/180;

  return degree*factor;

}

function renderTime() {

  var now = new Date();

  var today = now.toDateString();

  var time = now.toLocaleTimeString();

  var hours = now.getHours();

  var minutes = now.getMinutes();

  var seconds = now.getSeconds();

  var milliseconds = now.getMilliseconds();

  var newSeconds = seconds+(milliseconds/1000);

  //Background

  gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);

  gradient.addColorStop(0,'GREY');

  gradient.addColorStop(1,'BLACK');

  ctx.fillStyle = gradient;

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

  //Hours

  ctx.beginPath();

  ctx.arc(250, 250, 200, degToRad(270), degToRad(hours*15-90));

  ctx.stroke();

  //Minutes

  ctx.beginPath();

  ctx.arc(250, 250, 170, degToRad(270), degToRad(minutes*6-90));

  ctx.stroke();

  //Seconds

  ctx.beginPath();

  ctx.arc(250, 250, 140, degToRad(270), degToRad(newSeconds*6-90));

  ctx.stroke();

  //Date

  ctx.font = "25px Arial";

  ctx.fillStyle = 'lightblue';

  ctx.fillText(today, 175, 250);

  //Time

  ctx.font = "25px Arial";

  ctx.fillStyle = 'lightblue';

  ctx.fillText(time, 175, 280);

}

setInterval(renderTime, 40);

效果图：我配色是真的无能= - =

【小玩意】time-passing-by clock的更多相关文章

  1. JTAG Simplified

    JTAG Simplified So the other day, I explored the JTAG bus interface which is frequently found in CPL ...

  2. [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define ...

  3. [Angular 2] Passing Template Input Values to Reducers

    Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...

  4. Glitch-free clock switch

    With multi-frequency clocks being used in today’s devices, it's necessary to switch the source of a ...

  5. 修改Linux系统日期与时间date clock

    先设置日期 date -s 20080103 再设置时间 date -s 18:24:30 为了永久生效,需要将修改的时间写入CMOS. 查看CMOS的时间: #clock -r 将当前系统时间写到C ...

  6. 操作系统页面置换算法(opt,lru,fifo,clock)实现

    选择调出页面的算法就称为页面置换算法.好的页面置换算法应有较低的页面更换频率,也就是说,应将以后不会再访问或者以后较长时间内不会再访问的页面先调出. 常见的置换算法有以下四种(以下来自操作系统课本). ...

  7. Cesium应用篇：3控件（1）Clock

    创建 跟Clock相关的主要有Animation控件和Timeline控件,通常两者会放在一起使用. 在Cesium中,Viewer默认开启这两个控件,如果你想要不显示控件,可以在Viewer初始化中 ...

  8. 解决: DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and will raise ValueError in 0.19

    错误信息:C:\Python27\lib\site-packages\sklearn\utils\validation.py:395: DeprecationWarning: Passing 1d a ...

  9. Unity: Passing Constructor Parameters to Resolve

    In this tutorial we will go through of couple different ways of using custom constructor parameters ...

随机推荐

  1. [ZJOI2010]贪吃的老鼠(网络流+建图)

    题目描述 奶酪店里最近出现了m只老鼠!它们的目标就是把生产出来的所有奶酪都吃掉.奶酪店中一天会生产n块奶酪,其中第i块的大小为pi,会在第ri秒被生产出来,并且必须在第di秒之前将它吃掉.第j只老鼠吃 ...

  2. 解决关于confluence缓慢 字体乱码 宏乱码 编辑不能贴图等问题

    应用场景:Confluence软件不用多说,与Jira一样,都是atlassion的精品软件,不再介绍. 这里因为使用的是破解版的confluence,故遇见一些问题,只能百度谷歌自行解决,也在此记录 ...

  3. centos7安装Jenkins更改默认端口并配置Ldap服务器进行用户认证

    应用环境:Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作.   Jenkins官网:https://jenkins.io/ 测试环境:一台Centos ...

  4. js判断一个字符串是以某个字符串开头

    方法1: substr() 方法 if("123".substr(0, 2) == "12"){ console.log(true); } 方法2: subst ...

  5. Linux下Chrome/Chromium窗口边框有白线

    原因 窗口边框有白线是因为没有开启使用系统边框和标题栏 解决方法 勾选菜单-设置-外观-使用系统标题栏和边框 效果展示

  6. 牛客网暑期ACM多校训练营 第九场

    HPrefix Sum study from : https://blog.csdn.net/mitsuha_/article/details/81774727 k较小.分离x和k. 另外的可能:求a ...

  7. postman 测试套件collection

    测试套件collection就是为了跑一套case,整体的一套case,为了解决一个一个的case单独跑 1.点击小加号 2.填写套件的名字 3.右键增加folder,一个folder里面可以增加多个 ...

  8. 对C# .Net4.5异步机制测试（二）——加深印象

    public static void Main() { Console.WriteLine(Thread.CurrentThread.ManagedThreadId); In(); Console.W ...

  9. (数学) PTA 1005 继续(3n+1)猜想 （25 分)

    1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...

  10. Inception介绍（MySQL自动化运维工具）

    Inception介绍 GitHub:https://github.com/mysql-inception/inception 文档:https://mysql-inception.github.io ...