こんにちは。武田です。
JavaScriptには文字列を評価してくれる便利なevalという関数があります。
これを使って電卓を作ります。
今回は骨格だけです。次回はスマートフォン用にデザインを変えてアプリ化するところまでしたいと思います。
完成イメージ
まずは見た目です。今回はCSSは使用せずHTMLのみの設定です。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="mystyle.css"> <title>電卓 v0.5</title> <script src="dentaku.js"></script> </head> <body> <div id="frame"> <input type="text" value="0" id="display"> <!-- c Tax +- / 7 8 9 * 4 5 6 - 1 2 3 + 0 . BS = --> <div id="button_form"> <input type="button" value="C" onclick="calc(this)"> <input type="button" value="Tax" onclick="calc(this)"> <input type="button" value="+/-" onclick="calc(this)"> <input type="button" value="/" onclick="calc(this)"><br> <input type="button" value="7" onclick="calc(this)"> <input type="button" value="8" onclick="calc(this)"> <input type="button" value="9" onclick="calc(this)"> <input type="button" value="*" onclick="calc(this)"><br> <input type="button" value="4" onclick="calc(this)"> <input type="button" value="5" onclick="calc(this)"> <input type="button" value="6" onclick="calc(this)"> <input type="button" value="-" onclick="calc(this)"><br> <input type="button" value="1" onclick="calc(this)"> <input type="button" value="2" onclick="calc(this)"> <input type="button" value="3" onclick="calc(this)"> <input type="button" value="+" onclick="calc(this)"><br> <input type="button" value="0" onclick="calc(this)"> <input type="button" value="." onclick="calc(this)"> <input type="button" value="BS" onclick="calc(this)"> <input type="button" value="=" onclick="calc(this)"> </div> </div> </body> </html>
お次はJavaScript部分です。
dentaku.js
// ------------------------------------------------------------
// 電卓 v0.5
// created by take3.asia on 2015-02-18
// ------------------------------------------------------------
var display = null;
function calc(e){
// ボタンのテキストを取得
var value = e.value;
// 表示が「0」の時は情報を消去
if(display.value == "0"){
display.value = "";
}
// ボタンによる処理
if(value == "C"){ // クリア
display.value = "0";
}
else if(value == "BS"){ // 一文字消す
var text = display.value;
var bsText = text.substr(0, text.length - 1);
if(bsText == "") bsText = "0";
display.value = bsText;
}
else if(value == "+/-"){ // ＋／－の変換
var text = display.value;
if(text == ""){
text = "0";
}
else if(text.charAt(0) == "-"){
text = text.substr(1);
}
else{
text = "-" + text;
}
display.value = text;
}
else if(value == "Tax"){ // 税込価格
var siki = display.value;
if(siki == "") siki = "0";
try{
var kotae = Math.round(eval(siki) * 1.08);
display.value = kotae;
} catch(e){
alert("税込できないよ！: " + e.message);
}
}
else if(value == "="){ // 計算する
var siki = display.value;
console.log(siki);
try{
var kotae = eval(siki);
display.value = kotae;
} catch(e){
alert("式が変だよ！: " + e.message);
}
}
else{ // 文字をつなげる
display.value += value;
}
}
/**
* 起動時の処理
*/
window.onload = function(){
display = document.getElementById("display");
display.value = "0";
};
レイアウトは何もしていませんので、次回は綺麗にデザインしていきたいと思います。
＼ 最新情報をチェック ／
1コメント