VB.NET-TIPS などプログラミングについて

- 2025/03/13
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2021/12/27

JavaScript JQuery crypto-jsを使って暗号化と復号を行う方法について

crypto-js を使って文字列（データ）を暗号化、及び復号化を行う方法を記したいと思います。

このモジュールの中の AES(Advanced Encryption Standard) の機能を使って処理を行います。

AES とはなにかと言いますと Advanced Encryption Standard の略で、無線LANなどの通信データの暗号化に用いられるアルゴリズムの様です。
通信の送信側と受信側で、同じ暗号鍵を用いて暗号化と復号を行います。

crypto-js は以下のサイトにありますので、リンクをソースに貼れば参照できます。

⇒https://cdnjs.com/libraries/crypto-js

さて実際に crypto-js を使う例を示します。
暗号化するには CryptoJS.AES.encrypt 、復号化するには CryptoJS.AES.decrypt メソッドを使います。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	var src = "12345ABCDE";
	var des = "";

	//暗号化キー:"testkey"を用いて暗号化
    des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('Source :' + src);
    console.log('Crypto :' + des);

	//暗号化キー:"testkey"を用いて復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
    console.log('Decrypt:' + decrypted);
}
</script>
</head>
<body>
    <h2>test crypto-js 1</h2>
    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。

source:12345ABCDE
Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0=
decrypted:31323334354142434445

復号化した文字列をよく見ると HEX文字列となっています。
このままでは使えないので crypto-js がもつ uft8 用のエンコーダで文字列にしてやります。
上のソースに1行追加して以下の様になります。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	var src = "12345ABCDE";
	var des = "";

	//暗号化キー:"testkey"を用いて暗号化
    des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('Source :' + src);
    console.log('Crypto :' + des);

	//暗号化キー:"testkey"を用いて復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
    console.log('Decrypt:' + decrypted);
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
}
</script>
</head>
<body>
    <h2>test crypto-js 1</h2>
    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。

source:12345ABCDE
Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0=
decrypted:31323334354142434445
utf8     :12345ABCDE

■オブジェクトを暗号化・復号化の処理

上記の例では文字列を暗号化・復号化することは出来ました。そこでこの処理を拡張して、オブジェクトデータについても暗号化・復号化させてみます。

オブジェクトを先ず JSON 文字列として作成し、それを暗号化します。復号の場合には逆の考えですので、復号化された JSON 文字列をオブジェクトとして戻します。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	//オブジェクト宣言
	var obj = {
		data1: "12345ABCDE",
		data2: "あいうえお",
		data3: 12345
	}

	//JSON文字列に変換
    var src = JSON.stringify(obj);
	//暗号化
    var des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('source:' + src);
    console.log('Crypto:' + des);

	//復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
	//UTF-8文字列変換
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
	//オブジェクトに戻す
	var objDes = JSON.parse(decrypt);
	console.log('obj.data1:' + objDes.data1);
	console.log('obj.data2:' + objDes.data2);
	console.log('obj.data3:' + objDes.data3);
}
</script>
</head>
<body>
    <h2>test crypto-js 3</h2>

    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。
確かにオブジェクトが暗号化されて、その後復号化しオブジェクトの各項目を参照できることが分かります。

