Jquery アーカイブ - nyanblog ~にゃんぶろぐ~

【JS】jQueryでloadが効かない場合の対処法

nyan2222 — Mon, 02 Jan 2023 14:21:21 +0000

今更な内容にはなりますが…。

jQueryでは2から3にバージョンが上がった際、load関数が廃止されたためon関数を使用して対処するようになりました。

…が、それでも上手くできない…。となったときの備忘録です。
まずは、load関数からon関数に書き換える方法と、他、注意事項を載せています。

on関数に書き換え
注意事項

on関数に書き換え

イベント関連の処理clickイベント同様に、各関数（load、unload、error）での書き方は使用できなくなり、on関数での記述になりました。

■2.Xの書き方

$(window).load(function() {
  // ・・・処理
});

$(window).unload(function() {
  // ・・・処理
});

$(window).error(function() {
  // ・・・処理
});

■3.Xの書き方

$(window).on('load', function() {
  // ・・・処理
});

$(window).on('unload', function() {
  // ・・・処理
});

$(window).on('error', function() {
  // ・・・処理
});

注意事項

注意事項ですが、load処理を行う際に以下のように $(function () {}); で囲ってしまうとエラーが起こってしまうので注意してください。

$(function () {}); は $(document).ready(function() {}); と同じ処理で、ready処理はload処理とは実行するタイミングが異なるため、エラーになってしまいます。

■書き方

$(function () {
  // ・・・処理1
});

$(window).on('load', function() {
  // ・・・処理2
});

■エラー

$(function () {
  // ・・・処理1

  $(window).on('load', function() {
    // ・・・処理2
  });
});

★readとloadの違いの記事を書くかもしれません。

投稿【JS】jQueryでloadが効かない場合の対処法は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript】簡単に文字をカーブ状に配置するプラグイン【Arctext.js】

nyan2222 — Fri, 12 Jun 2020 09:00:00 +0000

文字をカーブさせるためには、CSSやJavaScriptで一から作成するのはかなり難しいです。
今回は、JavaScriptのプラグインを使って、簡単に文字をカーブ状に配置する方法をご紹介します。

プラグインの設定
1. Arctext.jsのファイルをダウンロード
2. script参照の設定
HTML
CSS
JavaScript
Arctext.jsのオプション
デモ
まとめ

プラグインの設定

Arctext.jsのファイルをダウンロード

こちらのページ[Arctext.js – Curving Text with CSS3 and jQuery]のページから「Download Source」をクリックしてダウンロードすることができます。
このプラグインはCDNには設置されていないので、ダウンロードしてファイルを配置してください。

また、このプラグインはJqueryを使用していますので、CDN設置のアドレスを設定するか、事前にダウンロードして用意してください。

script参照の設定

先ほどダウンロードしたファイルをhtmlでscript要素で参照設定します。

HTML

HTMLでカーブ状にしたい要素に対してidを設定していきます。
具体的な設定はJavaScriptで設定します。


    nyanblog javascript
    簡単にカーブにできるよ
    よかったら試してみてね
    文字をまっすぐにできるよ

CSS

CSSで少しスタイルも編集しています。

p {
    text-align: center;
    color: #D09B4A;
    margin: 5rem auto;
    font-weight: bold;
    font-size: 1.6rem;
}

#sample3 {
    margin-top: 16rem;
}

JavaScript

HTMLで設定したh1~h6要素やp要素に設定したidに対して、arctext関数を使って文字列をどのようにカーブ状にするか、設定します。

この設定は「script.js」ファイルに記述しています。

$(function() {
    $("#sample1").arctext({
        radius : 200,
    });
    
    $("#sample2").arctext({
        radius : 150,
    });
    
    $("#sample3").arctext({
        radius : 150,
        dir: -1,
    });
    
    $("#sample4").arctext({
        radius : 200,
        rotate: false,
    });
});

Arctext.jsのオプション

オプションを設定について、こちらの表を参考に設定してみてください。

オプション	説明
radius	サークルの半径（デフォルト：0）
dir	方向：1:下にカーブ、-1:上にカーブ（デフォルト：1）
rotate	true：文字が中央を向く、false：文字がまっすぐのまま。（デフォルト：true）
fitText	[fitText]プラグインを使用する場合、true（デフォルト：false）

デモ

ソースコードに記述している「デモページはこちら」です。

まとめ

