うさのJavaScript講座 - Blog館 - | JavaScript de ブログ

2006年12月26日

カウントダウンスクリプト♪

早いもので気が付いたらもう師走。
仕事が忙しすぎて全然サイトのリニューアル間に合ってないです･･･。ウェブ関係のお仕事なら楽しめただろうけど、なんせウェブぢゃない分野のエンジニアなもんで～。とまぁ言い訳はこの辺にして、うさのように年末までビッチリ仕事詰まってる人にもそうでない人にも新年は来るものです♪
新年を楽しみにしている人にもそうでない人にもお送りするカウントダウンスクリプト。
2007年だけだとあっという間にくるのでついでに22世紀カウントダウンもつけちゃいます。
なお、このサンプルはうさのJavaScript講座のサンプル集1のサンプル67でもダウンロードしていただけます。
2007年まであと
22世紀まであと

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var tid;
function ShowTime()
{
	//変数宣言
	var dtToday = new Date();

	//記念日をいれてください。
	//注意：月、日は０からスタートしているのに注意してください。
	var dtNextCentury = new Date(2101, 0, 0);　//2007年元旦の場合は、2007,0,0
	//計算結果を表示します。
	var nCal, nSecB, nSec, nMin, nHour;
	nCal = dtNextCentury.getTime() - dtToday.getTime();

	//秒から逆算
	nSecB = nCal/1000;
	nHour = Kirisute((nSecB/60)/60);
	nMin = Kirisute(nSecB/60 - nHour*60);
	nSec = Kirisute(nSecB - nMin*60 - nHour*60*60);

	//ここでは時間を表示します。
	document.getElementById("time22").value=nHour+"時間"+nMin+"分"+nSec+"秒";

	//タイマーを開始
	tid=setTimeout('ShowTime()',999);
}
//時刻の切捨て関数
function Kirisute(nVal)
{
	var nTemp = nVal.toString();
	if (nTemp.indexOf(".") < 0)
	{
		return nTemp;
	}
	return nTemp.substring(0, nTemp.indexOf("."));
}
//-->
</script>

HTMLはこちら↓
BODYで開始するパターンです。このブログはボタンクリックで表示するようにしています。

Permalink
by
at 17:57
Comments (0)
Trackbacks (0)

2006年11月28日

Windowsカラーダイアログで選択した色を反映

HTMLで記述するOBJECTタグ。これはActiveXやJAVAやFlashなど拡張オブジェクトを貼り付けるタグです。この中には様々な種類のものがありますが、今回はWindows環境で呼び出すことのできるカラーダイアログを呼び出してみることにします。
Windows環境でカラーダイアログはダイアログヘルパーという位置づけで提供されているので、オブジェクトをHTMLに貼り付け、公開されている関数を呼び出すとダイアログが表示される、という仕組みになっています。
それでは、カラーダイアログで選択された色をDIVタグ内の文字列の色に反映するサンプルです。Windows+IEをお使いの方は是非お試しくださいませ。
なお、このサンプルはうさのJavaScript講座サンプル集７のサンプル22でもご覧いただけます。テスト済環境は、Windows XP + IE6.0, Windows XP + IE7.0, Windows 2003 + IE7.0, Windows Vista + IE7.0です。

ここの文字列の色を変更します♪

ソースはこちら↓

HTMLはこちら↓

Permalink
by
at 19:51
Comments (0)
Trackbacks (0)

2006年11月20日

画像をウィンドウサイズにあわせてスライド

3回ほどXML/XLST関連でご案内してきましたが、そんな堅苦しいのはﾔﾀﾞ！JavaScriptってむずいの？なんて思われてしまったかもしれませんね。
ということで、こんどはウェブサイトにもブログにも、動くものがほしいときのアクセントを作ってみるなんていかがでしょうか。
DIVタグで表示している画像を、ブラウザの高さに従ってスライドさせてみるサンプルをご紹介いたします。ただスライドしていくのには、現在のX軸Y軸のポジションをインクリメント/ディクリメント（＋－）すればいいのですが、せっかくJavaScriptでは、現在のWindow枠のサイズが取得できますのでその値を利用しながら動かしてみることにします。
↓のボタンをクリックすると、ブラウザの左上から左下まで画像が下向きに動いていきます。
うさのJavaSript講座では、サンプル集８-２４でDLすることができます。サンプル集８にはそのほか右へスライドしたり斜めへスライド、そしてウィンドウを1周グルリとするものもございます。お楽しみ下さいませ♪

