HTML5 Canvas Draw Countdown + Loop progress bar

Demand:

1. The page will provide a fixed time and a fixed percentage when entering the background, for example: 18 hours 16 minutes 30 seconds, 25%
2. Page requirements in the entry, there is a circular progress bar from 0 to 25% effect, the progress bar next to the display progress of the yellow box to always keep the progress bar in front of the
3. Loop progress bar Intermediate timer to start countdown from acquisition to specific time

Design diagram:

The JS code is as follows:

Complement 0
function setdigit (num, N)
{
var str= ' +num;
if (str.length<n)
{
Str= ' 0 ' +str;
}
return str;
}
Set time
Function redate (year, month, day, hour, minute, second) {
var obj=new Date ();
Obj.setfullyear (parseint (year));
Obj.setmonth (parseint (month)-1);
Obj.setdate (parseint (day));
Obj.sethours (parseint (hour));
Obj.setminutes (parseint (minute));
Obj.setseconds (parseint (second));
return Obj.gettime ();
}
Countdown
function Timereduce (timesum,obj) {
var ihour=setdigit (parseint (timesum/3600), 2);
timesum%=3600;

var imin=setdigit (parseint (TIMESUM/60), 2);
timesum%=60;

var isec=setdigit (parseint (Timesum), 2);

obj.innerhtml=ihour+ ': ' +imin+ ': ' +isec;
}
Percent background
function Drawperback (Context,centerx, Centery,iusepi, width, height, radius, type,scale) {
if (0<iusepi && iusepi< (math.pi*0.5))
{
X=centerx+200*math.cos (Iusepi) +22;
Y=centery+200*math.sin (Iusepi)-5;
Lefttri (context, x, y);
}else if ((MATH.PI/2) <iusepi && Iusepi <math.pi)
{
X=centerx+200*math.cos (Iusepi)-105;
Y=centery+200*math.sin (Iusepi)-28;
Righttri (context, x, y);
}else if (Math.pi<iusepi && iusepi< (math.pi*1.5))
{
X=centerx+200*math.cos (IUSEPI)-98;
Y=centery+200*math.sin (Iusepi)-35;
Righttri (context, x, y);
}
else{
X=centerx+200*math.cos (Iusepi) +28;
Y=centery+200*math.sin (Iusepi)-20;
Lefttri (context, x, y);
}
Context.save ();
Context.beginpath ();
Context.moveto (x, Y+radius);
Context.lineto (x, Y+height-radius);
Context.quadraticcurveto (x, Y+height, X+radius, y+height);
Context.lineto (X+width-radius, y+height);
Context.quadraticcurveto (X+width, Y+height, X+width, Y+height-radius);
Context.lineto (X+width, Y+radius);
Context.quadraticcurveto (X+width, y, X+width-radius, y);
Context.lineto (X+radius, y);
Context.quadraticcurveto (x, y, X, Y+radius);
Context[type + ' Style '] = ' #ffad2d ' | | Params.color;
Context.closepath ();
Context[type] ();
Context.font = "bold 23pt Arial";
Context.fillstyle= "#fff206";
Context.filltext ((scale*100). toFixed (0) + "%", x+12, y+33);
Context.restore ();
}
Grey Circle
function Circle2 (canvas,context,centerx,centery,r) {
Context.clearrect (0, 0, canvas.width, canvas.height);
Context.save ();
Context.linewidth = 20;
Context.strokestyle = "#db5c39";
Context.beginpath ();
Context.arc (centerx,centery,r, 0, math.pi*2, false);
Context.stroke ();
Context.closepath ();
Context.restore ();
}
Yellow arc
function Yellarc (Context,centerx,centery,r,iusepi) {
Context.save ();
Context.strokestyle = "#fff206";
Context.linewidth = 20;
context.linecap= "Round";
Context.beginpath ();
Context.arc (CenterX, Centery,r,-MATH.PI/2, Iusepi, false);
Context.stroke ();
Context.closepath ();
Context.restore ();
}
Left Triangle
function Lefttri (context, x, y) {
Context.save ();
Context.beginpath ();
Context.moveto (X+1,Y+11);
Context.lineto (x+1,y+33);
Context.lineto (x-10,y+22);
Context.fillstyle= "#ffad2d";
Context.closepath ();
Context.fill ();
Context.restore ();
}
Right triangle
function Righttri (context, x, y) {
Context.save ();
Context.beginpath ();
Context.moveto (X+79,Y+11);
Context.lineto (x+79,y+33);
Context.lineto (x+90,y+22);
Context.fillstyle= "#ffad2d";
Context.closepath ();
Context.fill ();
Context.restore ();
}

Function JinDu1 (timer,obj,r,timetxt,inper,idateend,idatestart,iremain,rad) {
var context = Obj.getcontext (' 2d '),
CenterX = OBJ.WIDTH/2,
CenterY = OBJ.HEIGHT/2;

var odatenow=new Date ();
var irest= (Idateend-odatenow.gettime ())/1000;
var iused= (Odatenow.gettime ()-idatestart)/1000;
Var Scale=iused/iremain;
if ((inper/100) <scale)
{
iusepi=-math.pi/2+rad*iremain*inper/100;
} else if ((inper/100) >scale)
{
Inper=100*scale;
Clearinterval (timer);
return false;
}
//Gray circle  
Circle2 (obj,context,centerx,centery,r);  
if (irest<0)
{
return;
}  
//Countdown
Timereduce (irest,timetxt);
Yellow Circle
Yellarc (Context,centerx,centery,r,iusepi);  
//Percent
Drawperback (Context,centerx, CenterY, Iusepi, "Fill", inper/100);  
}

function JinDu2 (Obj,r,timetxt,inper,idateend,idatestart,iremain,rad) {
var context = Obj.getcontext (' 2d '),
CenterX = OBJ.WIDTH/2,
CenterY = OBJ.HEIGHT/2;
var odatenow=new Date ();
var irest= (Idateend-odatenow.gettime ())/1000;
var iused= (Odatenow.gettime ()-idatestart)/1000;
var Scale=iused/iremain;
if ((inper/100) <scale)
{
return false;
}else if ((inper/100) >scale)
{
Inper=100*scale;
var iusepi=-math.pi/2+rad*iused;
}
Grey Circle
Circle2 (OBJ,CONTEXT,CENTERX,CENTERY,R);
if (irest<0)
{
Return
}
Countdown
Timereduce (Irest, timetxt);
Yellow Bezel
Yellarc (CONTEXT,CENTERX,CENTERY,R,IUSEPI);
Percentage
Drawperback (Context,centerx, Centery,iusepi, N, a, ten, ' Fill ', scale);
}

Window.onload = function () {
var canvas = document.getElementById (' canvas ');
var otime = document.getElementById (' time ');
var oPer = document.getElementById (' pertxt ');
var idateend=redate (2017,4,6,18,0,0);
var idatestart=redate (2017,4,2,18,15,10);
var iremain= (Idateend-idatestart)/1000;
var rad = Math.pi*2/iremain;
var inper=0;
var timer1=null;
var timer2=null;
Timer1=setinterval (function () {
Inper + = 0.2;
JINDU1 (Timer1,canvas,200,otime,inper,idateend,idatestart,iremain,rad);
},10);
JINDU2 (Canvas,200,otime,inper,idateend,idatestart,iremain,rad);
Timer2=setinterval (function () {
JINDU2 (Canvas,200,otime,inper,idateend,idatestart,iremain,rad);
},1000);
}

The above code also need to optimize, if there is not, also please the vast number of yards nong advice!

HTML5 Canvas Draw Countdown + Loop progress bar