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

查看效果:
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. [转]java 关于httpclient 请求https （如何绕过证书验证）

    原文:http://www.blogjava.net/hector/archive/2012/10/23/390073.html 第一种方法,适用于httpclient4.X 里边有get和post两 ...

  2. kafka 心跳和 reblance

    kafka 的心跳是 kafka consumer 和 broker 之间的健康检查,只有当 broker coordinator 正常时,consumer 才会发送心跳. consumer 和 re ...

  3. Python3+Appium安装使用教程

    一.安装 我们知道selenium是桌面浏览器自动化操作工具(Web Browser Automation) appium是继承selenium自动化思想旨在使手机app操作也能自动化的工具(Mobi ...

  4. Nginx 作用

    django 请求的生命周期 Nginx 的作用: 浏览器 --- nginx(反向代理器)-- uwsgi --- django项目nginx : 负载均衡, 将任务分发给不同的uwsgi 动静分离 ...

  5. learning websocket protocol

    websocket的产生背景: 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现.这种机制对于信息变化不是特别频繁 ...

  6. Android最火热修复实战

    Sophix官网文档地址 https://help.aliyun.com/document_detail/53240.html 快速接入 项目build.gradle的repositories节点下添 ...

  7. AJax提交表单数据到后台springmvc接收

    第一种方法直接用serialize()方法 function insert(){ $.ajax({ type:"POST", url:"${pageContext.req ...

  8. MySQL数据库--思维导图

    MySQL数据库--思维导图

  9. python 在内网windows环境下pip三方包

    我没用过Linux环境. 一般情况下,内网安装三方包,只需要在pypi找到对应python版本(2.7,3.6,...),系统位数(32位,64位)的whl包,cmd命令行cd进入相关目录,pip i ...

  10. lsof 命令用法详解

    lsof 命令用法详解 作用 用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所 ...