这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的.

查看效果:
http://hovertree.com/texiao/html5/48/

推荐其他时钟:
http://hovertree.com/h/bjaf/o0yqj1ly.htm
http://hovertree.com/h/bjaf/hoverclock.htm

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>HTML5 Canvas爱心时钟代码 - 何问起</title>

</head>

<body>

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

<script type="text/javascript" src="http://hovertree.com/texiao/html5/48/js/digit.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/html5/48/js/app.js"></script>

<div style="text-align:center;margin-top:50px; font:normal 14px/24px 'MicroSoft YaHei';">

    <h2>HTML5 Canvas爱心时钟</h2>

<p>来源：<a href="http://hovertree.com/h/bjag/oppeym4s.htm" target="_blank">何问起</a></p>

</div>

</body>

</html>

转自:http://hovertree.com/h/bjag/oppeym4s.htm

更多特效:http://www.cnblogs.com/jihua/p/webfront.html

HTML5 Canvas爱心时钟代码的更多相关文章

  1. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  2. html5 canvas手写字代码(兼容手机端)

    html5 canvas手写字代码(兼容手机端) <pre><!DOCTYPE html><html><head> <title>画板实验& ...

  3. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  4. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  5. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  6. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

  7. html5 canvas js(时钟)

    <!doctype html> <html> <head> <title>canvas</title> </head> < ...

  8. html5 canvas简易时钟

    <canvas id='clock' width=500 height=500> 您的浏览器需要升级 </canvas> <script type="text/ ...

  9. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

随机推荐

  1. python2.x 与 python3.x的不同

    python2.x 与 python3.x 的区别: 1. python2.x 的源码编码不规范,源码重复较多:python3.x 的源码编码规范,清晰.优美.简单 2. python2.x的默认字符 ...

  2. 利用content为伊特元素追加三个小点

    案例代码: <span class="seven"></span> <style type="text/css"> .sev ...

  3. 【技巧】easyUI datagrid在隐藏时加载，显示时无法加载出界面

    注意在显示时调用再调用一次resize就可以显示出来 $("#"+datagridId).datagrid("resize");

  4. sqlserver数据库方面的排序四大王

    --1. row_number 用法 这个函数的功能是为查询出来的每一行记录生成一个序号select row_number() over(order by stuid) as row_number,* ...

  5. log日志文件

    单文件写 根据日志的等级是否写入,下面的一个例子就是等级为10,大于等于等级10的记录,小于的话就不记录,在创建之前先进行基本的日志格式配置 import logging logging.basicC ...

  6. session和cookie的区别是什么，他们都是什么.

    Session是存储在服务器端的,Cookie是存储在客户端的. Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息.如何识别特定的客户呢?cookie就可以做到.每次HTTP请求时, ...

  7. Exception: 'dlib.mmod_rectangle' object has no attribute 'right' - 例外：'dlib.mmod_rectangle'对象没有属性'right'

    I'm using dlib for face detection and getting this error Exception: 'dlib.mmod_rectangle' object has ...

  8. 基于MAVEN使用IDEA创建dubbo入门项目图文教程

    花了很长时间没有找到一个很详细的图文教程来学习dubbo入门框架,故记录下来. 一: 项目工程目录 简单介绍项目目录结构: 二: 创建父工程 具体操作步骤: 1,打开IDEA,按下面步骤来 File- ...

  9. 考研计算机复试笔试（数据结构/C语言简答题篇）

    1.比较顺序存储结构和链式存储结构的优缺点,什么情况下链表比顺序表好? 顺序存储时相邻元素的存储单元的地址也相连,可以随机存取.优点是存储密度大,空间利用率高:缺点是插入或删除时不方便. 链式存储时相 ...

  10. python1-集合、函数-（全局变量与局部变量）

    集合 # s=set('hello')# print(s)## s=set(['alex','alex','sb'])# print(s) # s={1,2,3,4,5,6} #添加# s.add(' ...