html+css+js实现简易计算器
生活随笔
收集整理的這篇文章主要介紹了
html+css+js实现简易计算器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
使用JavaScript制作一個(gè)簡(jiǎn)單的計(jì)算器
直接看效果，這個(gè)計(jì)算器可以實(shí)現(xiàn)簡(jiǎn)單的加減乘除
1、首先編輯HTML樣式，把計(jì)算機(jī)上的按鍵全部打印出來
可以顯示出以下結(jié)果
2、添加css樣式
先設(shè)置a元素定寬定高，然后左浮動(dòng)，在微調(diào)寬度和高度，使其到達(dá)一個(gè)合理布局的值
3、編寫js代碼
? ? 3. 點(diǎn)擊數(shù)字，獲取num1和num2的值。
? ?4.獲取按鍵加減乘除，記錄下符號(hào)
? ? 5.點(diǎn)擊 “=” ，計(jì)算結(jié)果
4、最后，附上完整源碼
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>計(jì)算器</title><style type="text/css">*{margin: 0;padding: 0;}body{background-color: #333;}.box{width: 300px;height: 440px;background-color: yellow;margin: 100px auto;}.box h2{line-height: 80px;height: 80px;background-color: #000000;color: #FFFFFF;text-align: center;}.box a{display: block;width: 73px;height: 73px;line-height: 73px;text-align: center;background-color: #111;color: #FFFFFF;border: 1px solid #F0F8FF;float: left;cursor:pointer;}.box a:hover{background-color:#333333;color: #FFFF00;}.box .sp{width: 148px;}</style> </head> <body><div class="box"><h2 id="result">結(jié)果</h2><a class="sp">AC</a><a class="sp">/</a><a>7</a><a>8</a><a>9</a><a>X</a><a>4</a><a>5</a><a>6</a><a>-</a><a>1</a><a>2</a><a>3</a><a>+</a><a>0</a><a>.</a><a class="sp">=</a></div><script type="text/javascript">window.onload = function(){var a_list = document.getElementsByTagName("a");var result = document.getElementById("result");var fu = "";var num1 = "";var num2 = "";for(var i=0; i<a_list.length; i++){a_list[i].onclick = function(){// alert(this.innerHTML);var key_value = this.innerHTML;switch(key_value){case "+":fu = "+";break;case "-":fu = "-";break;case "X":fu = "X";break;case "/":fu = "/"break;case "=":var n1 = parseFloat(num1);var n2 = parseFloat(num2);switch(fu){case "+":result.innerHTML = n1 + n2;break;case "-":result.innerHTML = n1 - n2;break;case "X":result.innerHTML = n1 * n2;break;case "/":result.innerHTML = n1 / n2;break;}break;case "AC":result.innerHTML = "0";fu = "";num1 = "";num2 = "";break;default:if (fu == "") {num1 = num1 += this.innerHTML;result.innerHTML = num1;} else{num2 = num2 += this.innerHTML;result.innerHTML = num2;}break;}}}}</script> </body> </html>結(jié)語：創(chuàng)作不易，麻煩收藏和關(guān)注一下！！&( ^___^ )
（即是對(duì)作者的支持，也方便自己以后查找，感謝收藏和關(guān)注）
以后也會(huì)持續(xù)更新工作學(xué)習(xí)中的技術(shù)、經(jīng)驗(yàn)
其它相關(guān)文章：
ajxs實(shí)現(xiàn)移動(dòng)端聊天機(jī)器人???????
總結(jié)
以上是生活随笔為你收集整理的html+css+js实现简易计算器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [JavaScript实例解析]js计算
- 下一篇： 罗技鼠标显示无法连接服务器,罗技无线鼠标