<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 input{
height: 50px;
width: 50px;
background-color: gainsboro;
font-size: 30px;
}
</style>
</head>
<body>
<p> 计算器2.0 (清除键尚未完成)</p>
<div class="div1">
<textarea id="display" style="width: 315px; height: 50px; font-size: 20px; border: 2px solid gainsboro;"></textarea>
<br />
<input type="text" value="0" id="number1" style="display: none;">
<input type="text" value="0" id="number2" style="display: none;">
<input type="text" value="1" id="number4" style="display: none;">
<input type="button" value="+" id="plus" onclick="computer1('plus')" ></option>
<input type="button" value="-" id="substract" onclick="computer1('substract')"></option>
<input type="button" value="*" id="multiply" onclick="computer1('multiply')"></option>
<input type="button" value="/" id="divide" onclick="computer1('divide')"></option>
<input type="button" value="%" id="complementation"onclick="computer1('complementation')"></option>
<input type="button" value="=" onclick="computer3('result')"/>
<br />
<input type="button" value="0" id="zero" onclick="computer('zero')" >
<input type="button" value="1" id="one" onclick="computer('one')" >
<input type="button" value="2" id="two" onclick="computer('two')">
<input type="button" value="3" id="three" onclick="computer('three')" >
<input type="button" value="4" id="four" onclick="computer('four')" >
<input type="button" value="." id="radix" onclick="computer('radix')">
<br />
<input type="button" value="5" id="five" onclick="computer('five')" >
<input type="button" value="6" id="six" onclick="computer('six')" >
<input type="button" value="7" id="seve" onclick="computer('seve')" >
<input type="button" value="8" id="eight" onclick="computer('eight')" >
<input type="button" value="9" id="nine" onclick="computer('nine')" >
<!--<input type="button" style="font-size: 18px; border: 0;" value="clear" id="clear" onclick="computer4()" />-->
<script>
var n1=1;
var n2=0;
var n3=0;
var n4="";
function computer(name){
document.getElementById('display').value += document.getElementById(name).value;
var m1 = document.getElementById(name).value;
if(parseInt(n1)==1)
n2 += m1;
else
n3 += m1;
}
function computer1(name){
document.getElementById('display').value += document.getElementById(name).value;
n1 = parseInt(n1)+1;
n4 = document.getElementById(name).value;
}
function computer3(){
var x1 = parseFloat(n2);
var x2 = parseFloat(n3);
var x3 = n4;
var x4 = document.getElementById('display');
switch(x3)
{
case '+':x4.value = x1+x2;break;
case '-':x4.value = x1-x2;break;
case '*':x4.value = x1*x2;break;
case '/':x4.value = x1/x2;break;
case '%':x4.value = x1%x2;break;
}
}
</script>
</div>
</body>
</html>
Js prepared to achieve in the calculator
Guess you like
Origin www.cnblogs.com/flaming-/p/11202886.html
Recommended
Ranking