幕開けに運試しのプログラミングに挑戦します。０から９までの数字が連続表示されます。たとえば、’7’を出すことを念じ、ころあいを見計らって’確定’ボタンをクリックします。’7’が出たら今日はついていると考え、そうでなければ、そこそこの一日と思って業務に励みましょう。
【性格診断】「0～9」数字を選ぶだけであなたにぴったりの結婚相手が分かるでは選んだ数字で結婚運を占っています。興味のある方は挑戦してください。
それでは運試しをどうぞ！
確定をクリックして好みの数字を表示させることができます。
次のコードをコピー＆ペーストし、Fortune-01.htmlファイルを作成します。IE8、FIREFOX、OPERA12、SAFARI6、CHROMEなどの新しいブラウザが動作状態ならば、保存したFortune-01.htmlファイルにカーソルを当てクリックすれば実行に移ります。
<!DOCTYPE html> <!-- 運試し1 -->
<html> <!-- Fortune-01 -->
<head>
<script type="text/javascript">// <![CDATA[
var i = 0; // Count
var x = 10; // x-position
var y = 100; // y-position
var txt ="０１２３４５６７８９";
var timerid = setInterval('draw()', 50);
var len = txt.length;
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.font = "96px Arial"; //フォントにArial,96pxを指定
if (i >= len) i = 0; //繰り返し条件
ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
var chr = txt.charAt(i); //表示文字を抽出
ctx.fillStyle = 'violet'; //塗り潰し色を緑に
ctx.fillText(chr, x, y); //テキストを塗り潰しで描画
++i;
}
}
function saveValue(){ //確定、timeridが1以上で有効
clearInterval(timerid);
timerid = 0;
} // ]]>
</script>
<style type="text/css">
canvas { border: 1px solid #999; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="560" height="330"></canvas>
<input type="button" onClick="saveValue()" value="確定" />
</body>
</html>
関連ページ
➊Webプログラミング書法
➋あみだくじ作成法