html简单计算器

来源：互联网发布：公考推荐书籍知乎编辑：程序博客网时间：2024/06/05 11:11

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/main.css"/><!--链接css--><script type="text/javascript">var numresult;     var str;     //用于输入的方法function shuru(nums){str = document.getElementById("disPlay"); str.value = str.value + nums; }//清空界面function qingKong(){document.getElementById("disPlay").value="";}//计算表达式的值function jiSuan(){str = document.getElementById("disPlay"); numresult = eval(str.value); //console.log(str.value);str.value =str.value+" = "+ numresult; }</script></head><body><!--主框--><div id="main"><!--名字--><div class="top">简单计算器</div><!--名字结束--><!--输入框--><input type="text" id="disPlay" value=""/><!--输入框结束--><!--按键--><div id="bot"><div><input type="button" id="7" value="7" onclick="shuru(7)"/></div><div><input type="button" id="8" value="8" onclick="shuru(8)"/></div><div><input type="button" id="9" value="9" onclick="shuru(9)"/></div><div><input type="button" id="bot-00" value="←" onclick=""/></div><div><input type="button" id="clr" value="C" onclick="qingKong()"/></div><div><input type="button" id="4" value="4" onclick="shuru(4)"/></div><div><input type="button" id="5" value="5" onclick="shuru(5)"/></div><div><input type="button" id="6" value="6" onclick="shuru(6)"/></div><div><input type="button" id="mul" value="*" onclick="shuru('*')"/></div><div><input type="button" id="division" value="/" onclick="shuru('/')"/></div><div><input type="button" id="1" value="1" onclick="shuru(1)"/></div><div><input type="button" id="2" value="2" onclick="shuru(2)"/></div><div><input type="button" id="3" value="3" onclick="shuru(3)"/></div><div><input type="button" id="add" value="+" onclick="shuru('+')"/></div><div><input type="button" id="sub" value="-" onclick="shuru('-')"/></div><div><input type="button" id="0" value="0" onclick="shuru(0)"/></div><div><input type="button" id="00" value="00" onclick="shuru('00')"/></div><div><input type="button" id="point" value="." onclick="shuru('.')"/></div><div><input type="button" id="baifen" value="%" onclick="shuru('%')"/></div><div><input type="button" id="result" value="=" onclick="jiSuan()"/></div></div><!--按键结束--></div><!--主框结束--></body></html>

/* * 主框开始 */#main{width: 250px;height: 280px;background: #F2F2F2;margin: 0 auto;border: 1px solid gainsboro;}/*主框结束*//*用来清除浏览器自带边距*/*{margin: 0;padding: 0;}/*设置简单计算器的名字*/#main .top{width: 250px;height: 40px;line-height: 40px;font-family: "微软雅黑";padding-left: 16px;font-size:15px;}/*设置显示区域样式*/#main input{margin-left: 16px;width: 213px;height: 30px;border: 1px solid gainsboro;}/*包住所有按键的外层边框*/#bot{width: 213px;height: 171px;border: 1px solid white;margin-left: 16px;margin-top: 16px;}/*按键样式*/#bot div{width: 34px;height: 34px;float: left;margin-left: 7px;margin-top: 7px;   line-height: 34px;}#bot input{width: 34px;height: 34px;background: darkgoldenrod;margin: 0 auto;}

0 0