【JavaScript】画像をランダムで表示するスクリプト

さてさて、今回のスクリプトとはまったく関係ない話なのですが、私はJavaScript(Ajax)とPHPを使って、あるサービスを開発したいと考えています。

しかしそれを開発するためのJavascriptの技術と私の今のJavascriptのレベルが凄まじく離れており、今すぐに手をつけることはできません。
まずは基本をちゃんと抑え、それから一つずつステップアップしたいと思います。そのためには簡単なものから少しずつ作っていこう、と。

そんなわけで今回はjqueryなどを使わず、画像をランダムで切り返るスクリプトを作ってみました。なんだか初めて自分でJavascriptを書いた気がします。
やはりプログラムのレベルを上げるには、プログラミングすることですね。

まずはHTMLです

<head>
<script src="js/random.js" type="text/javascript"></script>
</head>
<body>
	<p><img src="" name="myImg"></p>
</body>

これだけ。

次に外部ファイルで読み込んだJavascriptです。

function randomImg(){

	//画像の数
	imgLength = 6;

	//画像の拡張子
	imgExtension = ".png";

	//画像の保存ディレクトリ
	imgDirectory = "img/";

	randomInt = Math.random() * imgLength;
	randomInt = Math.ceil(randomInt);
	imgDirectory + randomInt + imgExtension;
	test = document.myImg.src;

	document.myImg.src = imgDirectory + randomInt + imgExtension;
}

window.onload = randomImg;

これで、imgフォルダに1.png、2.pngといった画像を保存してください。
画像の数、拡張子、保存ディレクトリはスクリプトの「//」の注釈部分で変更できます。

完成のサンプルはこちらです。

また、完成サンプルをダウンロードするにはこちらです

どうもサイ本の難解さにハマってしまい、実際に手を動かさずに時間だけが過ぎてしまった感があるので、これからはちゃんとたくさん作って、たまにドキュメントを見直してみようと思います。

【JavaScript】項目の内容をチェックしエラーを自動表示するフォーム

前回の記事で紹介した選択した項目をアニメーション等で目立たせるフォームに、エラーチェックを追加したものを紹介します。

こちらがエラーチェックの機能を追加したフォームです。

PHPでこういったエラーを吐き出すのはCMSや動画投稿サイトを作ったときからやっていたのですが、やはりフォームなどでは項目に何かを書いた時点でエラーチェックをして表示してくれる方が、一度送信してから一括でエラーが表示されるよりもずっと使いやすいですね!

今回作ったもののエラーチェックは、上から「英語以外が入力されていたらエラー」、「メールアドレスっぽくなかったらエラー」、「URLっぽくなかったらエラー」、「何も入力されていなかったらエラー」です。ガーっと作ったのであんまり厳重ではありません。

今回のスクリプトをZipファイルでダウンロードするにはこちらからどうぞ。

自由に使用、改修して頂いて結構ですので、ご自由にお使いください。

【JavaScript】選択項目をアニメーションで目立たせるフォーム

選択した要素を目立たせることで、ユーザーが今どの項目を入力しているかを直感的に把握させることができるフォームです。

jQueryを使用しています。

タイプは3つあり、
選択した項目のラベルをアニメーションするタイプ
選択した項目のラベルのフォントカラーをフェードで変えるタイプ
選択した項目input要素の横幅をアニメーションで変えるタイプがあります。

上の3つをまとめてZipファイルでダウンロードするにはこちらからどうぞ。

自由に使用、改修して頂いて結構ですので、ご自由にお使いください。

【CSS】※など一文字をインデントし、リストをきれいに表示する方法

サイトにおいて、マーク付きのリストはよく目にします。

※こんな感じのやつ

上のテキストの部分が一行の場合はきれいに表示されますが、もしも2行になってしまうときれいに表示されなくなってしまいます。

※こんな感じに、テキストが
マークの下にまがたってしまう。

これを防ぐには下記

.sample {
	text-indent:-1px;
	padding-left:1px;
    zoom:1;
}

これによって、テキストが改行されて二行になってもマークの下にはテキストが回りこまず、きれいに表示されます。

【CSS】ページにスクロールバーを必ず表示するテクニック

サイトの内容がパソコンの1画面に入りきらない場合、スクロールバーが表示されます。

もし縦に短いページと縦に長いページが混在しているサイトの場合、スクロールバーが表示される分だけコンテンツが左に移動し、ページを移動するたびにコンテンツがずれることになります。

これを防ぐには下記のCSSをhtml要素に追加します。

html {
	margin-bottom:1px;
	height:100%;
}

html要素に1pxマージンを足し、必ずスクロールバーが表示されるようにすることでページごとのズレを防ぎます。

まぁ、極端に縦に短いページと長いページが混在していない限り、そんなに使うことはないと思います。

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん