Skip to content

Instantly share code, notes, and snippets.

@codingwithsara codingwithsara/index.html Secret
Created Aug 13, 2019

Embed
What would you like to do?
jQuery Simple Calculator
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>シンプルな電卓</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style>
* {
font-family: 'Inconsolata', monospace;
color: #555;
}
body {
background-color: #3fb399;
}
.container {
width: 320px;
background-color: white;
margin: 120px auto;
}
table {
width: 100%;
border-color: #f4f4f4;
}
td {
width: 25%;
}
button {
width: 100%;
height: 70px;
font-size: 24px;
background-color: white;
border: none;
}
#inputLabel {
height: 120px;
font-size: 40px;
vertical-align: bottom;
text-align: right;
padding-right: 16px;
background-color: #ececec;
}
</style>
</head>
<body>
<div class="container">
<table border="1" cellspacing="0">
<tr>
<td colspan="4" id="inputLabel">0</td>
</tr>
<tr>
<td colspan="3"><button>AC</button></td>
<td><button>/</button></td>
</tr>
<tr>
<td><button>7</button></td>
<td><button>8</button></td>
<td><button>9</button></td>
<td><button>*</button></td>
</tr>
<tr>
<td><button>4</button></td>
<td><button>5</button></td>
<td><button>6</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button>1</button></td>
<td><button>2</button></td>
<td><button>3</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td colspan="2"><button>0</button></td>
<td><button>.</button></td>
<td><button>=</button></td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('button').click(function(){
var pushed = $(this).text();
var inputLabel = $('#inputLabel');
if (pushed == '=') {
// 計算
inputLabel.text(eval(inputLabel.text()));
} else if (pushed == 'AC') {
// 全てクリア
inputLabel.text('0');
} else {
if (inputLabel.text() == '0') {
inputLabel.text(pushed);
} else {
inputLabel.text(inputLabel.text() + pushed);
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.