就着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. [HAOI2008]圆上的整点（数论）

    题目的所求可以转化为: \(y^2=r^2-x^2\)(其中r,x,y均为整数) 即\(y^2=(r-x)(r+x)\)(其中\(r,x,y\)均为整数) 不妨设\((r-x)=d*u\)------ ...

  2. jpa 原生查询createNativeQuery里面有冒号保留字关键字的问题

    用\\:替换. 比如: String sql = "select location.ToString() a,version,location.STDistance(geometry\\:\ ...

  3. python之设计模式

    一.简介 设计模式的定义:为了解决面向对象系统中重要和重复的设计封装在一起的一种代码实现框架,可以使得代码更加易于扩展和调用 四个基本要素:模式名称,问题,解决方案,效果 六大原则: 1.开闭原则:一 ...

  4. Ubuntu下使用sublime text进行py开发

    放弃了,半天弄不出一个方便的开放环境,还是现成的iDE方便 下载方法 https://www.sublimetext.com/docs/3/linux_repositories.html 首先安装Pa ...

  5. Codeforces Round #529 (Div. 3) F.Make It Connected

    传送门 题意: 有 n 个顶点,每个顶点有个花费 a[ i ],连接顶点 u,v 需要花费 a[v]+a[u]的代价. 有 m 个特殊边,每条边有三个参数 u,v,w 代表的意思是连接 u,v 的花费 ...

  6. Struts2上传文件出错

    出现错误: Error setting expression 'myFile' with value '[Ljava.lang.String;@47fb02e8' 解决方法: 这是由于没有设置 < ...

  7. okhttp 内网可以有，但外网访问数据返不回来，代码一样

    :1.问题点在于 下图红框里写成 text/html了,需要改成application/json,造成的问题有:unexpected end of stream  这个是406错误:加上日志之后okh ...

  8. 函数,参数数组params与数组参数,结构函数

    1.函数 static 返回值类型 函数名(形参1,形参2,...){        函数体;        return 返回值; } 无返回值,则static void 函数名(){ } stat ...

  9. （注意输入格式）bistuoj（旧）1237 成绩统计

    成绩统计 Time Limit(Common/Java):1000MS/3000MS          Memory Limit:65536KByteTotal Submit:88          ...

  10. （map string）Crazy Search hdu1381

    Crazy Search Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...