★ナンバーズ3予想 [ jsサンプル ]
　URL:http://web-parts.itland.ezic.info/sample-parts/numbers3/

[html title=’HTML’]
< !DOCTYPE html>

ナンバーズ3予想 [ jsサンプル ]

主な利用機能

• 数字のランダム発生
• 処理のスリープ

[/html]

[JavaScript title=’JavaScript’]
// 数字3ケタを時間差を付けてhtmlへ返す
function getNumber(){

// 数値をランダムで発生させる
var num1 = Math.floor( Math.random() * 10 ); //第1数字
var num2 = Math.floor( Math.random() * 10 ); //第2数字
var num3 = Math.floor( Math.random() * 10 ); //第3数字

// 数値型を文字列型に変換
// コレをしないと、以降の処理で文字列連結じゃなくて数字加算されるから
num1 += ”;
num2 += ”;
num3 += ”;

// 実行した際に最初に表示させるメッセージ
document.getElementById(‘sample_id’).style.fontSize = “12pt”;
document.getElementById(‘sample_id’).innerHTML = ‘ナンバーズ3チェック！’; //

// 1つずつ数字を表示させる
setTimeout( function() {
str = num1;
document.getElementById(‘sample_id’).innerHTML = str;
//document.getElementById(‘sample_id’).style.font=”italic bold 20px arial,serif”;
document.getElementById(‘sample_id’).style.fontSize = “20pt”;
}, 1000);

setTimeout( function() {
str = num1 + num2;
document.getElementById(‘sample_id’).innerHTML = str;
document.getElementById(‘sample_id’).style.fontSize = “20pt”;
}, 2500);

setTimeout( function() {
str = num1 + num2 + num3;
document.getElementById(‘sample_id’).innerHTML = str;
document.getElementById(‘sample_id’).style.fontSize = “20pt”;
}, 4000);

}
[/JavaScript]

[css title=’StyleSheet’]
@charset “utf8”;

/************************************************/
body{
background-color: #fff;
margin: 0px 0px 0px 20px;
font-family: Arial, “ＭＳ ゴシック”, Osaka;
/*background-image: url(“../img/sample.png”);*/
}

/************************************************/
#sample_id{
font-weight: bold;
}
[/css]