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

查看效果:
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. 启用hyper-v后无法卸载vmware

    机器上启用了hyper-v,想卸载vmware,报错了: Error: This product may not be installed on a computer that has Microso ...

  2. 详解Python的作用域和命名空间

    最近在学习Python,不得不说,Python真的是一门很好用的语言.但是学习的过程中关于变量作用域(scope)的命名空间(namespace)的问题真的把我给搞懵了.在查阅了相关资料之后,觉得自己 ...

  3. vue 路由(1)

    路由的使用  (5步) 1.首先安装路由  npm install  vue-router2.引入 vue-router import VueRouter from 'vue-router' 3.使用 ...

  4. CString与string、char*的区别和转换

    转自:http://blog.csdn.net/luoweifu/article/details/20232379 我们在C++的开发中经常会碰到string.char*以及CString,这三种都表 ...

  5. 说一说js中的闭包

    不说官方给的定义,感觉自己刚开始看也不是很理解. 闭包 : 其实就是 该函数能使用函数外定义的变量. 为什么要使用闭包? 首先来说一下局部变量和全局变量的危害: 全局变量容易全局污染,局部变量又无法共 ...

  6. ffmpeg使用示例

    /* 视频格式转换 ffmpeg -i "F:\Test\1.mp4" -y -vcodec copy -acodec copy "F:\Test\11.avi" ...

  7. 用几句话说一说CMake add_dependencies & target_link_libraries的使用区别

    简单说一说前两天学习使用CMake解决链接问题时遇到的一个问题. 对于编译时遇到的依赖问题,很多时候我们只需要一句target_link_libraries就可以搞定. 但是CMake还有另外一个co ...

  8. 【SoftwareTesting】Homework3

    (a) (b) 数组越界问题 (c) n=0 (d) 点覆盖:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16] 边覆盖:[(1,2),(2,3),(3,4),(4,5) ...

  9. java 接口1

    接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并不是类,编写接口 ...

  10. java关于redis的快速配置

    1.关于Jedis安装配置很简单,我主要写一个,能够快速使用redis的工具类,首先导入依赖, 就一个 jedis 最好选用老一点版本 <!-- https://mvnrepository.co ...