JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
    <canvas id="display1" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val1" />
    <canvas id="display2" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val2" />
    <canvas id="display3" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val3" />

JavaScript

$("#val1").on("change", function () {
            updateCircleDisplay("#display1", this.value);
        });
        $("#val2").on("change", function () {
            updateCircleDisplay("#display2", this.value);
        });
        $("#val3").on("change", function () {
            updateCircleDisplay("#display3", this.value);
        });

        function getColor(value, opts) {
            if (opts.threshold) {
                if (value < opts.threshold) return opts.colorCircle;
                else return opts.colorAbove;
            } else {
                return opts.colorCircle;
            }
        }
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("opts").templateText.replace("{value}", value),
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg,
                    strokeStyle: getColor(value, canv.data("opts"))
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $",
                threshold: 50,
                colorAbove: 'green'
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
       ...