就着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. [NOI2018]你的名字(后缀自动机+线段树)

    题目描述 小A 被选为了ION2018 的出题人,他精心准备了一道质量十分高的题目,且已经把除了题目命名以外的工作都做好了. 由于ION 已经举办了很多届,所以在题目命名上也是有规定的,ION 命题手 ...

  2. 【STM32】PWM DAC基本原理（实验：PWM实现DAC）

    虽然STM32F103ZET6具有内部DAC,但是也仅仅只有两条DAC通道,并且STM32还有其他的很多型号是没有DAC的.通常情况下,采用专用的D/A芯片来实现,但是这样就会带来成本的增加. 不过S ...

  3. pycharm安装TensorFlow

    一.首先说下我在安装TensorFlow的过程中遇到的坑: 1.python的版本是3.5的版本,因为TensorFlow好像只支持到3.5现在.然后python需要安装64位的安装包,如果安装的是3 ...

  4. Apache Beam实战指南 | 手把手教你玩转KafkaIO与Flink

    https://mp.weixin.qq.com/s?__biz=MzU1NDA4NjU2MA==&mid=2247492538&idx=2&sn=9a2bd9fe2d7fd6 ...

  5. MacBook上使用ssh localhost被拒绝

    最开始以为没有装sshd呢,实际上不是.又查了些方法,有些人居然把Linux上访问失败的方法直接照搬,让我建立公私钥.都没有成功.最后找到了解决方法,原来是由于苹果的安全限制,限制了这个功能. sud ...

  6. Vue中data返回对象和返回值的区别

    速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...

  7. bcftools将vcf生成bgzip和index格式

    利用bcftools软件将vcf格式生成gz格式和index格式,需要用到“-Oz”和“index”命令,具体如下: /bcftools-1.8/bin/bcftools view ExAC.vcf ...

  8. 斯坦福大学公开课机器学习：advice for applying machine learning - deciding what to try next（设计机器学习系统时，怎样确定最适合、最正确的方法）

    假如我们在开发一个机器学习系统,想试着改进一个机器学习系统的性能,我们应该如何决定接下来应该选择哪条道路? 为了解释这一问题,以预测房价的学习例子.假如我们已经得到学习参数以后,要将我们的假设函数放到 ...

  9. terminate called without an active exception异常

    在gcc4.4下,采用回调机制写了一个类似std::thread的线程类. 但是使用时却发生了核心已转移的错误. main函数调用的代码大致是 int main(int argc, char *arg ...

  10. Luogu P3975 [TJOI2015]弦论

    题目链接 \(Click\) \(Here\) 题目大意: 重复子串不算的第\(k\)大子串 重复子串计入的第\(k\)大子串 写法:后缀自动机. 和\(OI\) \(Wiki\)上介绍的写法不太一样 ...