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搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
随机推荐
- angular
- Appium简单测试用例
工程目录如下: 封装初始化androiddriver 方法 import org.openqa.selenium.remote.DesiredCapabilities; import java.io. ...
- 通过一个实例重新认识引用类型，值类型，数组，堆栈，ref
昨天在写代码时候遇到了一个问题,百思不得其解,感觉颠覆了自己对C#基础知识的认知,因为具体的情境涉及公司代码不便放出,我在这里举个例子,先上整个测试所有的代码,然后一一讲解我的思考过程: using ...
- 下拉框-ComboBox
<ComboBox Name="cbBox" SelectionChanged="cbBox_SelectionChanged"></Comb ...
- WPF学习系列 简单的窗体设置
今天要学习的源码是一个窗体设置.效果如下,可拖拽.这让我想起了vs的启动界面 下面是源码的情况 项目结构: 窗体代码: cs代码 1.新建项目 略 2.设置窗体 AllowsTransparency= ...
- hibernate- Hibernate中多对多的annotation的写法（中间表可以有多个字段）
http://blog.csdn.net/liuxianbing119/article/details/7283769
- PHP判断SESSION过期的方法
在公共函数function.php中添加如下方法,即可控制用户登录的SESSION有效期 //封装SESSION过期判断方法function start_session($expire = 0){ $ ...
- Python检测服务端口存活状态并报警
最近发现公司的测试环境中有个Socket服务的端口总是莫名其妙Down掉,但是服务却正常运行着,看样子是僵死了... 虽然是测试环境,但是也不能这样放着不管,于是连夜写了一个简单的监控脚本.因为服务器 ...
- SVN 提交报错：×××文件is not under version control
解决方法:1.删除出错的文件,然后在出错文件所在文件夹执行还原操作 2.VS中可将文件先排除在项目外,再包含在项目内,即可正常提交
- Android SD卡存储
原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_SDcard_store.html 一 概念 SD卡存储空间比较大,当需要存取较大的 ...