JavaScript集

編集：2026.03.09 ↑トップページ

HTML、CSS、JavaScript

によるサンプル コード

ABSの模擬動作 →

作成：2006.09.10、編集：2026.02.25

或る半導体製品を扱う機械を模擬したもの。

当時、8bit CPUの装置では珍しくマルチタスク処理をしていて、機械を動かしていました。で、マルチタスクの機能もJavaScriptの基本機能だけで模擬しました。

HTML5対応にしました。

音も発するようにしました。

動きはCSS3のアニメーション機能を使わないで処理しました。

ブラウザーで画像印刷（GazouInsatuTC.htm） →

作成：2023.06.26、編集：2023.06.26

ブラウザー上で指定画像を配置して印刷する為のもの。

画像はWeb上のアドレスでも可能で、4つまで指定可能。

用紙、画像サイズ、dpi、倍率など指定可能。

ローカルで動作させた場合は、設定の保存（cookie利用）ができません。

※ 画像以外を指定した場合は不明。

カラーグラデーションの表示（ColorGradationTMV.htm） →

作成：2023.09.24、編集：2023.09.24

カラーグラデーションを表示します。

色の発色は色指定で表示しています。なので、各色でマス目が出てしまいます。

目盛りと文字の表示も可能にしました。

目盛り文字、各色のサイズの変更も可能。

印刷にも可能。印刷時は、背景も印刷する設定をお忘れなく。

※ サンプル画像は、サイズ変更した例。

TabA →

作成：2006.09.16、編集：2026.02.26

タブのクリックで表示切替。

簡単なデザインにしました。よって、必要に応じて色を付けるなど手を加えて下さい。TABLE構成です。

LinkButtonB →

作成：2021.09.24、編集：2026.02.26

A要素を使ったリンクボタンです。

マウスカーソルが乗ると背景が変化します。

一応放射状になっている。

トンボの模擬表示（Tonbo.htm） →

作成：2007.11.24、編集：2021.08.24

トンボが飛ぶ様子を模擬したもの。

ブラウザーのアニメーション機能等は使ってません。

MoveA →

作成：2006.09.23、編集：2026.02.25

要素オブジェクトをマウス操作により移動します。

移動させたい要素はclass属性に「Move」を指定してください。

移動操作は：対象要素を click → 移動 → click です。

MoveB →

作成：2006.09.23、編集：2026.02.26

要素オブジェクトをマウス操作により移動します。

移動させたい要素はclass属性に「Move」を指定してください。

移動操作は：対象要素を mousedown → 移動 → mouseup です。

ImagePrint →

作成：2018.01.22？、編集：2026.03.09

画像と文字列を画面上で自由に動かして配置する。

ページの用紙サイズの設定も可能。

印刷も可能で、設定部などは印刷されません。

CookieA →

作成：2006.09.26、編集：2021.08.29

クッキーのモジュールと実験です。

クッキーモジュールは「クッキーの設定（書き込み）」「クッキーの取得」「クッキーの削除］です。

実験は10秒だけ記憶させる。

記憶時間の単位：[ms]。

ジグソーパズル（PZ1.htm） →

作成：2006.12.17、編集：2021.08.31

ジグソーパズル。

ピース数は少ないですが。

自作ツールチップ →

作成：2007.06.09、編集：2023.07.03

JavaScriptによるツールチップの表示です。

誰でも出来そうな処理ですが、サンプルとして挙げておきます。

ツールチップとして表示する文字は、HTMLテキストが可能で、改行も含めることができます。

線香花火の模擬表示（SenkouHanabi.htm） →

作成：2007.08.27、編集：2008.03.24

線香花火の模擬表示です。

積もる雪の模擬表示（TumoruYuki.htm） →

作成：2007.08.28、編集：2026.03.08

雪を降らせて、Boxに積もってゆく様子を模擬したものです。

AnimeA →

作成：2021.09.01、編集：2026.02.19

CSS3のアニメーション表現のサンプル。

AnimeB →

作成：2021.09.01 by T.A.、編集：2026.02.19

CSS3のアニメーション表現のサンプル。

画像のスライド表示です。フェードイン、フェードアウト付き。

文字Line →

作成：2026.02.17、編集：2026.02.17

文字で線を描きます。細いのから太いの…。色指定可能。描画ピッチ調整可能。

ImgSelect →

作成：2026.02.22、編集：2026.02.23

ボックス内で画像を表示させて、スクロールしたりして。選択すると…のモジュール

キー操作にも対処してみました。