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搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
随机推荐
- .Net Core Linux centos7行—IOC模块
.net core中可以说是用了全新的IOC模板,定义在Microsoft.Extensions.DependencyInjection下.提供了一套标准的接口.并提供了默认实现.并且大范围使用着,处 ...
- PHP执行文档操作
1.POWINTPOINT系列 之前参与过一个商城的项目,里面有将excel 导出的功能,但是如果要弄成PPT的我们应该怎么办呢?PHP是属于服务器端的 总不能在里面装个Powintpoint吧.于是 ...
- 关于闭包（closure）的一些概念
和其他大多数现代编程语言一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,JS函数对象的内部状态不仅包含 ...
- json数组去重
//名字去重 Map<String,Integer> map=new HashMap<String,Integer>(); for(int i=0;i<jows.size ...
- Beta阶段第六次Scrum Meeting
情况简述 BETA阶段第六次Scrum Meeting 敏捷开发起始时间 2016/12/16 00:00 敏捷开发终止时间 2016/12/17 00:00 会议基本内容摘要 平稳推进 参与讨论人员 ...
- 关于Array的map方法中回调函数参数的问题
开门见山,我们先来看两个例子. var arr=['1','4','9','16']; var r=arr.map(Math.sqrt); 猜猜r的结果会是多少? 没错就是 [1,2,3,4] 我们再 ...
- oracle--存储过程--bai
--1 无入参最简单的存储过程 create or replace procedure hello_proc as v_name varchar2(20); v_age number; begin v ...
- js parsefloat
项目中需要对返回的小数进行格式化,把零省略掉. 1.00 ---> 1 1.01 ---> 1.01 1.10 ---> 1.1 parseFloat() 函数可解析一个 ...
- JKS和PKCS#12
今天来点实际工作中的硬通货! 与计费系统打交道,少不了用到加密/解密实现.为了安全起见,通过非对称加密交换对称加密密钥更是不可或缺.那么需要通过什么载体传递非对称算法公钥/私钥信息?数字证书是公钥的载 ...
- 浅谈Android样式开发之shape
引言 在Android开发中我们很多情况都是使用图片来展示相关效果,今天我就来详细介绍下Android下使用Shape来进行简单UI的开发.一方面这些是Android开发的基础,另一方面这方面的知识可 ...