レイヤー部分です

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var nLayerHeight = 70; //レイヤーの高さのピクセル数をいれてください。
var nXPos;
var nYPos;
var nTimer;
function Init()
{
	nXPos = 0;
	nYPos = 0;
	SampleStartMove();
}
function SampleStartMove()
{
	nYPos++;
	//NNの場合
	if (navigator.appName=="Netscape")
	{
		//画面の大きさを取得します
		nHeight = window.innerHeight - nLayerHeight;
		//次の座標が画面よりも大きければなにもしません
		if (nYPos > nHeight)
		{
			return;
		}
		//NN4
		if(document.layers)
		{
			//レイヤーの幅と高さをマウス座標にセット
			document.layerSample.left = nXPos;
			document.layerSample.top = nYPos;
		}
		//NN6
		else
		{
			document.getElementById("layerSample").style.left = nXPos;
			document.getElementById("layerSample").style.top = nYPos;
		}
	}
	//IEの場合
	if (document.all)
	{
		//画面の大きさを取得します。
		nHeight = document.body.clientHeight - nLayerHeight;
		//次の座標が画面よりも大きければなにもしません
		if (nYPos > nHeight)
		{
			return;
		}
		//レイヤーの幅と高さを座標にセット
		layerSample.style.left = nXPos;
		layerSample.style.top = nYPos;
	}
	nTimer=setTimeout("SampleStartMove()",10); //タイマー
}
//-->
</script>

HTMLはこちら↓

Permalink
by
at 20:01
Comments (0)
Trackbacks (0)

2006年11月03日

XMLとXSLTをくっつけるJavaScriptサンプル

前回おとどけした、XMLを読み込むサンプルに引き続き、今回はXSLTをAppendしてあげようではないか！というサンプルです。
え？＜?xml-stylesheet type="text/xsl" href="xsltファイル名"?＞をXMLに書けばいいからJavaScriptでやらなくってよい？そんな場合もあります。でも、XMLがどんなものでもいい場合や、XMLはどこかのコードで生成されていてスキーマしか分かっていない場合、XSLTを動的に切り替えたい場合なんかには役に立つかもしれません。
ということで、今回もIE6,7,Firefox2.0,Opera9.0で動作確認していますサンプルをお届けしますのでお楽しみくださいませ♪
なお、このサンプルは、このブログのRSSをXMLとしていますが、うさのJavaScript講座サンプル集12-サンプル5ではHTML/XML/XSLTセットでDLできます。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var xmlDocument, xslDocument;
var fileName = "index.xml";
var xsltFileName = "sample5.xslt";
var browserFlag = false;
//読み込みスタート
function ViewTitle()
{
	if (document.implementation.createDocument)
	{
		browserFlag = true;
		//XML
		xmlDocument = document.implementation.createDocument("", "sampleXML", null);
		xmlDocument.onload = loadXslt;
		xmlDocument.load(fileName);
	}
	else //IE
	{
		//XML
		xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
		xmlDocument.async = false;
		xmlDocument.load(fileName);
		//XSLT
		xslDocument = new ActiveXObject("Microsoft.XMLDOM");
		xslDocument.async = false;
		xslDocument.load(xsltFileName);
		appendXslt();		
	}
	
}
//IE以外の場合のXSLTのロード
function loadXslt()
{
	if (browserFlag)
	{
		xslDocument = document.implementation.createDocument("", "sampleXSLT", null);
		xslDocument.onload = appendXslt;
		xslDocument.load(xsltFileName);
	}
}
//XMLとXSLTをくっつける関数
function appendXslt()
{
	if (browserFlag)
	{
		xsltProc = new XSLTProcessor();
		xsltProc.importStylesheet(xslDocument);
		outString = xsltProc.transformToFragment(xmlDocument, document);
		//表示
		document.getElementById("xmlValues").appendChild(outString);
	}
	else //IE
	{
		outString = xmlDocument.transformNode(xslDocument);
		//表示
		document.getElementById("xmlValues").innerHTML = outString;
	}
}
//-->
</script>

XSLTはこちら↓

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:variable name="items" select="//*[local-name()='item']" />
  <xsl:template match="*">
    <html>
    <body>
        <xsl:choose>
          <xsl:when test="count($items)>0">
            <table border="1" width="100%">
              <tr>
                <td>タイトル
                </td>
                <td>リンク
                </td>
              </tr>
            <xsl:apply-templates select="$items" mode="item" />
            </table>
          </xsl:when>
        </xsl:choose>
    </body>
    </html>