source:{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
Crypto:U2FsdGVkX19pPVoeRzc/ZjN1jKNIzi13I543cTbiNhMQ4Q3Tnn6AD0GILW1a4LCoN3b8Zh5qhbCul1RTymiwPMZFkiIGlweGu0vukHq2YD8=
utf8     :{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
obj.data1:12345ABCDE
obj.data2:あいうえお
obj.data3:12345

■このページの内容

先ずはオブジェクトの表示・非表示の簡単な例
各種の JQuery メソッド
easing の指定（変化速度）
easing の指定（変化速度）jQuery UI Effect プラグインを導入
フェードイン・アウト処理（コールバック関数の例を含む）

■先ずはオブジェクトの表示・非表示の簡単な例

JQuery メソッドの show, hide を使い div HTMLオブジェクトを表示・非表示の処理を行います。

<html>
<head>
<meta charset="utf-8">
<title>先ずはオブジェクトの表示・非表示の簡単な例</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShow() {
    $("#menu").show();
}
//非表示処理
function fncHide() {
    $("#menu").hide();
}
</script>
</head>
<body>
    <h2>先ずはオブジェクトの表示・非表示の簡単な例</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShow();">表示</button>
    <button onclick="fncHide();">非表示</button>
</body>
</html>

この show, hide には引数が指定でき、表示・非表示にアニメーション的な動きを付加できます。アニメーションと言っても漫画的な動きでは無く、表示していく動作の時間を指定したりして、画面上では連続的な変化が付けられます。

それでは、以下に各種の JQuery メソッドの説明を記します。

■各種の JQuery メソッド

関数	書式	説明
show	.show() .show( duration [, callback] ) .show( [duration] [, easing] [, callback] ) .show( [options] ) duration:フェードするアニメーション時間を指定 easing :アニメーションの変化の種類を指定 callback:アニメーション完了後に実行したい関数を指定 options :duration等をオブジェクトで指定	表示処理を行う
hide	.hide() .hide( duration [, callback] ) .hide( [duration] [, easing] [, callback] ) .hide( [options] ) ※引数は show と同様	非表示処理を行う
toggle	.toggle() .toggle( duration [, callback] ) .toggle( [duration] [, easing] [, callback] ) .toggle( [options] ) ※引数は show と同様	表示・非表示の反転
fadeIn	.fadeIn( duration [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeIn( [options] ) ※引数は show と同様	フェードイン
fadeOut	※書式は fadeIn と同様	フェードアウト
slideUp	※書式は fadeIn と同様	スライドアップ
slideDown	※書式は fadeIn と同様	スライドダウン
slideToggle	※書式は fadeIn と同様	スライドアップ、またはダウン

これらのメソッドはちょっと引数がいろいろあって、複雑にみえますが先ずは duration について説明します。
duration はそのメソッドのアニメーションの時間を指定します。指定する引数は数値型と文字列型があります。
数値型はミリ秒の値の指定で、文字列型は "slow" "fast" の値を指定します。（以下の様な感じです）

//数値型
object.show(200);
object.hide(400);

//文字列型
object.show("slow");	//show(600)の場合と同様
object.hide("fast");	//hide(200)の場合と同様

object.hide();			//hide(400)の場合と同様（デフォルト値）

//ここでの「object」はJQueryオブジェクト

それでは show, hide, toggle を使った例（メニューブロックの表示・非表示）を示します。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide/toggle</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function animateShow() {
    $("#menu").show(400);   	// 表示
}
//非表示処理
function animateHide() {
    $("#menu").hide("slow");	// 非表示
}
//表示・非表示の反転処理
function animateToggle() {
    $("#menu").toggle("fast");	// 表示・非表示
}
</script>
</head>
<body>
    <h2>test show/hide/toggle</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateShow();">show</button>
    <button onclick="animateHide();">hide</button>
    <button onclick="animateToggle();">toggle</button>
</body>
</html>

上の例は、メニューの様なものを表示する div で囲まれた領域を表示・非表示の処理を行います。表示する時には下方向にするすると下がってくる感じで表示され、隠す時には上方向にさっと上がる感じで消えていきます。

■easing の指定（変化速度）

easing はHTMLオブジェクトの変化の種別を指定します。 linear を指定すると直線的に変化し swing を指定すると最初ゆっくり動きだし最後の方は早く変化します。尚、省略した場合は swing になります。
jQuery UI Effect プラグインを導入することでその他のイーシングを用いることが可能な様です。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide easing</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShowSwing() {
    $("#menu").show("slow", "swing");		// swing 表示
}
function fncShowLinear() {
    $("#menu").show("slow", "linear");		// linear 表示
}
//非表示処理
function fncHideSwing() {
    $("#menu").hide("slow", "swing");   	// swing 非表示
}
function fncHideLinear() {
    $("#menu").hide("slow", "linear");   	// linear 非表示
}
</script>
</head>
<body>
    <h2>test show/hide easing</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShowSwing();">show swing</button>
    <button onclick="fncHideSwing();">hide swing</button>
    <br />
    <button onclick="fncShowLinear();">show linear</button>
    <button onclick="fncHideLinear();">hide linear</button>
</body>
</html>

■easing の指定（変化速度）jQuery UI Effect プラグインを導入

jQuery UI Effect プラグインを導入した例を以下に示します。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide easing</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShowEaseInQuad() {
    $("#menu").show("slow", "easeInQuad");		// easeInQuad 表示
}
function fncShowEaseInElastic() {
    $("#menu").show("slow", "easeInElastic");	// easeInElastic 表示
}
//非表示処理
function fncHideEaseInOutQuad() {
    $("#menu").hide("slow", "easeInOutQuad");   // easeInOutQuad 非表示
}
function fncHideEaseInCubic() {
    $("#menu").hide("slow", "easeInCubic");   	// easeInCubic 非表示
}
</script>
</head>
<body>
    <h2>test show/hide easing</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShowEaseInQuad();">show easeInQuad</button>
    <button onclick="fncHideEaseInOutQuad();">hide easeInOutQuad</button>
    <br />
    <button onclick="fncShowEaseInElastic();">show easeInElastic</button>
    <button onclick="fncHideEaseInCubic();">hide easeInCubic</button>
</body>
</html>

easing として指定できるパラメータは以下のものがあります。動作がどの様になるかは詳しく調べていませんが、後々調べたいと思います。

linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

■フェードイン・アウト処理（コールバック関数の例を含む）

フェードイン、フェードアウト処理の例を以下に示します。フェードインとは徐々に表示が現れて完全に見える様になる処理であり、フェードアウトとは徐々に表示が薄れていき最後に完全に見えなくなる処理です。
フェードイン、フェードアウトには処理時間が長くないと実感できませんので fadeIn, fadeOut, fadeToggle メソッドの第一引数には「2000」（2秒）と指定します。

また fadeToggle メソッドにはコールバック関数の指定をしています。コールバック関数はメソッドの処理が終わった時点で呼ばれます。今回の関数は div 領域が表示・非表示の状態をアラートしています。

<html>
<head>
<meta charset="utf-8">
<title>test fadeIn/fadeOut/fadeToggle</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncFadeIn() {
    $("#menu").fadeIn(2000, "swing");	//2秒でフェードイン
}
//非表示処理
function fncFadeOut() {
    $("#menu").fadeOut(2000, "linear");	//2秒でフェードアウト
}
//表示・非表示反転処理
function fncFadeToggle() {
    $("#menu").fadeToggle(2000, "linear", fncCallback);
}
//fadeToggle 処理後に呼ばれる関数宣言
function fncCallback() {
	if ($("#menu").css("display") == "block") {
		alert("表示");
	} else {
		alert("非表示");
	}
}
</script>
</head>
<body>
    <h2>test fadeIn/fadeOut/fadeToggle</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncFadeIn();">fadeIn swing</button>
    <button onclick="fncFadeOut();">fadeOut linear</button>
    <button onclick="fncFadeToggle();">fadeToggle linear</button>
</body>
</html>

関数	書式	説明
setTimeout	id = setTimeout(func, timeval) id :タイムアウト処理の識別ID func :タイムアウト時に実行する関数 timeval:タイムアウト時間（ミリ秒）	タイムアウト時の関数設定を行う
setInterval	id = setInterval(func, timeval) id :タイマー処理の識別ID func :タイマー時間毎に実行する関数 timeval:タイマー時間（ミリ秒）	タイマー処理の関数設定を行う
clearTimeout	clearTimeout(id) id :タイムアウト処理の識別ID	タイムアウト処理を中止するここで指定される id は setTimeout で返されたものを指定
clearInterval	clearInterval(id) id :タイマー処理の識別ID	タイマー処理を中止するここで指定される id は setInterval で返されたものを指定

■指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）

以下の例では「タイマー開始」 button タグのクリックイベントでタイムアウト処理を行う関数 StartTimeout を呼出しています。
StartTimeout ではタイムアウト関数である TimeoutProc を宣言してそれを setTimeout に渡すことでタイムアウト処理が開始されます。
setTimeout のタイムアウト時間はミリ秒での指定なので、10秒の場合は1000倍した10000を指定します。

「タイマー開始」をクリックするとボタンが押下不可になり、5秒後に「タイムアウト!」のメッセージが表示され、「タイマー開始」が押下可能となります。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 1</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
</body>
<script type="text/javascript">
function StartTimeout() {
	//ボタン押下不可設定
	$("#StartButton").attr("disabled", true);
    //タイムアウト関数宣言
    var TimeoutProc = function() {
        alert("タイムアウト!");
		//ボタン押下許可設定
		$("#StartButton").attr("disabled", false);
    };
    var timeoutVal = 5 * 1000; //5秒
    //タイムアウトの設定
    setTimeout(TimeoutProc, timeoutVal);
}
</script>
</html>

■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例

上記の例に「タイマー停止」ボタンを設置し「タイマー開始」で設定されたタイムアウト処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setTimeout でタイムアウト関数を設定しますが、戻り値として返されるタイムアウトidを変数に退避します。

「タイマー停止」で呼ばれる StopTimeout ではタイムアウトidを clearTimeout に渡してタイムアウト処理を中止します。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 2</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//開始ボタン不可、停止ボタン許可設定
	$("#StartButton").attr("disabled", true);
	$("#StopButton").attr("disabled", false);
    //タイムアウト関数宣言
    var TimeoutProc = function() {
        alert("タイムアウト!");
		//開始ボタン許可、停止ボタン不可設定
		$("#StartButton").attr("disabled", false);
		$("#StopButton").attr("disabled", true);
    };
    var timeoutVal = 5 * 1000; //5秒
    //タイムアウトの設定
    id = setTimeout(TimeoutProc, timeoutVal);
}
//タイマー停止
function StopTimeout() {
    //タイムアウトの停止
    clearTimeout(id);
	//開始ボタン許可、停止ボタン不可設定
	$("#StartButton").attr("disabled", false);
	$("#StopButton").attr("disabled", true);
}
</script>
</html>

■一定時間ごとに処理を繰り返す簡単な例

一定時間ごとに繰り返す処理と言えば、時計の様に時刻を表示する処理があります。
これを実現するため「タイマー開始」ボタンを設置し、それをクリックすることで1秒毎に現在時刻を表示する例を示します。

以下の例では「タイマー開始」ボタンのクリックイベントでタイマー処理を行う関数 setInterval を呼出しています。 StartTimeout ではタイマー関数である TimeProc を宣言してそれを setInterval に渡すことでタイムアウト処理が開始されます。

このソースでは一旦「タイマー開始」ボタンのクリックすると止める手立てがありませんので、ずっと時刻表示が続きます。（なおブラウザの再読込で最初の状態になりますが...）

<html>
<head>
<meta charset="utf-8">
<title>Timer - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 3</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<br /><br />
	時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//ボタン押下不可設定
	$("#StartButton").attr("disabled", true);
    //タイマー関数宣言
    var TimeProc = function() {
		//Dateオブジェクトを作成する
		var dateobj = new Date();
		//時刻表示
		$("#ptime").text(dateobj.toTimeString());
    };
    var timeoutVal = 1 * 1000; //1秒
    //タイマーの設定
    id = setInterval(TimeProc, timeoutVal);
}
</script>
</html>

■一定時間ごとの処理を途中で止める簡単な例

上記の例ではタイマー処理を中断できなかったので「タイマー停止」ボタンを設置し、「タイマー開始」で設定されたタイマー処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setInterval でタイムアウト関数を設定しますが、戻り値として返されるタイマーidを変数に退避します。

「タイマー停止」で呼ばれる StopTimeout ではタイマーidを clearInterval に渡してタイマー処理を中止します。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 4</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 4</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
	<br /><br />
	時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//開始ボタン不可、停止ボタン許可設定
	$("#StartButton").attr("disabled", true);
	$("#StopButton").attr("disabled", false);
    //タイマー関数宣言
    var TimeProc = function() {
		//Dateオブジェクトを作成する
		var dateobj = new Date();
		//時刻表示
		$("#ptime").text(dateobj.toTimeString());
    };
    var timeVal = 1 * 1000;	//1秒
    //タイマーの設定
    id = setInterval(TimeProc, timeVal);
}
//タイマー停止
function StopTimeout() {
    //タイマーの停止
    clearInterval(id);
	//開始ボタン許可、停止ボタン不可設定
	$("#StartButton").attr("disabled", false);
	$("#StopButton").attr("disabled", true);
}
</script>
</html>

ここまでは setInterval や setTimeout の引数としての関数を別の変数で宣言した後で、それぞれの関数に渡していました。その引数のところに無名関数として直接に宣言する方法もありますので、上のソースを変更してみます。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 4 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 4 - 1</h2>
	<button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
	<button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
	<br /><br />
	時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
	//開始ボタン不可、停止ボタン許可設定
	$("#StartButton").attr("disabled", true);
	$("#StopButton").attr("disabled", false);

    var timeVal = 1 * 1000;	//1秒
    //タイマーの設定(関数宣言を共に)
    id = setInterval(function() {
		//Dateオブジェクトを作成する
		var dateobj = new Date();
		//時刻表示
		$("#ptime").text(dateobj.toTimeString());
    }, timeVal);
}
//タイマー停止
function StopTimeout() {
    //タイマーの停止
    clearInterval(id);
	//開始ボタン許可、停止ボタン不可設定
	$("#StartButton").attr("disabled", false);
	$("#StopButton").attr("disabled", true);
}
</script>
</html>

VB.NET-TIPS などプログラミングについて

■オブジェクトを暗号化・復号化の処理

関連する記事

■empty メソッドでの処理

■タグの書き換えで連続的な処理を行う様にする

関連する記事

■このページの内容

■animate メソッドの書式

■animate メソッドの簡単な例

■CSS プロパティを複数設定する

関連する記事

■このページの内容

■先ずはオブジェクトの表示・非表示の簡単な例

■各種の JQuery メソッド

■easing の指定（変化速度）

■easing の指定（変化速度）jQuery UI Effect プラグインを導入

■フェードイン・アウト処理（コールバック関数の例を含む）

関連する記事

■このページの内容

■指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）

■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例

■一定時間ごとに処理を繰り返す簡単な例

■一定時間ごとの処理を途中で止める簡単な例

関連する記事