WEB、始めました

半年間WEB制作の学校に通います。その記録。

33日目　オブジェクト　new Date new Array Math

何年何月何日何曜日
http://tototo.webcrow.jp/script/0309/youbi.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>何年何月何日何曜日</title>
</head>

<body>
<script>
var n= new Date();
var f= n.getFullYear();
var m= n.getMonth()+1;
var d= n.getDate();

var y= n.getDay();
var w=[ '日', '月', '火', '水', '木', '金', '土'];
y = w[y];
//var num=[ 10, 100, 1000, 10000];  console.log(num[0]);

document.write('<h1>今日は' + f +'年' + m + '月' + d + '日' + y + '曜日です。</h1>' );
</script>
</body>
</html>


new Array

http://tototo.webcrow.jp/script/0309/array01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列を使う</title>
</head>

<body>
<script>
var names = new Array(4);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';

document.write( '<h2>こんにちは' + names[0] + 'さん</h2>' );
document.write( '<h2>こんにちは' + names[2] + 'さん</h2>' );
</script>
</body>
</html>

new Array
for文で全て表示

http://tototo.webcrow.jp/script/0309/array02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列を使うfor</title>
</head>

<body>
<script>
var names = new Array(4);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';

for(var i = 0; i<names.length; i++) {

document.write( '<h2>こんにちは' + names[i] + 'さん</h2>' );
}
</script>
</body>
</html>


Math.random
おみくじをひく

http://tototo.webcrow.jp/script/0309/math_random.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おみくじ</title>
<script>
function omikuji() {

var rdm = Math.random();

if( rdm< 0.25 ) {
  document.write( '<h1>大吉</h1>' );
} else if( rdm<0.5 ) {
  document.write( '<h1>中吉</h1>' );
} else if( rdm<0.75 ) {
  document.write( '<h1>小吉</h1>' );
} else {
  document.write( '<h1>凶</h1>' );
}

}
</script>
</head>

<body>
<h1>おみくじ</h1>
<p>下のボタンをクリックするとおみくじが引けます。</p>
<p><button onclick="omikuji()">おみくじを引く</button></p>

</body>
</html>


Math.random
Math.floor（小数点切り捨て）

http://tototo.webcrow.jp/script/0309/math_random02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>乱数の実験</title>
</head>

<body>
<script>
MAX = 10;  //定数
var rdm;
for( var i=0; i<10; i++)  //( var i=1; i<=10; i++)でもおｋ
{
  rdm = Math.floor( Math.random()*(MAX+1) );   //0.08(=0)とかが出てしまう為１を足している
  console.log( rdm );
  document.write( rdm + '<br>' );
}
</script>
</body>
</html>

Math.random
更新するたびに画像が変わる

http://tototo.webcrow.jp/script/0309/math_random03.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イメージをランダムに表示する</title>
<style>
body {
  text-align: center;
}
img {
  width: 600px;
  height: 400px;
}

</style>
</head>

<body>
<h1>今日のイメージ</h1>
<script>
numOfImg = 4;
var num;
num = Math.floor( Math.random()*numOfImg);  //これだと０～３までの値しかでないので１～４だと計算式に＋１する
console.log( num );
document.write( '<img src ="img/' + num + '.jpg" alt="">' );  //画像の名前が01.jpgだったらimg/0'と入れればおｋ

</script>
</body>
</html>