いかがでしたでしょうか。
今回はJavaScriptのプラグインで簡単に文字をカーブ状に表現することができました。
これを使うとロゴも簡単にできちゃいそうですね！

投稿【JavaScript】簡単に文字をカーブ状に配置するプラグイン【Arctext.js】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】

nyan2222 — Tue, 09 Jun 2020 09:00:00 +0000

こんにちは。前回はJavaScriptを使って、ビンゴカードを作成してみました。

【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】

JavaScript（JS）を使ってビンゴカードを作ってみました。作成にはJqueryを使用しています。コピペで使えるソースコードや、実際のビンゴカードのサンプル付きなので、是非動かして試してみてくださいね♪

今回はビンゴマシンを作成してみましょう！

HTML
CSS
JavaScript
デモ
まとめ

HTML

まずはHTMLを作成しています。
divのwrapperで全体的に囲み、
・ルーレット div要素
・ルーレットの開始・停止ボタン div要素
・ルーレット停止後、出た数字を一覧で追加する枠 ul要素
で作成しています。

// 全体的な枠

    // ルーレット
    
    // ルーレット開始、停止のボタン
    
        
    
    // ルーレットを停止後、出た数字を一覧で表示

CSS

こちらがCSSです。
HTMLで設定した要素に対して、スタイルを設定していきます。
この辺りはコピペで好きなところを調整してもいいと思います！

@charset "utf-8";

body {
    font-family: arial, sans-serif;
}

.wrapper {
    margin: 0 auto;
    text-align: center;
}

.centering {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* ルーレット */
.result {
    border: solid 1px #B78D4A;
    border-radius: 50%;
    font-size: 70px;
    
    margin-bottom: 20px;
    width: 130px;
    height: 130px;
}

/* 出た数字の一覧 */
.number {
    color: #B78D4A;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    list-style: none;
    width: 80%;
    padding: 0;
}

.number li {
    background-color: #B78D4A;
    color: #fff;
    border-radius: 10px;
    height: 40px;
    margin: 4px;
    width: 40px;
}

/* ボタン */
.wrapper-button {
    padding: 20px 0;
}

.button {
    font-size: 30px;
    display: inline-block;
    padding: .8rem 1.6rem;
    border: none;
    border-radius: 25px;
    color: #FFF;
    background-image: linear-gradient(45deg, #B78D4A 0%, #D4BB92 100%);
}

.button:hover {
    background-image: linear-gradient(45deg, #D4BB92 0%, #FDE0A5 100%);
}

JavaScript

Jqueryを使っています。

まずは、ビンゴの数字一覧を作成します。この一覧を使ってルーレットを回します。

次にSTARTとSTOPのクリックイベントでルーレットを回したり、結果を表示させたりします。
詳しくはコメントを記載していますので、確認してください。

$(function () {

    // 1~75まで、bingoの数字一覧を作成
    var max = 75;
    var bingo = [];
    for (var i = 1; i <= max; i++) {
        bingo.push(i);
    }

    var timer;
    var random;
    // START・STOPボタンクリックのイベント
    $("#button").on("click", function () {
        // START
        if ($(this).text() == "START") {
            // ボタンのテキストを"STOP"に変更
            $(this).text("STOP");

            // ルーレットタイマーを設定
            timer = setInterval(function () {
                random = Math.floor(Math.random() * bingo.length);
                $("#result").text(bingo[random]);
            }, 10);
        // STOP
        } else {
            // ボタンのテキストを"START"に変更
            $(this).text("START");

            // ルーレットタイマーを停止
            clearInterval(timer);

            // 停止時の数字を結果に反映
            var result = bingo[random];
            // 一覧から削除（次のルーレットに表示させないため）
            bingo.splice(random, 1);

            // 数字一覧に追加
            $("#number").append($("").text(result));
            $("#number li").addClass("centering");
        }
    });
});

デモ

こちらがデモページです。
STARTボタンをクリックしてルーレットが開始、一定時間後にSTOPボタンをクリックすることで、数字を止めることができます。

ボタンの下に今まで出た数字が一覧で表示されるので、カードを再チェックするときに活用することができます。

まとめ

前回のビンゴカードと合わせることで、
ビンゴゲームをすることができます。

【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】

これならカードをビンゴゲーム一式を購入する必要もないので、簡単に遊ぶことができます。
良かったら遊んでみてくださいね！

良かったら他の記事も見てみてくださいね！

投稿【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】

nyan2222 — Sun, 31 May 2020 09:00:00 +0000

こんにちは。今回はJavaScriptを使ってビンゴカードを作成してみました。Jqueryも使用していますので、ご注意ください。

HTMLの設定
CSSの設定
JavaScript
デモ
まとめ

HTMLの設定

まずは、枠作りのHTMLからです。

ビンゴカードの枠と作成用のボタンを設定しています。

CSSの設定

ビンゴカードと作成ボタンのスタイルを設定しています。

/* カード全体のスタイル */
#bingo{
    width: 340px;
    margin: 0 auto;
}

/* B I N G Oと番号のスタイル */
#bingo th,
#bingo td {
    text-align: center;
    font-weight: normal;
}

/* B I N G O の文字のスタイル */
#bingo th{
    color: #B78D4A;
}