</xsl:template>
<xsl:template match="*" mode="item">
    <xsl:variable name="item-title" select=".//*[local-name()='title']" />
    <xsl:variable name="item-link" select=".//*[local-name()='link']" />
  <tr>
       <xsl:if test="string-length($item-title)">
        <td>
          <xsl:value-of select="$item-title" />
        </td>
      </xsl:if>
	<xsl:if test="contains($item-link, 'http')">
        <td>
          <a href="{$item-link}">
            <xsl:value-of select="$item-link" />
          </a>
        </td>
      </xsl:if>
    </tr>
  </xsl:template>
</xsl:stylesheet>

Permalink
by
at 15:47
Comments (1)
Trackbacks (0)

2006年11月01日

XMLファイルをロードし表示するサンプル

XMLファイルをロードし表示するサンプルをうさのJavaScript講座サンプル集12に追加しました。
あたためてきたXML関連サンプル（もう何年もたっちゃっていつのまにかActiveXのよびだすObject名変わってましたが（汗））です。
以前ActiveXサンプルで一瞬だけ公開していたのですが、今日現在での動作確認をして再度整理してみました。FirefoxとOpera、IEで確認しています。7年くらい前からシステム屋さんやってたころ以来なんでもXMLでしたが、Webの世界もRSSやWebService、AjaxをはじめとしてなんでもXMLがわからないと・・・という時代なんでしょうか。うさは個人的にXML大好きです。最近システム屋さんの仕事でXPathと久し振りに格闘していましたが楽しくってしょーがない。ｗｗｗ。とまぁ、そんな話はおいといて、このブログのRSSのItemを読むサンプルをここで紹介してみます。channelの下にあるitem内のtitleとlinkのValueですネ。名付けて「プチ★ローカルRSSリーダー」♪

ソースはこちら↓

<script language="javascript">
<!--
// javascript by ＠うさ http://usagi-js.com/
var xmlDocument;
var fileName = "index.xml";
//読み込みスタート
function ViewTitle()
{
	if (document.implementation.createDocument)
	{
		xmlDocument = document.implementation.createDocument("", "sample", null);
		xmlDocument.onload = readXml;
		xmlDocument.load(fileName);
	}
	else //IE
	{
		xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
		xmlDocument.async = false;
		xmlDocument.load(fileName);
		readXml();		
	}
	
}
//ロード時読み込み関数
function readXml()
{
	var outString = "";
	var objItems = xmlDocument.getElementsByTagName("item");
　　　　　　　//とりあえず５つにしておきます。すべてのときは、objItems.lengthまでLoopしてください。
	for (loop = 0; loop < 5; loop++)
	{
		var valueTitle = objItems[loop].getElementsByTagName("title");
		var valueLink = objItems[loop].getElementsByTagName("link");
		outString += "<br><b>アイテム" + (loop+1) + "つめ</b><br>";
		outString += valueTitle[0].childNodes.item(0).nodeValue + "<br>";
		outString += "<a href='" + valueLink[0].childNodes.item(0).nodeValue + "'>続きを読む</a><br>";
	}
	ShowValue(outString);
}
//表示
function ShowValue(textValue)
{
	document.getElementById("titleValue").innerHTML = textValue;
}
-->
</script>

Permalink
by
at 23:23
Comments (0)
Trackbacks (1)

2006年10月24日

条件式？：

こんにちは。うさのJavaScript講座のReferenceの場所に、演算子、式、変数、オブジェクトの解説ページを復旧いたしましたのでお知らせいたします。
この中に登場する条件式、？：は、以前質問掲示板であがっていたTopicsでもあったので、2003年11月に内容を更新しています。今からちょうど3年も前になっちゃうんですね。（゜゜）遠い目
さて、この、条件式　？　TRUEの場合の処理　：　FALSEの場合の処理
かなりお勧めなのでぜひご利用ください。なにがおすすめって、書かなくちゃいけないコード量が減る！それだけですけどすごいことです。ハイ。
ページに記載されているサンプルコードとは別に、こちらにはさらに短縮版、そしてMovableTypeで動いているコードをもういっこ書いておきますネ。おためしくださいませ。

ソースはこちら↓

