Skip to content

Nat-Lab/natoClock

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

natoClock

一個大大的,百進制的時鐘。

用法:引入 assets/js/natoClock.js

<script src="assets/js/natoClock.js"></script>

創建一個 canvas:

<canvas id="display"></canvas>

創建一個 natoClock 實例,就會在畫布內開始繪製時鐘:

var nc = new NatoClock(document.getElementById('display'));

NatoClock 構造器接受兩個參數,第一個是 canvas 的元素,第二個是配置,配置是可選的,不提供配置會讓 NatoClock 以默認方式繪圖:

var cfg = {
  targets: [
    'min', 'hrs', 'day', 'week', 'mon', 'yrs'
  ], // 要繪製的目標,這裡已經全部列出。
  canvas: { // 畫布配置。
    width: innerWidth, // 寬。
    height: innerHeight, // 高。
    background: '#333', // 背景。
  },
  bars: { // 進度條配置。
    outerRadius: 275, // 最外圈半徑。
    width: 30, // 寬度。
    margin: 5, // 邊距。
    percentage: true, // 顯示百分比?
    label: true, // 顯示標籤?
    bounces: true, // 回彈?
    acceleration: .05, // 回彈加速度。
    colors: { // 進度條顏色,若要讓全部項目顯示為一個顏色,可以使用 color 屬性代替 colors 對象。
      min: '#F25F5C',
      hrs: '#FF9B66',
      day: '#FFE066',
      week: '#70C1B3',
      mon: '#158CAF',
      yrs: '#7C6FDE'
    }
  },
  fonts: { // 字體配置。
    status: 'nunitobold', // 百分比字體。
    label: 'Helvetica Neue', // 標籤字體。
    colors: { // 字體顏色。
      status: '#333', // 百分比。
      label: 'rgba(255, 255, 255, 0.5)' // 標籤。
    }
  },
  render: { // 渲染配置。
    showFps: true, // 顯示 FPS?
    maxFps: 45, // 最大 FPS。
    dpiScale: 1.5 // DPI 倍數,用於 HIDPI 支持。
  }
};

var nc = new NatoClock(document.getElementById('display'), cfg);

要暫停繪製,使用:nc.stop();,要清空畫布並停止繪製,使用nc.destroy();

妳亦可以在 jQuery 或者 AngularJS 中使用 NatoClock:

jQuery:

$('#display').NatoClock(cfg); // cfg 是配置對象,同上文。

AngularJS:

<div ng-app="app">
  <nato-clock nc-cfg="{ ... // 配置對象。 }"></nato-clock>
</div>
<script>
angular.module('app', ['NatoClock']);
</script>

致谢

@ljyloo:寫出了回彈的代碼。

About

A base-100 clock widget.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published