html5 canvas 实现倒计时 功能
function showTime(a) {
var b = {
id: "showtime", //canvasid
x: 60, //中心点坐标 X轴;
y: 60, //中心点坐标 Y轴;
radius: 60, //圆的半径
angle: 0, //角度 无需设置
linewidth: 6, //线的宽度
backround: "#d65554", //倒计时背景色
color: "#e4e4e4", //填充色
day: 0,
time: 0,
minute: 0,
seconds: 0
}
//若参数有更新则合并
if (a) {
b = $.extend(b, a);
}
this.total = 0;
this.id = b.id;
this.x = b.x;
this.y = b.y;
this.radius = b.radius;
this.angle = b.angle;
this.linewidth = b.linewidth;
this.backround = b.backround;
this.color = b.color;
this.time = b.time;
this.day = b.day;
this.minute = b.minute;
this.seconds = b.seconds;
var canvas = document.getElementById(this.id);
if (canvas == null) {
return false;
}
var ctx = canvas.getContext("2d");
this.creatText = function() {
ctx.fillStyle = "#000";
ctx.font = "13px Arial";
ctx.fillText("剩余时间", 32, 38);
ctx.fillStyle = "#333";
if (Number(this.day) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.day), 13, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("天", 38, 75);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.time), 58, 75);
ctx.font = "14px Arial";
ctx.fillStyle = "#333";
ctx.fillText("小时", 82, 75);
} else if (Number(this.time) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.time), 11, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("小时", 33, 75);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.minute), 61, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("分钟", 84, 75);
} else if (Number(this.minute) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.minute), 13, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("分钟", 35, 75);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.seconds), 65, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("秒", 90, 75);
} else if (Number(this.seconds) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.seconds), 40, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("秒", 65, 75);
}else{
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr("00:00"), 31, 75);
}
function getStr(num) {
return num.toString().length < 2 ? "0" + num : num;
}
},
showTime.prototype.creatEle = function() {
var _w = canvas.getAttribute("width");
var _h = canvas.getAttribute("height");
ctx.clearRect(0, 0, _w, _h); //清楚canva绘制区域
ctx.save();
ctx.restore();
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(-Math.PI / 2)
if(this.angle == 360){
ctx.fillStyle = this.color;
}else{
ctx.fillStyle = this.backround;
}
ctx.beginPath();
ctx.arc(0, 0, this.radius-0.5, Math.PI / 180 * 0, Math.PI * 2, true);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(-Math.PI / 2)
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(0, 0, this.radius, Math.PI / 180 * this.angle, Math.PI * 2, true);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.save();
ctx.beginPath();
var linew = this.radius - this.linewidth;
ctx.arc(this.x, this.y, linew, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fillStyle = 'white';
ctx.fill();
ctx.restore();
this.creatText();
};
this.creatEle();
}
var countdown = function(startTime, lastTime, nowTime, step) {
this.startTime = startTime; //服务器开始时间
this.lastTime = lastTime; //服务器到期时间
this.nowTime = nowTime; //服务器当前时间
this.alltime = this.lastTime - this.startTime; //总时间段
this.step = step * 1000; //执行的阶段时间，一般是1秒
};
countdown.prototype = {
atTime: function(a, b) {
//参数说明：a:到期回调方法，b:倒计时回调方法
var that = this;
//var timeold = parseFloat(Number(that.lastTime) - Number(that.startTime));
var timeold = that.lastTime - that.nowTime;
var msPerDay = 24 * 60 * 60 * 1000;
var e_daysold = timeold / msPerDay;
var daysold = Math.floor(e_daysold); //天
var e_hrsold = (e_daysold - daysold) * 24;
var hrsold = Math.floor(e_hrsold); //小时
var e_minsold = (e_hrsold - hrsold) * 60;
var minsold = Math.floor((e_hrsold - hrsold) * 60); //分钟
var seconds = Math.round((e_minsold - minsold) * 60); //秒
var msSeconds = Math.ceil(Math.round(((e_minsold - minsold) * 60 - seconds) * 1000) / 100) * 10;
var totaltime = that.lastTime - that.nowTime;
var timeangle = 360 - totaltime / (that.alltime / 360);
if (msSeconds == 100) {
msSeconds = 99;
}
if (that.nowTime > that.lastTime) {
arguments[0]();
} else {
arguments[1](that.getStr(daysold), that.getStr(hrsold), that.getStr(minsold), that.getStr(seconds), that.getStr(msSeconds),Math.floor(timeangle));
that.nowTime = parseInt(that.nowTime) + that.step;
window.setTimeout(function() {
that.atTime(a,b);
}, that.step);
}
},
getStr: function(num) {
return num.toString().length < 2 ? "0" + num : num;
}
};
$(function() {
var startTime = 1437765600000; //开始时间
var lastTime = 1437766880000; //结束时间
var nowTime = 1437766850000; //服务器当前时间
var showtime = new countdown(startTime, lastTime, nowTime,1)
showtime.atTime(function(){},function(){
var one = new showTime({
id:"showtime",
day:arguments[0],
time:arguments[1],
minute:arguments[2],
seconds:arguments[3],
angle:arguments[5]
})
one.creatEle();
});
})
以上代码为一个 canvas的倒计时功能，拷贝粘贴即可使用，
使用方法如下:
$(function() {
var startTime = 1437765600000; //开始时间
var lastTime = 1437766880000; //结束时间
var nowTime = 1437766850000; //服务器当前时间
var showtime = new countdown(startTime, lastTime, nowTime,1)
showtime.atTime(function(){},function(){
var one = new showTime({
id:"showtime",
day:arguments[0],
time:arguments[1],
minute:arguments[2],
seconds:arguments[3],
angle:arguments[5]
})
one.creatEle();
});
})
详细设置参数如下：
id: "showtime", //canvasid
x: 60, //中心点坐标 X轴;
y: 60, //中心点坐标 Y轴;
radius: 60, //圆的半径
angle: 0, //角度 无需设置
linewidth: 6, //线的宽度
backround: "#d65554", //倒计时背景色
color: "#e4e4e4", //填充色
day: 0,
time: 0,
minute: 0,
seconds: 0
实现效果如下：
不满一天，显示，小时/分钟，不满一小时显示 分钟/秒 不满一分钟显示 / 秒，不满一秒显示 00:00
代码逻辑比较简单，当然还有很大的优化空间，比较忙暂不做优化，希望能对后来者有所帮助吧。
html5 canvas 实现倒计时 功能的更多相关文章
- 利用canvas实现倒计时功能
wxml代码:<view class=“page-body”><view class=“page-body-wrapper”><canvas canvas-id=“can ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）
上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...
- 导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
- 赠书：HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- 用html5 canvas和JS写个数独游戏
为啥要写这个游戏? 因为我儿子二年级数字下册最后一章讲到了数独.他想玩儿. 因为我也想玩有提示功能的数独. 因为我也正想决定要把HTML5和JS搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
随机推荐
- 关于Django 错误 doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS
记录一下 报错 doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS\ 这个问题出现没 ...
- C#图像处理笔记
1.灰度拉伸 灰度拉伸又叫对比度拉伸,它是最基本的一种灰度变换,使用的是最简单的分段线性变换函数,它的主要思想是提高图像处理时灰度级的动态范围.
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- Sass学习笔记
语法 @each $var in <list>//循环就是去遍历一个列表,然后从列表中取出对应的值 @while $types > 0 //循环直到函数不成立 SASS函数 To-u ...
- JUC学习笔记--Atomic原子类
J.U.C 框架学习顺序 http://blog.csdn.net/chen7253886/article/details/52769111 Atomic 原子操作类包 Atomic包 主要是在多线程 ...
- UVA1225
每增加1个整数,所有位上的对应数都加一.建立一个10000列10行的表,然后查表就可以了. #include<stdio.h> #include<string.h> ][]; ...
- [C#] 日志类
在程序发布到服务器上的时候,不能在像本地执行一样可以调试,在发生错误时候,往往不能很方便的查找错误.将错误信息写入文件是一种比较常用的处理方法.以下是一个日志类,实现以下功能: 1)按日期每天生产不同 ...
- Windows10配置NFS服务端和客户端
环境:Windows10企业版x64 安装服务端 安装hane win nfs server,版本1169(官方最新版1223经试验不成功). 设置如下: 以管理员身份重启服务(注:软件界面上&quo ...
- skipping the actual organic impact moderation supplied
The most recent running footwear design has gone out. The high cost is actually $150. Expert sports ...
- redis 操作 list 的测试
lpush 从头部压入数据 127.0.0.1:6379> lpush listname value1 (integer) 1//返回list的当前长度 127.0.0.1:6379> l ...