html数字时钟免费代码,html5 canvas js(数字时钟)实例代码
您的浏览器太古董了,升级吧!
var clock = document.getElementById("clock");
var cxt = clock.getContext("2d");
//显示数字时钟
function showTime(m, n) {
cxt.clearRect(0, 0, 500, 500);
var now = new Date;
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var msec = now.getMilliseconds();
hour = hour >= 10 ? hour : "0" + hour;
min = min >= 10 ? min : "0" + min;
sec = sec >= 10 ? sec : "0" + sec;
msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;
bdigital(m, n, hour);
bdigital(m + 160, n, min);
bdigital(m + 320, n, sec);
//tdigital(m + 480, n, msec);
//三位数的显示
function tdigital(x, y, num) {
var ge = num % 10;
var shi = (parseInt(num / 10)) % 10;
var bai = parseInt((parseInt(num / 10)) / 10) % 10;
digital(x, y, bai);
digital(x + 70, y, shi);
digital(x + 140, y, ge);
}
//两位数的显示
function bdigital(x, y, num) {
var ge = num % 10;
var shi = (parseInt(num / 10)) % 10;
digital(x, y, shi);
digital(x + 70, y, ge);
}
//画:
//小时与分钟之间
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 100, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.stroke();
//分钟与秒之间
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.stroke();
//秒与毫秒之间一个.
// cxt.lineWidth = 5;
// cxt.strokeStyle = "#000";
// cxt.fillStyle = "#000";
// cxt.beginPath();
// cxt.arc(m + 460, n + 100, 3, 0, 360, false);
// cxt.fill();
// cxt.closePath();
// cxt.stroke();
}
//显示一位数字
function digital(x, y, num) {
//设置风格
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
//a
function a() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.stroke();
}
//b
function b() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.stroke();
}
//c
function c() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.stroke();
}
//d
function d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.stroke();
}
//e
function e() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.stroke();
}
//f
function f() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 55);
cxt.lineTo(x - 5, y + 5);
cxt.closePath();
cxt.stroke();
}
//g
function g() {
cxt.beginPath();
cxt.moveTo(x, y + 57.5);
cxt.lineTo(x + 50, y + 57.5);
cxt.closePath();
cxt.stroke();
}
//0
function zero() {
a(); b(); c(); d(); e(); f();
}
//1
function one() {
b(); c();
}
//2
function two() {
a(); b(); d(); e(); g();
}
//3
function three() {
a(); b(); c(); d(); g();
}
//4
function four() {
b(); c(); f(); g();
}
//5
function five() {
a(); c(); d(); f(); g();
}
//6
function six() {
a(); c(); d(); e(); f(); g();
}
//7
function seven() {
a(); b(); c();
}
//8
function eight() {
a(); b(); c(); d(); e(); f(); g();
}
//9
function nine() {
a(); b(); c(); d(); f(); g();
}
//数字n
function number(n) {
switch (n) {
case 0: zero(); break;
case 1: one(); break;
case 2: two(); break;
case 3: three(); break;
case 4: four(); break;
case 5: five(); break;
case 6: six(); break;
case 7: seven(); break;
case 8: eight(); break;
case 9: nine(); break;
}
}
number(num);
}
showTime(1, 45);
setInterval("showTime(1,45)", 1000);
html数字时钟免费代码,html5 canvas js(数字时钟)实例代码相关推荐
- html转盘游戏代码,html5 canvas大转盘抽奖提示代码
特效描述:html5 canvas 大转盘抽奖提示.只用canvas做出的转盘及指针,各奖项和分区颜色可随意设置. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 抱歉!浏览器不支持. ...
- html 画圆点代码,HTML5 Canvas绘制圆点虚线实例
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
- 数字时钟html5 js,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
- php首页下雪源码代码,HTML5实现下雪效果的实例代码分享
下雪实例 知识点: 绘画函数 效果: 源码: ------------------------------ 下雪 *{padding:0;margin:0} html{overflow:hidden} ...
- html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
- html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 原文:https://www.cnblogs.com/guozefeng/p/3719915.html 1. 项目要求需要用js实现photoshop中 ...
- html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示 下载资源: 13 次 下载资源 下载积分: 20 积分 js代码 window.onload = ...
- html5.js百度网盘,HTML5 Canvas+js仿百度网盘扫描文件过程加载动画
HTML5 Canvas+js仿百度网盘扫描文件过程加载动画 这是一款简单的HTML5 Canvas+js仿百度网盘扫描文件过程加载动画效果,网盘文件扫描百分比加载动画特效. var w=docume ...
最新文章
- opencv-mediapipe手部关键点识别
- Spring.net使用说明
- php函数细节_php strip_tags()函数使用注意细节
- Oracle 优化器
- oracle中rownum和row_number()
- ubuntu+2080ti系统用anaconda 安装tensorflow
- Python实现Newton和lagrange插值
- CVPR 2018 《Towards High Performance Video Object Detection》论文笔记
- codecomb 2091【路径数量】
- MySQL【案例讲解】分组查询
- [LintCode] Minimum Size Subarray Sum 最小子数组和的大小
- 在 Excel 中如何使用宏示例删除列表中的重复项
- 防范攻击 加强管控 - 数据库安全的16条军规
- [转]编译器选项(摘自MSDN)及VC项目配置基础
- 算法 -- 四种方法获取的最长“回文串”,并对时间复杂进行分析对比PHP
- CentOS 设置网络(修改IP修改网关修改DNS)
- Unity之粒子特效参数详解
- 免安装、免激活,绿色版的电脑软件下载网站
- 2020年春节抢票神器
- Ubuntu更新显卡驱动与升级cuda版本“采坑“小记