5月21日　授業内容（php(round関数、date関数),jQuery(アコーディオンメニューの復習)）

round関数

イメージフォルダを作成してその中に
「サイコロ」の検索結果 - Webデザインの勉強 1月20日開講クラスフェリカテクニカルアカデミー

このリンク先からサイコロ画像を1〜6をダウンロードして保存する。

f:id:paris1204:20160521194042p:plain

<?php
$rand_num=rand(1,6);//1〜6をランダムで表示するラウンド関数
var_dump($rand_num);
$rand_img='<img src="img/0' . $rand_num . '.jpg" alt="' . $rand_img . '">';
echo 'サイコロの目は' .$rand_img. 'です。';
?>

f:id:paris1204:20160521194059p:plain

<!--//りんご１個350円
//1から１０個買った値段を表示する-->
<?php
$apple_amount=rand(1,10);
$apple=350;
$price=$apple_amount * $apple;

var_dump($price);
echo '350円のりんごを' .$apple_amount. '個買った時の合計代金は' .$price. 'です。';
?>

f:id:paris1204:20160521202511p:plain

<?php
echo'<br><br>おみくじを引く<br>';

$fortune=rand(1,10);
var_dump($fortune);
if($fortune==1){//小さい値から大きい値へかく。前に書いたものは条件文には含まれない
	echo'大大吉';}
	else if($fortune<=3){
	echo'大吉';}
	else if($fortune<=5){
	echo'吉';}
	else if($fortune<=7){
	echo'中吉';}
	else if($fortune<=9){
	echo'小吉';}
	else{
	echo'凶';}
	?>

date関数

f:id:paris1204:20160521203143p:plain

マニュアルを見ながら打とう
PHP: date - Manual

<?php
$nowY=date('Y');
$nowM =date('m');
$nowD=date('d');
$nowW=date('N');
$week=[日,月,火,水,木,金,土,];
$nowW=$week[$nowW];

$nowH=date('G');//２4時間単位（0から23）
var_dump($nowH);
if($nowH<6){
	echo 'おはようございます';}
	else if($nowH<16){
		echo 'こんにちは';}
		else if($nowH<20){echo 'こんばんは';}
		else{echo 'おやすみなさい';}
	echo '<br>';
echo '今日は'.$nowY. '年' .$nowM.'月'.$nowD.'日'.$nowW.'曜日です。';
?>

jQuery(アコーディオンメニューの復習)

f:id:paris1204:20160522010226p:plain

f:id:paris1204:20160522010233p:plain

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	$('.menu>dd:not(:first)').hide();//初めのとこ以外は閉じる
	$('.menu>dt').on('click',function(){
	$('.menu>dd').slideUp();
	if($($(this).next()).css('display') == 'none'){
		
		$(this).next().slideDown();
		}
	});//clickイベントの締め
	});

</script>
<style>
dl{width:500px;
margin:0 auto;}
dt{text-align:center;
background:olive;}


</style>
</head>


<body>
<dl class="menu">
<dt>カテゴリA</dt>
<dd>内容がここに入る</dd>
<dt>カテゴリB</dt>
<dd>内容がここに入る</dd>
<dt>カテゴリC</dt>
<dd>内容がここに入る</dd>
<dt>カテゴリD</dt>
<dd>内容がここに入る</dd>

</dl>
</body>
</html>