Permalink
by
at 18:56
Comments (0)
Trackbacks (0)

2006年10月23日

マウスオーバーで指定した場所の色が変化する

マウスオーバーイベントで画像が切り替わるっていうのはよく見ますが、単純に色が変化するのもありですよね。ということで、今回はサンプル集3の30をご紹介します。
マウスが上にくると、Spanタグ内の色を変えます。一色ぢゃつまらないので、いろんな色を配列に入れて、タイマーでクルクル回してみてます。
ぜひお試しくださいませ♪

ここの→色がかわります♪
マウスを当ててね！

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
var strColor = new Array("#ff0000","#00cc00","#0000ff","#990099","#999999","#ff80c0","#0080ff","#ff8000"); 
var nLoop = 0;
var nTimer;
function StartColorChange()
{
	clearTimeout(nTimer);
	if (document.getElementById)
	{
		nTimer = setInterval("ChangeColor()", 500);	//変化するスピードの変更はここで。
	}
}
function ChangeColor()
{
	document.getElementById("changeColorArea").style.color=strColor[nLoop];
	//次の準備
	if (nLoop > strColor.length-1)
	{
		nLoop = 0;
		clearTimeout(nTimer);
		return;
	}
	else
	{
		nLoop++;
	}
}
//-->
</script>
<!--以下HTML部です-->
ここの→<span id="changeColorArea">色</span>がかわります♪<BR>
<a href="リンク先" onMouseOver="StartColorChange()" name="lnkMouse">マウスを当ててね！</a>

Permalink
by
at 22:18
Comments (0)
Trackbacks (0)

2006年10月13日

ラジオボタンでテキストボックスを表示・非表示

先週のダウンロードランキング上位にあったものから一つご紹介したいと思います。
このブログのサンプルにも出てくる表示・非表示系ですが、ＤＩＶタグを利用したものがほとんどです。でも！今回ご紹介するのは、ＤＩＶタグではなくとも、スタイルのVisibility値を変更することには変わらない、ということもふまえたForm内でのテキストボックスをラジオボタンで表示・非表示切り替えするサンプルです。
うさのJavaScript講座内サンプルでは、サンプル集4-21にてダウンロード可能となっております。
このサンプルでは表示関数と非表示関数を分離して記述していますが、以前の記事のイメージをDIVで表示・非表示と同様、現在の状態をフラグで保持し切り替えるタイプにするとひとつの関数で処理を行うことも可能です。

毎度の記述になってしまいますが、古いブラウザなど一部のブラウザではFormの指定方法が異なります。サンプル集４・フォーム関連のサンプルをガサガサ見てみてくださいませ。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
function Show()
{
	//一部のブラウザでは見れない場合があります。必要に応じてここにブラウザ判定を入れてください。
	document.frmForm.targetTextBox.style.visibility="visible";
                //ブログで公開しているのはこちら↓
　　　　　　　//document.getElementById('targetTextBox').style.visibility="visible";
}
function Hide()
{
	//一部のブラウザでは見れない場合があります。必要に応じてここにブラウザ判定を入れてください。
	document.frmForm.targetTextBox.style.visibility="hidden";
                //ブログで公開しているのはこちら↓
　　　　　　　//document.getElementById('targetTextBox').style.visibility="hidden";
}
//-->
</script>
<!--以下HTML部です-->
<FORM name="frmForm">
<INPUT type="radio" name="rdoSample" value="1" checked onClick="Show()">表示 <INPUT type="radio" name="rdoSample" value="0" onClick="Hide()">非表示
<INPUT size="20" type="text" name="targetTextBox" value="テキストボックス" onclick="Show()"></FORM>

Permalink
by
at 05:51
Comments (0)
Trackbacks (0)

2006年10月11日

Movable TypeにJSファイルを置く方法

こんにちは。＠うさです。
今回は視点を変えてこのブログでもお世話になっているMTことMovable Typeで外部JSファイルを置いて遊んでみようと思います。
↓クリックすると、MT内に置かれたJSファイルが呼び出されます。

では、はじめにJSファイルを作成する方法です。もちろんJSファイルをお手持ちのエディタで作成してFTPで送ってしまうのも手ですが、せっかくですのでMT画面で作成してみることにしてみます。

まずは、環境設定のテンプレートから新規作成を行います。(図１)

次に、テンプレート名と出力ファイル名を記述します。ここで、出力ファイル名は、sample.jsのように拡張子に気をつけてみてください。(図2)

