javascript開發之計算器前端

計算器再頁面展示上的內容很簡單，就是數字和運算符號。下面展示程式碼供講解和參考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <title>计算器</title>
<style type="text/css">
     *{margin:0;padding:0;}
    body{ 
         background:#ffffcc;
         font-size:12px;
         font-family:"微软雅黑";
         color:#666;
        }
ul,ol{list-style:none;}
    .cac{
        width:830px;
        background:#399;
        margin:0 auto;
        }
   
    .cac .c_title{
        font-size:16px;
        color:#000;
        padding:10px 0 10px 10px;
        cursor:move;   
        }
    .cac .c_show .c_txt{
        width:800px;
        height:42px;
        font-size:34px;
        color:#999;
border:none;
outline:none;
text-align:right;
padding-right:20px;
line-height:42px;
        }
.cac .c_key ul{
    border:1px solid #fff
}
.cac .c_key ul li{
 border:1px solid #fff;
 width:140px;
 height:65px;
 font-size:32px;
 margin:10px;
 float:left;
 background:#cccc33;
 line-height:65px;
 cursor:pointer;
 text-align:center;
}
.cac .c_key .c_tool{
background:#3399cc;
}
.clear{clear:both;}
</style>
</head>
<body>
  <div>
     <div>计算器</div>
     <div>
  <input type="text" value="0" onfocus="this.blur();" id="result"/>    //onfocus="this.blur();"作用是使键盘无法输入
  </div>
  <div>
       <ul>
  <li onclick="command(7);">7</li>                //每个按钮都要添加onclick点击事件，不然按钮不能用；
  <li onclick="command(8);">8</li>
  <li onclick="command(9);">9</li>
  <li><-</li>
  <li onclick="clearzero('j');">C</li>           
  <li onclick="command(4);">4</li>
  <li onclick="command(5);">5</li>
  <li onclick="command(6);">6</li>
  <li onclick="tools('*','g');">×</li>
  <li onclick="tools('/','g');">÷</li>
  <li onclick="command(1);">1</li>
  <li onclick="command(2);">2</li>
  <li onclick="command(3);">3</li>
  <li onclick="tools('+','g');">+</li>
  <li onclick="tools('-','g');">-</li>
  <li onclick="command(0);">0</li>
  <li onclick="command(00);">00</li>
  <li onclick="dot('g');">.</li>
  <li onclick="tools('%','g');">%</li>
  <li onclick="equal('j');">=</li>
  <div></div>
  </ul>
  </div>
  </div>
  </body>
  </html>

這是HTML和CSS的程式碼。

前端的寫法其實很簡單，學習完HTML+CSS之後是可以做出來的。

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>计算器</title> <style type="text/css"> *{margin:0;padding:0;} body{ background:#ffffcc; font-size:12px; font-family:"微软雅黑"; color:#666; } ul,ol{list-style:none;} .cac{ width:830px; background:#399; margin:0 auto; } .cac .c_title{ font-size:16px; color:#000; padding:10px 0 10px 10px; cursor:move; } .cac .c_show .c_txt{ width:800px; height:42px; font-size:34px; color:#999; border:none; outline:none; text-align:right; padding-right:20px; line-height:42px; } .cac .c_key ul{ border:1px solid #fff } .cac .c_key ul li{ border:1px solid #fff; width:140px; height:65px; font-size:32px; margin:10px; float:left; background:#cccc33; line-height:65px; cursor:pointer; text-align:center; } .cac .c_key .c_tool{ background:#3399cc; } .clear{clear:both;} </style> </head> <body> <div> <div>计算器</div> <div> <input type="text" value="0" onfocus="this.blur();" id="result"/> //onfocus="this.blur();"作用是使键盘无法输入 </div> <div> <ul> <li onclick="command(7);">7</li> //每个按钮都要添加onclick点击事件，不然按钮不能用； <li onclick="command(8);">8</li> <li onclick="command(9);">9</li> <li><-</li> <li onclick="clearzero('j');">C</li> <li onclick="command(4);">4</li> <li onclick="command(5);">5</li> <li onclick="command(6);">6</li> <li onclick="tools('*','g');">×</li> <li onclick="tools('/','g');">÷</li> <li onclick="command(1);">1</li> <li onclick="command(2);">2</li> <li onclick="command(3);">3</li> <li onclick="tools('+','g');">+</li> <li onclick="tools('-','g');">-</li> <li onclick="command(0);">0</li> <li onclick="command(00);">00</li> <li onclick="dot('g');">.</li> <li onclick="tools('%','g');">%</li> <li onclick="equal('j');">=</li> <div></div> </ul> </div> </div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear