<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<script>
$(function () {

/**
* Get the current time
*/
function getNow () {
var now = new Date();

return {
hours: now.getHours() + now.getMinutes() / 60,
minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
seconds: now.getSeconds() * 12 / 60
};
};

/**
* Pad numbers
*/
function pad(number, length) {
// Create an array of the remaining length +1 and join it with 0's
return new Array((length || 2) + 1 - String(number).length).join(0) + number;
}

var now = getNow();

// Create the chart
$('#container').highcharts({

chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: 200
},

credits: {
enabled: false
},

title: {
text: ' '
},

pane: {
background: [{
// default background
}, {
// reflex for supported browsers
backgroundColor: Highcharts.svg ? {
radialGradient: {
cx: 0.5,
cy: -0.4,
r: 1.9
},
stops: [
[0.5, 'rgba(255, 255, 255, 0.2)'],
[0.5, 'rgba(200, 200, 200, 0.2)']
]
} : null
}]
},

yAxis: {
labels: {
distance: -20
},
min: 0,
max: 12,
lineWidth: 0,
showFirstLabel: false,

minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 5,
minorTickPosition: 'inside',
minorGridLineWidth: 0,
minorTickColor: '#666',

tickInterval: 1,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
title: {
text: 'Powered by<br/>Highcharts',
style: {
color: '#BBB',
fontWeight: 'normal',
fontSize: '8px',
lineHeight: '10px'
},
y: 10
}
},

tooltip: {
formatter: function () {
return this.series.chart.tooltipText;
}
},

series: [{
data: [{
id: 'hour',
y: now.hours,
dial: {
radius: '60%',
baseWidth: 4,
baseLength: '95%',
rearLength: 0
}
}, {
id: 'minute',
y: now.minutes,
dial: {
baseLength: '95%',
rearLength: 0
}
}, {
id: 'second',
y: now.seconds,
dial: {
radius: '100%',
baseWidth: 1,
rearLength: '20%'
}
}],
animation: false,
dataLabels: {
enabled: false
}
}]
},

// Move
function (chart) {
setInterval(function () {
var hour = chart.get('hour'),
minute = chart.get('minute'),
second = chart.get('second'),
now = getNow(),
// run animation unless we're wrapping around from 59 to 0
animation = now.seconds == 0 ?
false :
{
easing: 'easeOutElastic'
};

// Cache the tooltip text
chart.tooltipText =
pad(Math.floor(now.hours), 2) + ':' +
pad(Math.floor(now.minutes * 5), 2) + ':' +
pad(now.seconds * 5, 2);

hour.update(now.hours, true, animation);
minute.update(now.minutes, true, animation);
second.update(now.seconds, true, animation);

}, 1000);

});
});

// Extend jQuery with some easing (copied from jQuery UI)
$.extend($.easing, {
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>

实现的时钟（time）的更多相关文章

  1. [转] STM32各种时钟的区别

    [原创]:http://m.oschina.net/blog/129357 我在原创的基础又从另一位博主处引用了一些内容. 时钟系统是处理器的核心,所以在学习STM32所有外设之前,认真学习时钟系统是 ...

  2. [转载]:STM32为什么必须先配置时钟再配置GPIO

    转载来源 :http://blog.csdn.net/fushiqianxun/article/details/7926442 [原创]:我来添两句,就是很多同学(包括我)之前搞低端单片机,到了stm ...

  3. 理解Java对象的交互：时钟显示程序

    实现: 结构: 对象:时钟  - 对象:小时                 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...

  4. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  5. 浅谈时钟的生成(js手写代码)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  6. Linux(Unix)时钟同步ntpd服务配置方法

    http://xu20cn.blog.51cto.com/274020/69689 假定时钟服务器IP地址为:192.168.0.1 服务器端配置: 1:置/etc/ntp.conf文件内容为: se ...

  7. S5PV210_时钟系统

    1.S5PV210的时钟获得:外部晶振+内部时钟发生器+内部PLL产生高频时钟+内部分频器分频 S5PV210外部有4个W晶振接口,可以根据需要来决定在哪里接晶振.接了晶振之后上电相应的模块就能产生振 ...

  8. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  9. AM335x kernel4.4.12 LCD 时钟翻转设置记录

    TI AM335x kernel 4.4.12 LCD display 时钟翻转记录 因为公司硬件上已经确定LCD 转LVDS 转换芯片上确认以上升沿时钟为基准,所以只能在软件上调整相关东西. 入口在 ...

  10. CSS3简易表盘时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. CentOS 7 内核更新后删除旧内核

    0.当前 # uname -sr Linux -.el7.x86_64 1.搜索查询 # rpm -q kernel kernel--.el7.x86_64 kernel--.el7.x86_64 k ...

  2. RubyMine(基于IntelliJ IDEA的Ruby集成开发环境)快捷键

    常用快捷键: 一级必会Ctrl+Alt+G:弹出GenerateCtrl+Alt+L:格式化代码Alt+F1:切换视图(Project, Structure, etc.).Alt+F2:弹出预览窗口, ...

  3. ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet

    实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...

  4. Android使用ZXing生成带图片的二维码

    效果图如下: 制作过程很简单的就是在原始的二维码图片上添加一个logn图标,代码的注释写得很详细,也就不给大家啰嗦了 package com.example.day44_02_qrcodewithlo ...

  5. 开发者经验谈：如何一天时间搞定iOS游戏开发？

    开发者经验谈:如何一天时间搞定iOS游戏开发? 在一天时间里将完成iPhone游戏开发由梦想变为现实? 本文作者给出了从创意转变成现实的详细答案.使用苹果原生游戏引擎SpriteKit,遵循一定的原则 ...

  6. 关于设置oracle中系统编号SYSID自动编号的问题；

    http://liye9801.blog.163.com/blog/static/601970320086210039591/ 如何在oracle里设置自动编号列 2008-07-21 12:00:3 ...

  7. form文件上传，防止页面刷新

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传 ...

  8. 夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

    按照上节课程里面的介绍,我们可以先将刚才在signatrue.php里获取到的信息填写进jssdk.htm模版文件里填写各个权限的参数 jssdk.htm代码如下: <!DOCTYPE html ...

  9. DIV怎样能够垂直居中

    这里只说固定宽高的情况: 1.Top:50%; 2.margin-top:-(height/2); 就这样. 不过很好奇有没有v-align之类的属性可以直接实现.

  10. Android中ListView放入PopupWindow产生问题解决

    今天在做项目时候发现将ListView放入PopupWindow产生问题,ListView放入PopupWindow后 对PopupWindow设置了setFocusable(true)这时候其他的控 ...