JS ページ内スムーズリンク jQueryを使わずにページ内リンク(アンカーリンク)で滑らかに移動するリンクのサンプルです。 「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。 jQueryなしで実装しています... 2022-06-26 14:25:25
JS フルスクリーンの開始、解除 ページでブラウザのフルスクリーンモードを実装し、解除するサンプルです。 動画の再生など大画面で見てほしいコンテンツは、全画面表示をしてほしいので、このサンプルはその制御をする時に使います。 ボタンを押して、フルスクリーン... 2022-06-19 22:11:22
JS HTMLの上書きと挿入 JavaScriptを使って、HTMLの要素を挿入するサンプルです。 一つの要素を書き換えるパターンと、押すたびに増えるパターンをJSのみで実装します。 ボタンを押すと下部の枠にHTMLの要素が追加されます。 innerHTM... 2022-04-01 08:47:41
JS マウスの位置の取得 マウスが要素の上に来た時の位置を取得するサンプルです。 マウスオーバーしたときと、クリックされたとき、それぞれのマウスの位置を取得します。 以下の正方形にマウスを合わせてください。 スマホではタップした... 2022-04-01 08:46:11
JS CSSを追加する jQueryなどを使わずに、JSのみでCSSを変更する時のサンプルです。 JSでドキュメントのスタイル情報を取得して、JSで新しいCSSを追記します。 下記の四角はサイズだけCSSで記述して描画しています。 width: 200px;height: 1... 2022-03-30 07:41:20
JS 複数の要素のクリック ボタンが押された時にイベントを発生させるJavaScriptのみのサンプルです。 idで1箇所のみに実装するケースと、classで複数箇所に実装するケースがあります。 よく見かけるサンプルはidのケースですが、実際サービスに実装するときは... 2022-03-18 07:25:03
JS クリックした位置から波紋がでるボタン ボタンをクリックした時に、クリックした部分から波紋が広がる演出をつけたボタンのサンプルです。 以下のボタンをクリックしてください。 クリックした部分から波紋が広がります。 以下にクリック位置が出力されます。 このようなギミックは、複数... 2022-03-07 08:20:53
JS 値を一定期間保持してABテスト cookieを利用して一定の時間、同じ人に同じものを表示して、別のコンテンツをだし分けるサンプルです。 このサンプルでは1日同じアルファベットを表示するサンプルです。 初回のアクセスでA・B・Cのどれかを表示して、その値をブラウザのcookieに保存します。... 2021-12-07 11:29:07
JS 繋げて処理を実行 functionなどの処理を複数続けて値を渡して実行したいときのサンプルです。 数珠繋ぎ(チェーン)でデータを渡して、処理をしたい時、Promiseのthenメソッドが便利です。 最初にPromiseを生成することで、thenで繋げて処理をすることが... 2021-05-31 01:33:48
JS 同時にfunctionを実行 Promiseを使って複数の処理を同時に実行するサンプルです。 複数の処理を同時に実行する処理は、複雑な記述になりがちです。 まとめて同時に発生させたり、それぞれエラーが発生したり、どこかで制御する処理を考えない... 2021-05-31 00:23:25