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

查看效果:
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. A锚点实现，滚动页面内容改变tab选项

    Css: ul{margin:0;padding:0;list-style:none;} a{ text-decoration: none; outline:none; -webkit-tap-hig ...

  2. fflush 和 fsync 的区别

    int fflush(FILE *stream);If stream points to an output stream or an update stream in which the most ...

  3. Hugo + github 搭建个人博客

    前言 很早以前就有想法,搭建一个个人的博客.没有实现的原因:一方面个人的服务器不太安全掉线,欠费,维护起来麻烦,另一方面,文章编辑发布起来也不方便. 后来了解到 github 提供了博客的功能,也一直 ...

  4. WinHex18.4算法分析

    经过分析,注册码分为六个部分: Name: "xxx" Addr1: "yyy" Addr2: "zzz" 这三个字符不代表长度 Key1: ...

  5. 开源HUSTOJ

    hustoj -- 请一定认真看完本页再动手安装,以免无谓的折腾!====== 根据你选择的发行版不同,从下面三个脚本里选一个来用. <b>不要相信百度来的长篇大论的所谓教程,那些都是好几 ...

  6. day44-Celery异步分布式

    celery异步分布式Celery是一个python开发的异步分布式任务调度模块.Celery本身并不提供消息服务,使用第三方服务,也就是borker来传递任务,目前支持rebbimq,redis, ...

  7. JS的全局变量与局部变量及变量的提升

    遇到全局变量与局部变量的时候总是出一些或多或少的问题,于是专门花时间去认真研究了一下全局变量与局部变量. 这是在网上看到的一个关于全局变量与局部变量的代码,看了下作者的解析,自己也进行了研究. < ...

  8. leetcode python 042收集雨水

    '''给定n个非负整数表示每个条的宽度为1的高程图,计算下雨后能够捕获多少水.例如,鉴于[0,1,0,2,1,0,1,3,2,1,2,1],返回6.这个题要先算出盛满水后的高程图,减去前者就是雨水.盛 ...

  9. Java_jsp.jstl.Function函数标签库.记录

    JSTL Functions标签库 本书第12章的12.3节(定义和使用EL函数)介绍了EL函数的创建和使用方法.在JSTL Functions标签库中提供了一组常用的EL函数,主要用于处理字符串,在 ...

  10. python机器可读数据-XML

    XML XML是一门标记语言.也就是说,它具有包含格式化数据的文档结构. XML文档本质上只是格式特殊的数据文件. 在XML文件中有两个位置可以保存数据值:2个标签之间,标签的属性. 导入XML数据 ...