JS Realizes the Clock Effect

When making reports, I hope to show the time instantly and have a more beautiful effect. The effect is as follows:

Use the canvas function of HTIML5 plus JavaScript code to obtain the real time of the system, and draw the clock every second.

1) Enter the following code in the cell, and then use HTML to display the content:

<canvas id="view" height="300px" width="300px"></canvas>

Note: The width and height attributes in the code can be adjusted according to your needs.

2) In WEB Attributes > Pagination Preview, add a Loading End event

The JavaScript code is as follows:

var dom=document.getElementById("view");  //Get canvas element
var ctx=dom.getContext("2d");            //Create context object
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
//Draw clock background
function drawBackground(){
ctx.translate(r,r);      //Reset the canvas origin to the center of the canvas
ctx.beginPath();
ctx.lineWidth=10;
ctx.arc(0,0,r-5,0,2*Math.PI);    //Draw a circle as the border of the clock
ctx.stroke();
//Draw the scale on the clock
for(var i=0;i<60;i++){
    var x=(r-20)*Math.cos(Math.PI*2/60*i);
    var y=(r-20)*Math.sin(Math.PI*2/60*i);
//Every 5 scales are drawn in black, and the rest are drawn in gray
    if(i%5===0){
ctx.fillStyle="#000000";
}else{
ctx.fillStyle="#cccccc";
}
ctx.beginPath();
ctx.arc(x,y,5,0,2*Math.PI);
ctx.fill();
}
//Draw the numbers on the clock
ctx.font="20px Arial";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillStyle="#000000";
for(var j=0;j<12;j++){
    var ax=(r-50)*Math.cos(Math.PI*2/12*j);
    var ay=(r-50)*Math.sin(Math.PI*2/12*j);
ctx.beginPath();
ctx.fillText(j>9?j-9:j+3,ax,ay);  //Because the angle of PI is calculated clockwise from 3 o'clock, the number must be judged and processed
ctx.fill();
}
}
//Draw hour hand
function drawHour(hour,minute,second){
ctx.save();      //Save the current drawing environment
ctx.beginPath();
//The angle of the hour hand is equal to the angle of the hour plus the angle of minutes and seconds converted to hours
var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute+2*Math.PI/12/60/3600*second;
ctx.rotate(rad);
ctx.lineWidth=14;
ctx.lineCap="round"; //Set the end of the drawing line to be a round hat shape
ctx.moveTo(0,20);
ctx.lineTo(0,-r+100);
ctx.stroke();
ctx.restore();   //Return to the previously saved drawing environment
}
//Draw minute hand
function drawMinute(minute,second){
ctx.save();      //Save the current drawing environment
ctx.beginPath();
//The angle of the minute hand is equal to the angle of minutes plus the angle of seconds converted to minutes
var rad=2*Math.PI/60*minute+2*Math.PI/3600*second;
ctx.rotate(rad);
ctx.lineWidth=10;
ctx.lineCap="round";
ctx.moveTo(0,20);
ctx.lineTo(0,-r+80);
ctx.stroke();
ctx.restore();   //Return to the previously saved drawing environment
}
//Draw the second hand
function drawSecond(second){
ctx.save();      //Save the current drawing environment
ctx.beginPath();
ctx.fillStyle="#FF0000";
var rad=2*Math.PI/60*second;   //The angle of the second hand is the angle of the current second
ctx.rotate(rad);
ctx.lineWidth=2;
ctx.lineCap="round";
ctx.moveTo(0,30);
ctx.lineTo(8,0);
ctx.lineTo(0,-r+30);
ctx.lineTo(-8,0);
ctx.lineTo(0,30);
ctx.fill();
ctx.restore();   //Return to the previously saved drawing environment
}
//Redraw the clock
function run(){
ctx.clearRect(0,0,width,height);   //Empty the entire canvas and redraw in the code below
ctx.save();     //Save the current drawing environment
var time =new Date();      //Get current time
var hour=time.getHours();    //Get hours
var minute=time.getMinutes();  //Get minutes
var second=time.getSeconds();  //Get seconds
drawBackground();              //Draw background
    drawHour(hour,minute,second);  //Draw hour hand
    drawMinute(minute,second);     //Draw minute hand
    drawSecond(second);            //Draw second hand
    ctx.fillStyle="#555";
    ctx.beginPath();
ctx.arc(0,0,8,0,2*Math.PI);
ctx.fill();
ctx.restore();  //Return to the previously saved drawing environment
}
window.setInterval(function(){run();},1000);  //Redraw the clock every second

ClickPagination Preview, and the effect is as shown in the beginning.

If it is in a dashboard, add a report block and perform the same operation, and then add the above JavaScript code to the function body of the following code in the event of the report block.

setTimeout(function(){ 
  //insert the code here
  },1000);

Clock Animation.cpt