javascriptCountDownTimer/CountDownCircle.html at master · jrmmba8314/javascriptCountDownTimer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<body>
<script src="http://cybersecurity.portangelesschools.org/moment.js" type="text/javascript"></script>
<script src="http://cybersecurity.portangelesschools.org/myCountDownTimer.js" type="text/javascript"></script>

<canvas id='ctx'></canvas>
<script>
function DrawCircle()
{
    var htmlCanvas = document.getElementById('ctx');
    initialize();

    function initialize()
    {
        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();
    }

    function resizeCanvas()
    {
        htmlCanvas.width = window.innerWidth - moodleOffset;
        htmlCanvas.height = 600;

        // 5 divisions
        //    first title   (near the top)
        //    first circle  (20%)
        //    second title  (in the middle so 50%)
        //    second circle (50 + 20 = 70%)
        //    footer        (at the bottom)

        // first timer
        var TXTcountDownDate = "Jun 15, 2018 02:35:00 PM";
        var timers = myCountDownTimer(TXTcountDownDate);
        drawTitle("Countdown to Graduation 2018 at " + TXTcountDownDate,  '18pt', 0.05);

        //redraw (display text, color, x offset, y offset, total time)

        redraw(timers.years,   'y', "gold",   0.1, 0.20, 13);
        redraw(timers.days,    'd', "blue",   0.3, 0.20, 365);
        redraw(timers.hours,   'h', "green",  0.5, 0.20, 24);
        redraw(timers.minutes, 'm', "red",    0.7, 0.20, 60);
        redraw(timers.seconds, 's', "purple", 0.9, 0.20, 60);

        // second timer
        TXTcountDownDate = "Jun 17, 2033 03:05:00 PM";
        timers = myCountDownTimer(TXTcountDownDate);
        drawTitle("Countdown to Mr. Mitchell's Retirement at " + TXTcountDownDate,  '18pt', 0.50)

        //redraw (progress number, display text, color, x offset, y offset, total time)
        redraw(timers.years,   'y', "gold",   0.1 , 0.70, 45);
        redraw(timers.days,    'd', "blue",   0.3 , 0.70, 365);
        redraw(timers.hours,   'h', "green",  0.5 , 0.70, 24);
        redraw(timers.minutes, 'm', "red",    0.7 , 0.70, 60);
        redraw(timers.seconds, 's', "purple", 0.9 , 0.70, 60);

        // footer
        drawTitle ("If the hour calculation looks one off, it is not.  Think about calculations of Daylight Saving Time!", '12pt', 0.9)
    }

    function drawTitle(theTxt, fontSize, YoffSet)
    {
        var ctx = htmlCanvas.getContext("2d");
        ctx.beginPath();
        ctx.textAlign="center";
        ctx.font = fontSize + ' Courier New';
        ctx.fillStyle="black";
        ctx.fillText(theTxt,
                     (window.innerWidth - moodleOffset) / 2,
                     htmlCanvas.height * YoffSet);
    }

    function redraw(progressNumber, theTxt, myColor, XoffSet, YoffSet, ttlTime)
    {
        var ctx = htmlCanvas.getContext("2d");
        ctx.beginPath();

        begAngle = 0;
        endAngle = (2 * Math.PI) * ((ttlTime - progressNumber) / ttlTime);
        ctx.arc((window.innerWidth - moodleOffset) * XoffSet,
               (htmlCanvas.height * YoffSet),
               50,         // radius
               begAngle,   // start angle
               endAngle);  // end angle
        ctx.strokeStyle=myColor;
        ctx.lineWidth=10;

        if (progressNumber <= 0)
        {
            ctx.fillStyle=myColor;
            ctx.fill(); // fill
        }

        ctx.stroke(); // line - no matter what, draw the outside line
        ctx.font = '18pt Courier New';
        if (progressNumber <= 0)
        {
            ctx.fillStyle="black";
        }
        else
        {
            ctx.fillStyle=myColor;
        }
        ctx.fillText(progressNumber + theTxt,
                     (window.innerWidth - moodleOffset) * XoffSet,
                     (htmlCanvas.height * YoffSet));
    }
}
</script>
<script>
var x = setInterval(function()
{
   moodleOffset = 0; // account for the Moodle Nav Bar.
                     // assumes Moodle Nav bar on right side.
                     // for my Moodle 300 worked well.
                     // Referenced Globablly
   DrawCircle();
}, 1000);
</script>
</body>
</html>