開発記録

みさの頑張りを見てください

JavaScriptに書き換えたプログラムたちの話

やあやあ!みさです。

テスト当日にブログを更新するブロガーの鏡です(?)

 

phpで書いてた占い・BMI値計算のアプリをJavaScriptで書き換えたのですがこっちに載せてなかったので載せます。

あっそうそう、MacbookProを購入しまして開発用PCにしてます。

色々見えてますが気にせずスクショ画面をご覧ください。

 

f:id:missamisa3333:20170721011203p:plain

 

f:id:missamisa3333:20170721011155p:plain

 

f:id:missamisa3333:20170721011143p:plain

 

はい、こんな感じです。

以下ソースコードです。

 

↓占い

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>占いページ</title>
<script type=""text/javascript">
<!--
var records=["運勢は◎! 他人に優しくしてみよう","運勢は〇! 新しい発見があるかも","運勢は△! 忘れ物に気を付けて!",
"運勢は×! 何か悪いことが起きるかも","運勢は◎! 新しい出会いがあるかも!","運勢は〇! 外食したら何かいいことがあるかも",
"運勢は△! 会いたくなかった人と再会してしまうかも","運勢は×! たまには気分転換してみよう!",
"運勢は×! 今日あなたの身に危険が…!","運勢は◎! 憧れのあの人と出会えるかも!"]

function kekka(){

var rand = records[ Math.floor( Math.random() * records.length ) ] ;
document.getElementById('output').innerHTML=rand;

}
//-->
</script>
</head>

<body>
<h1>あなたの運勢を占います</h1>
<br>
<img src="teller1.gif">
<br>
<br>
<br>
<br>
<span id="output"></span>
<br><br><br><br>
<input type="button" value="占う" id="jsButtom" onclick="kekka()">

</body>
</html>

 

BMI値計算

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>BMI計算</title>
<script type="text/javascript">
<!--
function keisan(){

var height=document.bmi.height.value/100;
var bmi=document.bmi.weight.value/(height*height);


document.getElementById('output').innerHTML=bmi;

if(bmi<18.5){

var kekka1="痩せ気味です!";
document.getElementById('kekka').innerHTML=kekka1;

}else if(bmi>25){

var kekka2="太り気味です!";
document.getElementById('kekka').innerHTML=kekka2;

}else{

var kekka3="標準です!このままキープしましょう";
document.getElementById('kekka').innerHTML=kekka3;

}

}
//-->
</script>
</head>

<body>
<br>
<h1>BMI値を計算します</h1>
<br>
<p>あなたの身長を入力してください(cm)</p>
<form name=bmi>
<input tupe="text" name="height">
<br><br><br>
<p>あなたの体重を入力してください(kg)</p>
<input tupe="text" name="weight">
<br><br><br>
<input type="button" value="計算" id="jsButtom" onclick="keisan()">
</form>
<br><br>
<p>計算結果</p>
<br>
<span id="output">??</span>
<br><br>
<span id="kekka"></span>
</body>
</html>