您的位置：首页 > Web前端 > JavaScript

计算器功能实现

2015-11-13 19:26 495 查看

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>计算器界面</title>

<style type="text/css">

   *{margin:0px; padding:0px;}

   table{

       display:block;

       margin:50px auto;

       width:200px;

       height:160px;

       box-shadow:2px 2px black;

       border-radius:8px;

   }

   input{

       width:200px;

       height:30px;

       text-align:right;

       border-radius:8px;

       font-size:20px;

       font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;

   }

   button{

       width:49px;

       height:40px;

       font-size:18px;

       background-color:white;

       border-radius:8px;

       font-style:oblique;

       font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;

   }

   button:hover{

       background-color:#ff9999;

   }

</style>

</head>

<body>

   <table id="table" border="1" cellspacing="0">

       <tr>

           <td colspan="4"><input id="input"/></td>

       </tr>

   </table>

   <script type="text/javascript">

       window.onload = function(){

           var keys = ["7","8","9","*","4","5","6","/","1","2","3","-","0","+","clear","="];

           var t=0;

           var table = document.getElementById("table");

           for(var i=0; i<4; i++){

               var tr = table.insertRow(-1);

               for(var j=0; j<4; j++,t++){

                   tr.insertCell(-1).innerHTML = "<button value="+keys[t]+" onclick='inputEvent(this)'>"+keys[t]+"</button>";

               }

           }

       }



       function inputEvent(a){

           inp = document.getElementById("input");



           if(a.value=="="){

               inp.value = eval(inp.value);

               return;

           }

           if(a.value=="clear"){

               inp.value = "";

               return;

           }

           inp.value += a.value;

       }

   </script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 计算器

相关文章推荐

新的分享

章节导航