日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

javascript 实现简单计算器

發布時間：2023/11/30 javascript 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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 实现简单计算器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。