/* 番号のスタイルを設定 */
#bingo td {
    width: 60px;
    height: 55px;
    text-align: center;
    vertical-align: middle;
    
    border-radius: 1.5rem 1.5rem 0 0;
    color: #fff;
    background-color: #B78D4A;
    border: 2px solid #B78D4A;
}

/* 番号をチェックした時に変更するクラス、スタイルを設定 */
#bingo td.check {
    color: #B78D4A;
    background-color: #F0F0F0;
}

/* 番号をマウスオーバーした時にポインタを指矢印に変更 */
#bingo td:hover {
    cursor: pointer;
    cursor: hand;
}

/* 作成ボタンのスタイル */
p#button{
    text-align: center;
}

JavaScript

JavaScriptでカードの番号をランダムに設定する動きと、
番号をクリックした際にスタイルを変更するクラスをつけ外ししています。

$(function () {
    var make_col = function (base) {
        var arr = [];
        for(var i=0; i<15; i++) {
            arr.add(i);
        }
        var list = [];
        for (var i = 1; i <= 5; i++) {
            // ランダムで値を取得
            var a = parseInt(Math.random() * arr.length);
            list.push(arr[a] + base);
            // 数字を重複させないため、元々のリストから値を削除する
            arr.splice(a, 1);
        }
        return list;
    };

    var make_table = function () {
        // B列、I列...とそれぞれで5つの数字をランダムで取得
        var col_b = make_col(1);
        var col_i = make_col(16);
        var col_n = make_col(31);
        var col_g = make_col(46);
        var col_o = make_col(61);
        
        // 25個分の数字を格納できるtableに取ってきた列の数字を設定
        var list = new Array(25);
        for (var i = 0; i < 5; i++) {
            list[i * 5 + 0] = col_b[i];
            list[i * 5 + 1] = col_i[i];
            list[i * 5 + 2] = col_n[i];
            list[i * 5 + 3] = col_g[i];
            list[i * 5 + 4] = col_o[i];
        }
        // 中心はfreeで固定
        list[12] = 'free';
        return list;
    };
    
    // カード作成関数
    var create_card = function () {
        // 取ってきた数字が入ったtableをhtmlに出力する
        var table = make_table();
        for (var i = 0; i < table.length; i++) {
            $('#bi' + i).text(table[i]);
        }
    };

    // 初期化関数
    var init = function () {
        create_card();
        
        // チェック状態を外す
        $('#bingo td').each(function () {
            $(this).removeClass('check');
        });
    };
    
    // 初期
    init();
    
    // カード作成 ボタンをクリックすると、初期化
    $('#bingo-create').click(function () {
        init();
    });
    
    // 番号をクリックすると、スタイルを変更するクラスをつけ外しできる
    $('#bingo td').click(function (){
        $(this).toggleClass('check');
    });
});

デモ

こちらが作成したビンゴカードです。

デモページはこちら

番号をクリックすると見た目が変更されます。
（押し間違い対策でもう一度番号をクリックすると元に戻ります。）
カードをリセットしたい場合は、「カード変更」ボタンをクリックすると、初期化されます。

まとめ

今回はJavaScriptを使って、ビンゴカードを作成してみました。
列がそろったらBINGO！の表示を追加するのも面白いですね！
近いうちに試してみたいと思います。

次回の記事も良かったらご覧ください。

【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】

JSでビンゴマシンを作成してみましたのでサンプルコードをご紹介します。簡単にできて解説もついて分かりやすくしています。ビンゴカード作成の記事もありますので、良かったら見てみてください♪

投稿【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。