test clock
<script src="https://code.highcharts.com/highcharts.js"></script><!-- [et_pb_line_break_holder] --><script src="https://code.highcharts.com/highcharts-more.js"></script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Get the current time<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->function getNow() {<!-- [et_pb_line_break_holder] --> var now = new Date();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> return {<!-- [et_pb_line_break_holder] --> hours: now.getHours() + now.getMinutes() / 60,<!-- [et_pb_line_break_holder] --> minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,<!-- [et_pb_line_break_holder] --> seconds: now.getSeconds() * 12 / 60<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Pad numbers<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->function pad(number, length) {<!-- [et_pb_line_break_holder] --> // Create an array of the remaining length + 1 and join it with 0's<!-- [et_pb_line_break_holder] --> return new Array((length || 2) + 1 - String(number).length).join(0) + number;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var now = getNow();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Create the chart<!-- [et_pb_line_break_holder] -->Highcharts.chart('container', {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> chart: {<!-- [et_pb_line_break_holder] --> type: 'gauge',<!-- [et_pb_line_break_holder] --> plotBackgroundColor: null,<!-- [et_pb_line_break_holder] --> plotBackgroundImage: null,<!-- [et_pb_line_break_holder] --> plotBorderWidth: 0,<!-- [et_pb_line_break_holder] --> plotShadow: false,<!-- [et_pb_line_break_holder] --> height: 300<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> credits: {<!-- [et_pb_line_break_holder] --> enabled: false<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> title: {<!-- [et_pb_line_break_holder] --> text: ''<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> pane: {<!-- [et_pb_line_break_holder] --> background: [{<!-- [et_pb_line_break_holder] --> // default background<!-- [et_pb_line_break_holder] --> }, {<!-- [et_pb_line_break_holder] --> // reflex for supported browsers<!-- [et_pb_line_break_holder] --> backgroundColor: Highcharts.svg ? {<!-- [et_pb_line_break_holder] --> radialGradient: {<!-- [et_pb_line_break_holder] --> cx: 0.5,<!-- [et_pb_line_break_holder] --> cy: -0.4,<!-- [et_pb_line_break_holder] --> r: 3<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> stops: [<!-- [et_pb_line_break_holder] --> [0.5, 'rgba(255, 255, 255, 0.1)'],<!-- [et_pb_line_break_holder] --> [0.5, 'rgba(200, 200, 200, 0.1)']<!-- [et_pb_line_break_holder] --> ]<!-- [et_pb_line_break_holder] --> } : null<!-- [et_pb_line_break_holder] --> }]<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> yAxis: {<!-- [et_pb_line_break_holder] --> labels: {<!-- [et_pb_line_break_holder] --> distance: -20<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> min: 0,<!-- [et_pb_line_break_holder] --> max: 12,<!-- [et_pb_line_break_holder] --> lineWidth: 0,<!-- [et_pb_line_break_holder] --> showFirstLabel: false,<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> minorTickInterval: 'auto',<!-- [et_pb_line_break_holder] --> minorTickWidth: 1,<!-- [et_pb_line_break_holder] --> minorTickLength: 5,<!-- [et_pb_line_break_holder] --> minorTickPosition: 'inside',<!-- [et_pb_line_break_holder] --> minorGridLineWidth: 0,<!-- [et_pb_line_break_holder] --> minorTickColor: '#666',<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> tickInterval: 1,<!-- [et_pb_line_break_holder] --> tickWidth: 2,<!-- [et_pb_line_break_holder] --> tickPosition: 'inside',<!-- [et_pb_line_break_holder] --> tickLength: 10,<!-- [et_pb_line_break_holder] --> tickColor: '#666',<!-- [et_pb_line_break_holder] --> title: {<!-- [et_pb_line_break_holder] --> text: 'LEMONTREE <br>MASTERS IN ICT',<!-- [et_pb_line_break_holder] --> style: {<!-- [et_pb_line_break_holder] --> color: '#BBB',<!-- [et_pb_line_break_holder] --> fontWeight: 'normal',<!-- [et_pb_line_break_holder] --> fontSize: '10px',<!-- [et_pb_line_break_holder] --> lineHeight: '10px'<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> y: 10<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> tooltip: {<!-- [et_pb_line_break_holder] --> formatter: function() {<!-- [et_pb_line_break_holder] --> return this.series.chart.tooltipText;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> series: [{<!-- [et_pb_line_break_holder] --> data: [{<!-- [et_pb_line_break_holder] --> id: 'hour',<!-- [et_pb_line_break_holder] --> y: now.hours,<!-- [et_pb_line_break_holder] --> dial: {<!-- [et_pb_line_break_holder] --> radius: '60%',<!-- [et_pb_line_break_holder] --> baseWidth: 4,<!-- [et_pb_line_break_holder] --> baseLength: '95%',<!-- [et_pb_line_break_holder] --> rearLength: 0<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, {<!-- [et_pb_line_break_holder] --> id: 'minute',<!-- [et_pb_line_break_holder] --> y: now.minutes,<!-- [et_pb_line_break_holder] --> dial: {<!-- [et_pb_line_break_holder] --> baseLength: '95%',<!-- [et_pb_line_break_holder] --> rearLength: 0<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, {<!-- [et_pb_line_break_holder] --> id: 'second',<!-- [et_pb_line_break_holder] --> y: now.seconds,<!-- [et_pb_line_break_holder] --> dial: {<!-- [et_pb_line_break_holder] --> radius: '100%',<!-- [et_pb_line_break_holder] --> baseWidth: 1,<!-- [et_pb_line_break_holder] --> rearLength: '20%'<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }],<!-- [et_pb_line_break_holder] --> animation: false,<!-- [et_pb_line_break_holder] --> dataLabels: {<!-- [et_pb_line_break_holder] --> enabled: false<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }]<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Move<!-- [et_pb_line_break_holder] --> function(chart) {<!-- [et_pb_line_break_holder] --> setInterval(function() {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> now = getNow();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (chart.axes) { // not destroyed<!-- [et_pb_line_break_holder] --> var hour = chart.get('hour'),<!-- [et_pb_line_break_holder] --> minute = chart.get('minute'),<!-- [et_pb_line_break_holder] --> second = chart.get('second'),<!-- [et_pb_line_break_holder] --> // run animation unless we're wrapping around from 59 to 0<!-- [et_pb_line_break_holder] --> animation = now.seconds === 0 ?<!-- [et_pb_line_break_holder] --> false : {<!-- [et_pb_line_break_holder] --> easing: 'easeOutBounce'<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Cache the tooltip text<!-- [et_pb_line_break_holder] --> chart.tooltipText =<!-- [et_pb_line_break_holder] --> pad(Math.floor(now.hours), 2) + ':' +<!-- [et_pb_line_break_holder] --> pad(Math.floor(now.minutes * 5), 2) + ':' +<!-- [et_pb_line_break_holder] --> pad(now.seconds * 5, 2);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> hour.update(now.hours, true, animation);<!-- [et_pb_line_break_holder] --> minute.update(now.minutes, true, animation);<!-- [et_pb_line_break_holder] --> second.update(now.seconds, true, animation);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> }, 1000);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Easing function from https://github.com/danro/easing-js/blob/master/easing.js<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Math.easeOutBounce = function(pos) {<!-- [et_pb_line_break_holder] --> if ((pos) < (1 / 2.75)) {<!-- [et_pb_line_break_holder] --> return (7.5625 * pos * pos);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if (pos < (2 / 2.75)) {<!-- [et_pb_line_break_holder] --> return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if (pos < (2.5 / 2.75)) {<!-- [et_pb_line_break_holder] --> return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] -->
