タイトルの下に背景色を変える■を追加しました。

2022.07.22

Logging

おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述(ファイルなど)を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。

let htmlcode = `
    <span class='color_code' style='color:#262a2e' data-color-code='#262a2e'>■</span>
    <span class='color_code' style='color:#192734' data-color-code='#192734'>■</span>
    <span class='color_code' style='color:#1c483b' data-color-code='#1c483b'>■</span>
    <span class='color_code' style='color:#bf7800' data-color-code='#bf7800'>■</span>
    <span class='color_code' style='color:#83094f' data-color-code='#83094f'>■</span>
`;
let old_color = "#262a2e";
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
    if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
        const element = ColorCodeObject[key];
        element.addEventListener("click", function (element) {
            for (let ii = 0; ii < document.styleSheets.length; ii++) {
                if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {

                    for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                        let element_css_code = document.styleSheets[ii].cssRules[i];
                        let rgbfn = function(hex){
                            let red = parseInt(hex[1]+hex[2],16);
                            let green = parseInt(hex[3]+hex[4],16);
                            let blue = parseInt(hex[5]+hex[6],16);
                            return `rgb(${red}, ${green}, ${blue})`;                            
                        };
                        try {
                            if (element_css_code.style.backgroundColor === rgbfn(old_color)) {
                                //console.log(rgbfn(old_color));
                                element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
                            }
                        } catch (error) {
                            //console.log("not backgroundColor");
                        }
                    }
                    old_color = ColorCodeObject[key].getAttribute("data-color-code");
                }
            }
        });
    }
}

ソースコードも上から下へ進む感じで読んでいただけたら、読めるはずです。尚、躓く箇所といえば16進数でスタイルシートに記述しているものもRGBで格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。

この頃、jqueryを触らなくなって悲しいかな仕様を半分ぐらい忘れております。やはりコードは毎日書くべきかなって思います。

タグ

backgroundColor, catch, ColorCodeObject, cssRules, document.getElementById, element, getAttribute, hex, htmlcode, Ii, insertAdjacentHTML, jquery, match, parseInt, querySelectorAll, quot, RGB, rgbfn, string, styleSheets,

もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。

2019.08.24

Logging

もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
自動で九九表を生成するjQueryなんかを作ってそう。
(いまの小学生が羨ましいなw夏休み一日中ネットに浸っているだろう)
デモサイトはこちら
https://zip358.com/tool/demo5/index-12.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九九表</title>
    <link rel="stylesheet" href="../MDB-Free_4.8.5/css/bootstrap.css" >
    <link rel="stylesheet" href="../MDB-Free_4.8.5/css/mdb.css" >
    <link rel="stylesheet" href="../fontawesome-free-5.9.0-web/css/all.css">
    <script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">数字を入力してください</label>
        <input type="text" class="form-control" id="inp" aria-describedby="inp" placeholder="数字を入力してください(デフォルト(9))">
        <small id="emailHelp" class="form-text text-muted">1以下の数字、数字以外、または桁が2桁を超えた場合デフォルトを表示します</small>
    </div>
    </form>
    <span id="tbl99"></span>
    <script>
        $(function(){
            var cc = function(){
                var c=$(this).val().match(/[0-9]{1,2}/) && Number($(this).val())>1?$(this).val():9;
                $("#tbl99").html(c99(c));
                return c;
            };
           $("#tbl99").html(function(){
                c99($("#inp").val(cc));
           });
           $("#inp").on("keyup",cc);
           $("#inp").on("keydown",cc);
        });
        function c99(c){
            var str="<h1><span class="badge badge-primary">九九表</span></h1>";
                var x = y = c;
                str+="<table class="table table-striped table-dark table-bordered">";
                for(var i=1;i<=x;i++){
                    str+="<tr>";
                    for(var ii=1;ii<=y;ii++){
                        var s = i * ii;
                        str+="<td>" + i + " × " + ii + " = " + s + "</td>";
                    }
                    str+="</tr>";
                }
                str+="</table>";
                return str;
        }
    </script>
</body>
</html>

タグ

aria-describedby, cc, content, css, device-width, function, IE, Ii, initial-scale, inp&quot, jquery, lt, match, Number, placeholder, quot, STR, stylesheet&quot, val,

素数判定、単純なソース。

2017.06.25

Logging

素数判定、単純なソースを作りましたので
公開します、ちなみに確率的素数判定法ではなく
ほんとに単純明快な方法で作成しましたので自分のパソコンでは
4桁までの処理が限界でした、基本:javascriptで動いています・
ローカルのパソコン性能に左右されます。
ソースを変更して5桁とか試してみるのも良いかもしれません?
サンプルサイト
https://zip358.com/tool/sosu/

function sosu(){
    let sosuno = [2];
    for(let i=3;i<=9999;i++){
        let flg = true;
        if(i%2===0){
            continue;
        }
        for(let ii=2;ii<i;ii++){
            if(ii%2===0){
                continue;
            }
            if(i%ii===0){
                flg = false;
                break;
            }
        }
        if(flg){
            sosuno.push(i);
        }
    }
    document.getElementById("my-textarea").value = sosuno.join(',');
}
document.getElementById("btn").addEventListener("click",sosu);

タグ

$flg, 0, 2, , 4, 5, 9999, continue, For, function, if, Ii, javascript, let, lt, sosu, sosuno, true, サイト, サンプル, ソース, パソコン, ほんと, ローカル, 作成, 公開, 処理, 判定, 判定法, 単純, 基本, 変更, 左右, 性能, 方法, 明快, 素数, 自分, 限界,