html5在线考试倒计时,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, 7