首頁 > 開發者 > JavaScript

javascript實現簡單計算機效果【推薦】_javascript技巧

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最終效果如下圖-2，有bug：就是整數後點擊%號結果正確，如果小數後面點擊%的話結果就錯誤！其他都正常，求指點：input的value是string類型的，在JS中改如何正確處理下圖-1中的if部分？？

圖-1

圖-2

HTML代碼如下

<body><div id="calculator">  <div class="LOGO">    <span class="name">簡單的計算機</span>    <span class="verson">@walker</span>  </div>  <div id="shuRu">    <!--screen輸入欄-->    <div class="screen">      <input type="text" id="screenName" name="screenName" class="screen">    </div>  </div>  <div id="keys">    <!-- j -->    <!--第一排-->    <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">    <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">    <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">    <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">    <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">    <!--第二排-->    <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">    <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">    <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">    <input type="button" id="*" onclick="jsq(this.id)" value="X" class="buttons">    <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">    <!--第三排-->    <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">    <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">    <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">    <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">    <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">    <!--第四排-->    <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">    <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">    <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">    <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">    <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">  </div>  <div class="footer">    <span class="aside">歡迎使用JavaScript計算機</span>      <span class="link">        <a href="#" title="聲明" target="_blank">反饋</a>      </span>  </div></div></body>

CSS代碼如下：

<style>    /*Basic reset*/*{  margin:0;  padding:0;  box-sizing: border-box;  font: 14px Arial,sans-serif;}html{  height:100%;  background-color:lightslategrey;}#calculator{  margin: 15px auto;  width:330px;  height:400px;  border: 1px solid lightgray;  background-color:darkgrey;  padding:15px;}/*LOGO*/.LOGO{  height:20px;}.LOGO .name{  float:left;  line-height:30px;}.LOGO .verson{  float:right;  line-height:30px;}/*screen*/#shuRu{  margin-top:15px;}.screen{  margin-top:5px;  width:300px;  height:40px;  text-align: right;  padding-right:10px;  font-size:20px;}#keys{  border:1px solid lightgray;  height:223px;  margin-top:25px;  padding:8px;}#keys .last{  margin-right:0px;}.footer{  margin-top:20px;  height:20px;}.footer .link{  float:right;}#keys .buttons{  float:left;  width: 42px;  height: 36px;  text-align:center;  background-color:lightgray;  margin: 0 17px 20px 0;}  </style>

javascript代碼如下：

<script>     var num = 0; // 定義第一個輸入的資料     function jsq(num) {       //擷取當前輸入       if(num=="%"){         document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100;       }else{         document.getElementById('screenName').value += document.getElementById(num).value;       }     }     function eva() {       //計算輸入結果       document.getElementById("screenName").value = eval(document.getElementById("screenName").value);     }     function clearNum() {       //清0       document.getElementById("screenName").value = null;       document.getElementById("screenName").focus();     }     function tuiGe() {       //退格       var arr = document.getElementById("screenName");       arr.value = arr.value.substring(0, arr.value.length - 1);     }   </script>

以上這篇javascript實現簡單計算機效果【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More