用hoverclock插件实现HTML5时钟

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用hoverclock插件实现HTML5时钟</title>
    <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" />
    <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div style="width:500px;height:500px;color:red;text-align:right" id="hoverclock"></div>
     <script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script>

    <script>
        $("#hoverclock").hoverclock({
            "h_width": 500,
            "h_height": 500,
            //"h_hourNumSize": "80",
            // "h_hourNumRadii": "200",
            // "h_hourNumShow": false,
            // "h_minuteNumShow":false,
            "h_hourNumColor": "deeppink",
            "h_backColor": "yellow",
            // "h_borderColor": "gold",
            //"h_frontColor":"red",
            "h_linkText": "HoverClock"
        });
    </script>

</body>
</html>
时间: 2024-08-06 07:51:29

用hoverclock插件实现HTML5时钟的相关文章

14款超时尚的HTML5时钟动画

时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助. 1.可爱的CSS3圆盘时钟动画 今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步. 在线演示 源码下载 2.HTML5 SVG圆盘时钟动画 5种时钟样式 今天我

14款形态各异的超时尚HTML5时钟动画

14款超时尚的HTML5时钟动画(附源码)   时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助. 1.可爱的CSS3圆盘时钟动画 在线演示:http://www.html5tricks.com/demo/css3-circle-clock/index.html 源码下载:http:

轻松实现HTML5时钟(分享下自己对canvas的理解,原来没你想像的那么难哦)

Hey,guys! 让我们一起用HTML5实现一下简易时钟吧! 接触canvas时, 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的 钢笔工具 是一样的.所以,如果你对 PS里的 钢笔工具 运用自如的话,恭喜你,canvas你将很快上手~~ 说下对HTML5中canvas的理解,canvas翻译成中文就是画布,顾名思义,canvas当然是用来作画的啦~~ 作画嘛,其实现的思想 与 photoshop 基本上是一样的~~,只不过photoshop可以用可

纯Shading Language绘制HTML5时钟

今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS的实现方式,例如 http://www.css-tricks.com/examples/CSS3Clock/:第二种采用SVG的实现方式,例如 http://www.css-tricks.com/examples/CSS3Clock/:第三种采用Cavnas的2D绘制方式,如HT for Web中<

HTML5时钟

<!DOCTYPE html>   <html>   <head>   <meta charset="UTF-8">   <title>HTML5仿Apple Watch时钟动画DEMO演示</title>   <link rel="stylesheet" href="files/style.css" media="screen" type=&quo

让人心动的jQuery插件和HTML5动画

1.jQuery/CSS3带表单的下拉菜单 今天要分享一款基于jQuery和CSS3的下拉菜单,这款jQuery下拉菜单非常特别,我们直接可以在下拉菜单中填写联系表单.登录表单.而且整个下拉菜单的外观是木质视觉效果的,所以菜单显得非常端庄大气,这款jQuery下拉菜单可以在你的个人网站中使用. 在线演示 源码下载 2.HTML5 Canvas Google电吉他 支持键盘弹奏 这是当年Google为纪念莱斯·保罗而设计的Google首页Logo,它利用HTML5技术实现了电吉他弹奏效果.这款HT

混合开发-利用Cordova插件实现HTML5 与 原生代码的连接

主要利用的就是通过Cordova这个东西, 进行HTML5 与 iOS断值得传递 列子:把HTML5 获取的日期同步到iOS系统的日历中去 1. 原生代码:.h.m 提供一个接口文件 主要代码: - (BOOL)saveEventToCalender:(NSString *)title content:(NSString *)contentTitle year:(NSString *)year date:(NSString *)date time:(NSString *)time { // 定义

纯html5打造的时钟

1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 window.onload = function(){ 8 var oC = document.getElementById('ch1'); 9 var oGC = oC.ge

HTML5仿Apple Watch时钟动画

该款HTML5时钟是仿Apple Watch界面模拟出来的,可以根据本地时间实时更新指针数据,其华丽的界面却有苹果的风格. 下载地址:http://www.devstore.cn/code/info/266.html 运行截图: 版权声明:本文为博主原创文章,未经博主允许不得转载.