<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <style> input[type='text']{ width:400px; height:22px; font-size:20px; line-height:22px; background-color:aqua; border-color:navy; color:orange; } input[type='button']{ width:44px; height:44px; margin:4px; padding:0; border-radius:10px; } </style> <script> $(function(){ $(".calc input").click(function(){ try{ if($(this).val() == "C"){ $("#result").val(""); } else if($(this).val() == "="){ $("#result").val(eval($("#result").val())); } else if($(this).val() == "B"){ var res = $("#result").val(); res = res.substring(0,res.length-1); $("#result").val(res); } else{ $("#result").val($("#result").val() + $(this).val()); } } catch(e) { $("#result").val(""); console.log(e); } }); }); </script> </head> <body> <div> <input type="text" id="result" disabled> </div> <div class="calc"> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="/"> </div> <div class="calc"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> </div> <div class="calc"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> </div> <div class="calc"> <input type="button" value="5"> <input type="button" value="00"> <input type="button" value="%"> <input type="button" value="-"> </div> <div class="calc"> <input type="button" value="."> <input type="button" value="B"> <input type="button" value="C"> <input type="button" value="="> </div> </body> </html>