テンプレートの内容には、JS内部コードを記述し、保存します。
これで呼び出される側のスタンバイはOKです。

では呼び出す側、すなわち各アーカイブテンプレートを含むテンプレートから、JSファイルはココだよ、と宣言してあげる必要がありますので、

というように場所を指定してあげてください。
(ここではシングルクオートにしてますが、ダブルクオートで結構です。)

それではscriptタグで宣言の入っているテンプレートファイルで呼び出してみてください。

図1

図2
今ではJSファイルを外部ファイルにするのが主流ですが、外部ファイル化の良いところは、共通関数などどのファイルからもアクセスできることによって使いまわせることが最大のメリット、と言って過言ではないでしょうか。
是非お試しくださいませ♪

Movable TypeにJSファイルを置く方法の続きを読む

Permalink
by
at 04:03
Comments (0)
Trackbacks (0)

2006年10月04日

イメージでdivの表示・非表示を切り替える

今回は、サンプルでもよくDLされている、イメージでdivの表示・非表示を切り替える方法をこちらにはってみます。
イメージをクリックすると指定しているDiv内（ここではid指定）の表示状態をDivタグスタイル属性を変更し、非表示にしたり表示に戻したりしています。
このブログTOPの左下の「サンプルブログパーツ」にも適応してみました。こんな感じで利用するのも一つの手かもしれませんネ。
なお、ネスケの古いヴァージョンなどでは、getElementByIdが利用できませんのでdocument.layers["div名"]で呼び出してくださいね。他のヴァージョンとの互換性など、レイヤー全般に関するサンプルはうさのJavaScript講座のサンプル集８でご紹介しております。

←クリックしてみてネ♪

この部分がDIV内です。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
var currentViewOnBody = true;
function ViewPartsOnBody(layerName)
{
 if (currentViewOnBody )
 {	
   //非表示
   document.getElementById(layerName).style.visibility="hidden";
   document.getElementById('imageArrowOnBody').src="http://usagi-js.com/images/arrowdown.gif";
   currentViewOnBody = false;
 }
 else
 {
   //表示
   document.getElementById(layerName).style.visibility="visible";
   document.getElementById('imageArrowOnBody').src="http://usagi-js.com/images/arrowup.gif";
   currentViewOnBody = true;
 }	
}
//-->
</script>
<!--以下HTML部です-->
<img id="imageArrowOnBody" src="http://usagi-js.com/images/arrowup.gif" border="0" onClick="javascript:ViewPartsOnBody('samplePartsOnBody')" style="cursor:hand">←クリックしてみてネ♪
   <div id="samplePartsOnBody">
<font color="blue">この部分がDIV内です。</font></div>

Permalink
by
at 23:30
Comments (2)
Trackbacks (1)

2006年10月02日

id値をテキストボックスに表示

週末ふらっと海外で潜ってまいりました。（実はダイブマスターだったりするうさです。）
普段よくボーイング747に乗るのですが、今回は757。行きはエコノミー（コーチ）で帰りはビジネスだったので、その座席配列をマウスイベントで表現してみることにします。

サンプルでは、テキストにAタグを貼り、そのid値をテキストボックスに表示させています。AタグでなくてDIVタグなどでも動作します。ただし、テキストボックスに表示する場合、特に古いヴァージョンのブラウザなどgetElementById関数を利用できないブラウザもありますので、その場合は、"document.フォーム名.テキストボックス名"にてご利用くださいませ。フォームに関するサンプルは、うさのJavaScript講座のサンプル集４に入っています。

■ ■　 ■ ■

■ ■ ■　 ■ ■ ■

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
//テキストボックスの値をセットしています。マウスがはずれたときに呼び出されています。
function ShowDescription(content)
{
	document.getElementById('sampleDescription').value = content.id;
}
//テキストボックスの値をなしにしています。マウスがはずれたときに呼び出されています。
function EraseDescription()
{
	document.getElementById('sampleDescription').value = "";
}
//-->
</script>
<!--以下HTML部です-->
<a href="#" id="Seat Coach A" onmouseover="ShowDescription(this)" onmouseout="EraseDescription()"><font color="red">■</font></a>
<input id="sampleDescription" type="text" name="sampleDescription" size="20" readonly>

Permalink
by
at 23:25
Comments (0)
Trackbacks (0)

2006年09月21日

本日日付を画像で表示☆サンプル集１－６９を追加しました

