當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript 实现简单计算器
生活随笔
收集整理的這篇文章主要介紹了
javascript 实现简单计算器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 效果圖：
- css代碼
- html代碼
- js代碼
效果圖：
css代碼
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #dcf3f3;}div{margin: auto;border: 1px solid orange;overflow: hidden;font-size: 30px;border-radius: 10px;}.div4:active{background-color: pink;}#div1{width: 540px;}#div2{width: 100%;height: 90px;}.div3{width: 268px;height: 80px;line-height: 80px;text-align: center;float: left;background-color: #e5eaff;}.div4{width: 113px;height: 80px;line-height: 80px;text-align: center;float: left;margin: 10px;border-radius: 50%;background-color: #F0FFFF;}#txt{width: 535px;height: 60px;border: 1px #E5EAFF;text-align: right;font-size: 30px;display: flex;justify-content: center;align-items: center;background-color: #f6fffb;}#txtresult{width: 535px;height: 30px;border: 1px #E5EAFF;text-align: right;font-size: 30px;display: flex;justify-content: center;align-items: center;background-color: #f6fffb;}span{display: inline-block;width: 100%;height: 100%;cursor: pointer;}html代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>計算器</title><link rel="stylesheet" type="text/css" href="./css/Mystyle.css"/><script src="./js/MyStyle.js" type="text/javascript" charset="utf-8"></script></head><body><div id="div1"><div id="div2"><input type="text" readonly="readonly" id="txt" /><input type="text" readonly="readonly" name="" id="txtresult" /></div><div class="div3"><span id='del'>del</span></div><div class="div3"><span id='clear'>clear</span></div><div class="div4"><span id='7'>7</span></div><div class="div4"><span id='8'>8</span></div><div class="div4"><span id='9'>9</span></div><div class="div4"><span id='/'>/</span></div><div class="div4"><span id='4'>4</span></div><div class="div4"><span id='5'>5</span></div><div class="div4"><span id='6'>6</span></div><div class="div4"><span id='*'>*</span></div><div class="div4"><span id='1'>1</span></div><div class="div4"><span id='2'>2</span></div><div class="div4"><span id='3'>3</span></div><div class="div4"><span id='-'>-</span></div><div class="div4"><span id='0'>0</span></div><div class="div4"><span id='.'>.</span></div><div class="div4"><span id='='>=</span></div><div class="div4"><span id='+'>+</span></div></div></body> </html>js代碼
window.onload = function(){var one = document.getElementById('1');var two = document.getElementById('2');var there = document.getElementById('3');var four = document.getElementById('4');var fives = document.getElementById('5');var six = document.getElementById('6');var Seven = document.getElementById('7');var eight = document.getElementById('8');var nine = document.getElementById('9');var zero = document.getElementById('0');var point = document.getElementById('.');var chu = document.getElementById('/');var cheng = document.getElementById('*');var jian = document.getElementById('-');var jia = document.getElementById('+');var del = document.getElementById('del');var clear = document.getElementById('clear');var result = document.getElementById('txt');var denyu = document.getElementById('=');var results = document.getElementById('txtresult');one.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+1;}two.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+2;}there.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+3;}four.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+4;}fives.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+5;}six.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+6;}Seven.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+7;}eight.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+8;}nine.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+9;}zero.onclick = function(){if(results.value != ''){results.value = '';}result.value = result.value+0;}point.onclick = function(){if(results.value != ''){results.value = '';}//如果用戶連續點擊運算符，則以最后的為準if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){result.value = result.value.substring(0,result.value.length-1)+'.';return;}result.value = result.value+'.';}chu.onclick = function(){if(result.value == ''){alert('錯誤！');return;}if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){result.value = result.value.substring(0,result.value.length-1)+'/';return;}result.value = result.value+'/';}cheng.onclick = function(){if(result.value == ''){alert('錯誤！');return;}if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){result.value = result.value.substring(0,result.value.length-1)+'*';return;}result.value = result.value+'*';}jian.onclick = function(){if(result.value == ''){alert('錯誤！');return;}if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){result.value = result.value.substring(0,result.value.length-1)+'-';return;}result.value = result.value+'-';}jia.onclick = function(){if(result.value == ''){alert('錯誤！');return;}if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){result.value = result.value.substring(0,result.value.length-1)+'+';return;}result.value = result.value+'+';}clear.onclick = function(){result.value = '';results.value = '';}del.onclick = function(){result.value = result.value.substring(0,result.value.length-1);}denyu.onclick = function(){if(result.value == ''){alert("溫馨提示：請輸入操作數！！");result.focus();return;}//定義一個變量存儲最終結果var answer = '';//判斷if(result.value.substring(result.value.length-1)=='.'||result.value.substring(result.value.length-1)=='+'||result.value.substring(result.value.length-1)=='-'||result.value.substring(result.value.length-1)=='*'||result.value.substring(result.value.length-1)=='/'){result.focus();alert("溫馨提示：請輸入完整的表達式！！");return;}//計算var answer = eval(result.value);results.value = answer;result.value = '';}}總結
以上是生活随笔為你收集整理的javascript 实现简单计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js实现计算器
- 下一篇： JavaScript简单计算器