2.2案例實現：仿win計算器
阿新 • • 發佈：2020-12-12
************************************************************
*名稱：仿windows計算器
*功能：
* 1、實現單擊按鈕錄入數字
* 2、實現基礎四則運算功能，並新增必要的異常處理，例如，除數為零
* 3、實現小數點功能並新增異常處理：小數點只能出現一次
* 4、實現正負號功能
* 5、實現退位功能，已經是最後一位時，顯示框顯示為零
* 6、清屏功能
*使用的知識點:
* 1、利用大量的自定義函式實現業務邏輯
* 2、靈活運用事件及事件處理
* 3、培養異常處理的程式設計方法
* 4、培養並實踐利用不同思路實現程式設計
* 1、將css、html和js有效的進行技術組合，實現業務功能
* 2、鍛鍊和培養程式設計思想，解決問題的能力和方法
* 3、鍛鍊和培養利用多種程式設計思路，完成預先設定的目標
************************************************************
一、計算器面板的實現
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript"src="index.js"></script> </head> <body > <div id="div1"> <div id="div2"> <input type="text" name="num" id="num"/> </div id="div3"> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <input type="button" value="0" name="" id=""/> <div> </div> </div> </body> </html>
*{
margin: 0px;
padding: 0px
}
div{
width: 170px;
}
#div1{
top: 60px;
left: 100px;
position: absolute;
}
input[type="button"]{
width: 30px;
margin-right: 5px;
}
input[type="text"]{
width: 149px;
border: 1px solid;
padding-right: 5px;
box-sizing: border-box;
}出現的效果如圖：
