JavaScript習熟度テスト：6〜10問目 - Webデザインのこと、いろいろ

【問6】現在の時刻（～時～分～秒）を表示させなさい。
習得度確認試験_6問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_6問目</title>
</head>

<body>
<script>
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

document.write( '<h3>現在の時刻は' + ' ' + hours + '時' + ' ' + minutes + '分' + ' ' + seconds + '秒' + ' ' + 'です。</h3>' );
</script>
</body>
</html>

【問7】「月曜日」と「金曜日」が「定休日」、それ以外は「営業中」を表示させなさい。
習得度確認試験_7問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_7問目</title>
</head>

<body>
<script>
var now = new Date();
var day = now.getDay();
var w = [ '日','月','火','水','木','金','土' ];

day = w[ day ];
console.log( day );

if( day === 1 || day === 5 ){
	document.write( '<h1>定休日です。</h1>' );
} else {
	document.write( '<h1>営業中です。</h1>' );
}
</script>
</body>
</html>

【問8】「大吉」「中吉」「小吉」「凶」と、ボタンを押した時にランダムに表示されるおみくじプログラムをDOMの記述を使って作りなさい。
習得度確認試験_8問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_8問目</title>
</head>

<body>
<h2>おみくじ引いてみますか？</h2>
<p><button onClick="omikuji()">引きます</button></p>
<p id="result">あなたの今年の運勢は...</p>
<script>
var rdm = Math.random();

function omikuji() {
if( rdm <= 0.30 ) {
	    document.getElementById( 'result' ).innerHTML = 'おめでとうございます、「大吉」です！';
       } else if( rdm <= 0.60 ) {
	    document.getElementById( 'result' ).innerHTML = 'いいことありそう、「中吉」です。';
       } else if( rdm <= 0.80 ) {
	    document.getElementById( 'result' ).innerHTML = '小さな幸せ、「小吉」です。';
       } else {
	    document.getElementById( 'result' ).innerHTML = 'どんまい、「凶」です。';
       }
}
console.log( rdm );
</script>
</body>
</html>

【問9】５×５までの九九一覧表を、write()メソッドで記述しなさい。
習得度確認試験_9問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_9問目</title>
<style>
table {
	border-collapse: collapse;
	border: 1px solid #666;
}
th,td {
	padding: 7px;
	width: 35px;
	border: 1px solid #666;
	text-align: center;
}
th {
	font-weight: bold;
	background: #CCC;
}
</style>
</head>

<body>
<h3>５×５までの九九一覧表</h3>
<table>
<tr>
<th>　</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
</tr>

<script>
//計算：横の行
for( var i=1; i<=5; i++ ){
    document.write( '<tr>' );
    document.write( '<th>' + i + '</th>' );

//縦の列の親
for( var j= 1; j<= 5; j++ ){
    document.write( '<td>' + i*j + '</td>' );
    }
    document.write('</tr>');
}
</script>
</table>  <!--閉じる位置間違えがち-->
</body>
</html>

【問10】表示されている画像をクリックの度に、順番（１→２→３→４→５）に表示が変更されるプログラムをDOMの記述を使って作りなさい。
習得度確認試験_10問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_10問目</title>
<style>
html, body, div, h1 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}
/*-----------------------------*/
body {
	font-size: 16px;
	background: #FFF;
}
.imgBox {
	width: 630px;
	margin: 0 auto;
	padding: 50px;
	background: #FFF;
}
h1 {
	margin-bottom: 40px;
	text-align: center;
}
#main {
	margin-top: 50px;
	text-align: center;
	cursor: pointer;
}
</style>
</head>

<body>
<div id="main" onClick="clickChange()"><img src="img/img01.jpg">
</div><!--.main-->

<script>
var fig;
var i = 1;

function clickChange(){
  if( i === 5 ){ //5までいったらループするよ、の命令
    i = 1;
  } else {
    i++;
	
  }
  fig = '<img src="img/img0' + i +'.jpg" alt="">';
  document.getElementById('main').innerHTML = fig;
}
</script>
</body>
</html>