本日日付を画像で表示☆サンプル集１－６９を追加しました。
もともとサンプル集１－７に入っていたのですが、最近のブラウザではgetYearでなくgetFullYearで年度を取得するので、その1行を変更したものです。サンプルはそのままHTML/XHTML内部にも記述できますし、JSファイルにしていただいても結構です。ご自由にカスタマイズしてくださいませ。
ブログにももちろん使えますのでご利用くださいね♪

うさのJavaScript講座・サンプル集1-69をこのページに貼り付けています。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------

	//変数宣言
	var dtToday = new Date;
	var strYear;
	var strMonth;
	var strDate;
	//０から９までの画像を用意してください。
	//画像のURLを宣言します。
	var strPicture = new Array("../images/number/orange0_on.gif",
		"../images/number/orange1_on.gif",
		"../images/number/orange2_on.gif",
		"../images/number/orange3_on.gif",
		"../images/number/orange4_on.gif",
		"../images/number/orange5_on.gif",
		"../images/number/orange6_on.gif",
		"../images/number/orange7_on.gif",
		"../images/number/orange8_on.gif",
		"../images/number/orange9_on.gif");

	//年月日を取得
	strYear = dtToday.getFullYear();
	strMonth = dtToday.getMonth() + 1;
	strDate = dtToday.getDate();

	//桁数を整理します
	if (strMonth < 10)
	{
		strMonth = "0" + strMonth;
	}
	if (strDate < 10)
	{
		strDate = "0" + strDate;
	}

	//数字に画像を当てるための準備です。
	var imgYear, imgMonth, imgDate;
	imgYear = strYear.toString();
	imgMonth = strMonth.toString();
	imgDate = strDate.toString();

	//ここから表示
	document.write("<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+"<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+"<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+"<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+"年<br>");
	document.write("<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+"<img src='"+strPicture[imgMonth.substring(1,2)]+"'>"+"月");
	document.write("<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+"<img src='"+strPicture[imgDate.substring(1,2)]+"'>"+"日");
//-->
</script>

Permalink
by
at 02:48
Comments (0)
Trackbacks (0)

2006年09月05日

ブログにもJavaScriptを♪ おみくじ編

こんにちは。

ブログでももちろんJavaScriptが使えるということで、サンプル集の一部からブログに貼り付けてお送りします。
今回は本日サンプルを復旧させましたサンプルの中から、ここにおみくじをはってみました。サンプルでは投函本文にありますが、左や右のブログパーツ部分にいかがでしょうか？Script内部は配列になっていますのでいくつでも画像を準備していただけます。
おためしあれ♪

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
function CalStart()
{
	//画像を用意していれておきます。
	var arrImage = new Array("http://usagi-js.com/sample/images/omikuji/daikichi.gif",
			"http://usagi-js.com/sample/images/omikuji/kichi.gif",
			"http://usagi-js.com/sample/images/omikuji/chuukichi.gif")
	//処理スタート
	nTemp = Math.round(Math.random()*(arrImage.length - 1));
	document.getElementById('imageOmikuji').src = arrImage[nTemp];
}
//-->
</script>
<!--以下HTML部です-->
<INPUT type="button" name="buttonOmikuji" value="ぽちっ" onClick="javascript:CalStart()"><br>
<img src="http://usagi-js.com/sample/images/omikuji/blank.gif" name="imageOmikuji" border="0">

ブログにもJavaScriptを♪ おみくじ編の続きを読む

Permalink
by
at 03:20
Comments (0)
Trackbacks (0)

うさのJavaScript講座 - Blog館 -

このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪

Category Archives

Archives

カウントダウンスクリプト♪

Windowsカラーダイアログで選択した色を反映

画像をウィンドウサイズにあわせてスライド

XMLとXSLTをくっつけるJavaScriptサンプル

XMLファイルをロードし表示するサンプル

条件式？：

マウスオーバーで指定した場所の色が変化する

ラジオボタンでテキストボックスを表示・非表示

Movable TypeにJSファイルを置く方法

イメージでdivの表示・非表示を切り替える

id値をテキストボックスに表示

本日日付を画像で表示☆サンプル集１－６９を追加しました

ブログにもJavaScriptを♪ おみくじ編

Feed

Recent Entries

Powered by

copyright (c) ＠うさ

このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪

Search

Category Archives

Feed

Recent Entries

Powered by

copyright (c) ＠うさ