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

查看效果:
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. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  2. IPFS扫盲

    第二届深圳区块链技术与应用大会暨展览会,深圳区块链存储与IPFS技术应用大会暨展览会于2019年4月9日在深圳会展中心6号馆举行.那么这个IPFS是什么?和区块链有什么关系?有什么用?又怎么用呢?接下 ...

  3. VNPY - windows 安装踩坑记录

    twisted requires PyHamcrest>=, which is not ins grin requires argparse>=1.1, which is not inst ...

  4. Java 中的按值传递

    Java 中只有按值传递 "Java 中只有按值传递",初看到这几个字有点不敢相信,无数次通过函数改变过对象,无数次跟同事说 Java 在传对象的时候是按引用传递.后来细细想想,之 ...

  5. PDF 补丁丁 0.6.0.3369 版发布（修复保存文件时文件名替代符失效的问题）

    新的测试版修复之前测试版本在保存文件时文件名替代符失效的问题

  6. As The End of The Year Approaches,The Weighted Blanket Season Begins

    Weight blankets are well known for anxiety, insomnia, depression and so on. It is physical therapy, ...

  7. 初次接触Java

    今天初次接触Eclipse,学着用他来建立java工程,话不多说,来看看今天的成果! 熟悉自己手中的开发工具,热热身 刚上手别慌,有问题找度娘 刚刚拿到这个软件的安装包我是一脸懵逼的,因为是从官网下载 ...

  8. 漫谈hashcode

    概要 对于hashcode,相信很多朋友都不陌生,应为我们很多时候都需要用到这个,比如hashMap中就用到了,根据key的hash值来决定value存放的位置,之后来取得时候直接到指定的位置上那就行 ...

  9. Apache代理转发http到https

    site.conf ProxyPass /maps https://maps.googleapis.com/maps LoadModule proxy_module modules/mod_proxy ...

  10. ps文件解析(纯c解析代码)

    参考链接:1. PS流的格式和解析总结 http://www.cnblogs.com/lihaiping/p/4181607.html  2. TS科普5 PES包解析 https://blog.cs ...