2014-10-30

2014-10-30

状況に応じた処理Add Star

JavaScript

 

 

平日・休日を区別して表示

  • DateオブジェクトのgetDay()メソッドを使う
  • 日曜日「0」、月曜日「1」、火曜日「2」、水曜日「3」、木曜日「4」、金曜日「5」、土曜日「6」

　wday.jpg　　　　hday.jpg

f:id:web-0818:20140922021629j:image　f:id:web-0818:20140922021630j:image


<script>
var d = newDate();
var day = d.getDay();
if(day === 0){
document.write('<img src="img/hday.jpg">');
}else{
document.write('<img src="img/wday.jpg">');
}
</script>

条件が成り立つ場合の処理とそれ以外の処理

 

 

if( 日付が日曜日である ) {

　　休日の画像を表示する

} else {

　　平日の画像を表示する

}

 

 


日時によって違う処理をする

  • 状況に応じて処理をする

午前と午後
  • 12時前か後かを判別

<script>
var d = newDate();
var h = d.getHours();

if(h <= 12){
document.write('AM');
}else{
document.write('PM');
}
</script>

時間によってメッセージを変更する
<script>
var today;
var hour;
  today = newDate();
  hour = today.getHours();

if(hour < 12){
document.write('<img src="img/morning.jpg">');
}elseif(hour < 18){
document.write('<img src="img/afternoon.jpg">');
}elseif(hour < 24){
document.write('<img src="img/evening.jpg">');
}
</script>

土日と平日
  • switch文の場合
  • if～else文の場合

<script>
var d = newDate();
var day = d.getDay();
    console.log(day);
switch(day){
case0:
case6: 
document.write('<img src="img/hday.jpg">');
break;
default:
document.write('<img src="img/wday.jpg">');
}
</script>


<script>
var d = newDate();
var day = d.getDay();
    console.log(day);
if(day === 0){
document.write('<img src="img/hday.jpg">');
}else{
document.write('<img src="img/wday.jpg">');
}
</script>

オープンとクローズを区別して表示
<script>
var d = newDate();
var h = d.getHours();

if(h >= 9 && h < 17){
document.writeln('OPEN');
}else{
document.writeln('CLOSED');
}
</script>

Mathオブジェクト

  • Mathオブジェクトは、さまざまな計算機能を提供するオブジェクトです

 

メソッド名説明
ceil 小数点以下の値を切り上げた結果を返す
floor 小数点以下の値を切り捨てた結果を返す
round 小数点以下の値を四捨五入した結果を返す

 


《Mathオブジェクトのメソッド》

 

 

Math . メソッド名（ 数値 ）;

 

 



 

f:id:web-0127:20140408114247j:image　f:id:web-0127:20140408114246j:image　f:id:web-0127:20140408114245j:image　f:id:web-0127:20140408114244j:image　f:id:web-0127:20140408114243j:image　f:id:web-0127:20140408114242j:image

 



<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>さいころの目をボタンで変更</title>
<script>
function dice(){
var r = Math.floor(Math.random()*6 + 1);
console.log(r);

document.dimg.src= 'img/d' + r + '.jpg';
}
</script>
</head>
<body>
<p><imgsrc="img/d1.jpg"name="dimg"></p>
<p><buttononclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>

画像名が、整数化した数値で取得できない場合
  • 「one.jpg」「two.jpg」「three.jpg」「four.jpg」「five.jpg」「six.jpg」とした場合を記述しなさい

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>さいころの目</title>
<script>
var sai = newArray('one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg', 'six.jpg');

function dice(){
var r = Math.floor(Math.random()*sai.length);
console.log(r);

document.dimg.src= 'img/' + sai[r];
console.log(sai[r]);
}
</script>
</head>
<body>
<p><imgsrc="img/d1.jpg"name="dimg"></p>
<p><buttononclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>


 

偶数の目だけを表示

 

<script>
for(var i=1; i<=6; i++){
if(i % 2 === 0){
document.write('<img src="img/d' + i + '.jpg">');
}
}
</script>


 

奇数の目だけを表示

 

<script>
for(var i=1; i<=6; i++){
if(i % 2 === 1){
document.write('<img src="img/d' + i + '.jpg">');
}
}
</script>

配列を使って見出しを表示

<script>
var str = ['Welcome', 'Hello', 'How are you?'];
var r = Math.floor(Math.random() * 3);
document.write(str[r]);
</script>

f:id:web-0818:20140922031921p:image