就着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. NOIP2017题解

    T1小凯的疑惑 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中, ...

  2. Jupyter-Notebook服务器自定义密码

    往期回顾 Anaconda安装:https://www.cnblogs.com/dotnetcrazy/p/9158715.html 基本知识导航篇:https://www.cnblogs.com/d ...

  3. docker学习5--docker数据卷(volume)

    https://blog.csdn.net/dream_broken/article/details/52314993 1.什么是数据卷volume 为了了解什么是Docker Volume,首先我们 ...

  4. poj1958 strange towers of hanoi

    说是递推,其实也算是个DP吧. 就是4塔的汉诺塔问题. 考虑三塔:先从a挪n-1个到b,把最大的挪到c,然后再把n-1个从b挪到c,所以是 f[i] = 2 * f[i-1] + 1; 那么4塔类似: ...

  5. HEOI2013 Segment

    传说中的“李超树”. 大意:给你若干线段,试求横坐标x上的最上方一条线段的编号.无则输出零. 解:用线段树维护. 插入的时候保存自己这个区间上可能成为最大值的线段,被抛弃的则看情况下放. 查询时从最底 ...

  6. HDU - 5521 Meeting (Dijkstra)

    思路: 看了好久才看懂题意,文中给了n个点,有m个集合,每个集合有s个点,集合内的每两个点之间有一个权值为t的边,现在有两个人,要从1号点,和n号点,走到同一个顶点,问最少花费以及花费最少的点. 那就 ...

  7. POJ 2823 Sliding Window (单调队列）

    单调队列 加了读入挂比不加更慢.... 而且这份代码要交c++ 有大神G++跑了700ms..... orzorzorz #include<iostream> #include<cs ...

  8. MVC知识点汇总

    一,MVC创建控制器,视图 1新建 ASP.NET MVC web应用程序项目,在Controllers文件夹下创建控制器,MVC 5 控制器,然后打开控制器,在所对应的控制器中会存在一个Action ...

  9. ArrayList、LinkList、Vector的区别

    ArrayList.LinkedList和Vector均实现了List接口,均为可伸缩数组(均为可动态改变长度的数组).它们是有序的集合,并且其中的元素允许重复. 从底层实现来看: (1)ArrayL ...

  10. 点赞功能与redis的相遇

    https://www.jianshu.com/p/2ab76d5bde71 或者 https://kikoroc.com/2016/06/07/dev-like-function-with-redi ...