JavaScript 演習課題1(Q04,Q05)

演習課題

◎Q04　時間による画像変化
※わかりやすいように上部に時間を表示してます。
html↓

<script>
//時間表示
  var now,date;
  now = new Date();
  
  date = now.getFullYear() + '年'
       +(now.getMonth() + 1) + '月'
	   + now.getDate() + '日'
	   + now.getHours() + '時'
	   + now.getMinutes() + '分'
	   + now.getSeconds() + '秒';
  document.write('<h1>',date,'</h1>');
//時間帯による画像変化
  var today;
  var hour;
  today = new Date();
  hour = today.getHours();;
  

  if (hour <12){
	  document.write('<img src="img/' + 'asa' + '.jpg">')
  }else if(hour <16){
	  document.write('<img src="img/' + 'hiru' + '.jpg">')
  }else if(hour <19){
	  document.write('<img src="img/' + 'yuu' + '.jpg">')
  }else if(hour <24){
	  document.write('<img src="img/' + 'yoru' + '.jpg">')
  };
</script>

結果↓


※image placeholderが使っていないし模範解答とだいぶ違ったので模範解答ベースに↓に新しく書いてみました。

//時間表示
  var now,date;
  now = new Date();
  
  date = now.getFullYear() + '年'
       +(now.getMonth() + 1) + '月'
	   + now.getDate() + '日'
	   + now.getHours() + '時'
	   + now.getMinutes() + '分'
	   + now.getSeconds() + '秒';
  document.write('<h1>',date,'</h1>');
  
//時間帯による画像変化
  var today;
  var hour;
  today = new Date();
  hour = today.getHours();;
  
  if(hour <= 6){
	  document.images['change'].src='img/asa.jpg';
  }else if(hour <= 12){
	  document.images['change'].src='img/hiru.jpg';
  }else if(hour <= 18){
	  document.images['change'].src='img/yuu.jpg';
  }else if(hour <= 24){
	  document.images['change'].src='img/yoru.jpg';
  }


◎Q05　ランダム画像表示
html↓

<body>
<h1>ランダム 画像表示</h1>
<script>
  numOfImg = 4;
  var num;
  num = Math.floor(Math.random() * numOfImg)
  document.write('<img src="img/img' + num + '.jpg">');
</script>
</body>

結果↓