Beiträge von Sempervivum

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", 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
            // siehe Aufruf der Funktion in Zeile 94
            // staende dieses Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var deg = value / max * 360;
                var colorCircle = getColor(value, opts);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 80, 100, {
            threshold: 60,
            colorCircle: 'red',
            colorAbove: 'green'
        });

    </script>

</body>
</html>

<html>
<link href="MyGame.css" type="text/css" rel="stylesheet">
<head>
<title>
MyAnimation
</title>
<body>
<center>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
</center>
<style>
</style>
<script>
</script>
</body>
</head>
</link>
</html>

<doctype html>
<html>
<head>
<title>
MyAnimation
</title>
<link href="MyGame.css" type="text/css" rel="stylesheet">
</head>
<body>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
<style>
</style>
<script>
</script>
</body>
</html>

<script>
        var ff = document.createElement("div");
        ff.id = 'ff';
        document.getElementsByTagName('body')[0].appendChild(ff);
        var nrcols = 10, nrrows = 10;
        for (var i = 0; i < nrrows; i++) {
            var row = document.createElement("div");
            ff.appendChild(row);
            for (var j = 0; j < nrcols; j++) {
                var box = document.createElement("div");
                box.className = "gridbox";
                row.appendChild(box);
            }
        }
    </script>
    <style>
        .gridbox {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: top;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(odd) {
            background-color: blue;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(even) {
            background-color: lightgray;
        }
        #ff div:nth-child(even) .gridbox:nth-child(even) {
            background-color: blue;
        }
        #ff div:nth-child(even) .gridbox:nth-child(odd) {
            background-color: lightgray;
        }
    </style>