用web写一个计算器

 

下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/css.css" />
	</head>
	<body>
		<div id="d_text">
			<input type="text" id="text" value="0" readonly="readonly"/>
		</div>
		<div id="value">
			<ul>
				<li onclick="clearall()">C</li>
				<li onclick="goback()">D</li>
				<li onclick="get(7)">7</li>
				<li onclick="get(8)">8</li>
				<li onclick="get(9)">9</li>
				<li onclick="get('*')">x</li>
				<li onclick="get('/')">/</li>
				<li onclick="get(4)">4</li>
				<li onclick="get(5)">5</li>
				<li onclick="get(6)">6</li>
				<li onclick="get('+')">+</li>
				<li onclick="get('-')">-</li>
				<li onclick="get(1)">1</li>
				<li onclick="get(2)">2</li>
				<li onclick="get(3)">3</li>
				<li onclick="get('%')">%</li>
				<li onclick="equal()">=</li>
				<li onclick="get(0)">0</li>
				<li onclick="get('00')">00</li>
				<li onclick="get('.')">.</li>
				
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="js/js.js" ></script>
</html>

　　js的代码

function get(key){
	var str = document.getElementById("text").value;
	if(str.length<20){
		if(str==""){
			str = "0";
		}
		if(str == "0"&&key=='00'||str=="0"&&key=='0'){
			str = "0";
		} else{
			if(str == "0"){
				str = "";
			}
			str = str+key;
		}
	}
	document.getElementById("text").value = str;
}

function goback(){
	var str = document.getElementById("text").value;
	str = str.substring(0,str.length-1);
	if(str == ""){
		str = "0";
	}
	document.getElementById("text").value=str;
}

function clearall(){
	document.getElementById("text").value="0";
}

function equal(){
	var str = document.getElementById("text").value;
	var result = eval(str);
	if(result=="Infinity"){
		result = "不合法输入";
		alert("不合法输入");
	}else{
		document.getElementById("text").value = result;
	}
	
}

　　css的代码

#d_text {
	width: 1000px;
}
#text{
	padding-right: 10px;
    width: 600px;
    height: 50px;
    font-size: 25px;
    text-align: right;
    border: solid 1px white;
    border: double 1px;

}

#value{
	width: 600px;
	height: 408px;
}

#value ul li{
	margin: 10px;
    list-style: none;float: left;
    width: 80px;height: 50px;line-height: 55px;
    text-align: center;background-color: white;
    border: 1px solid black;
    font-size: 30px;
                
}

　　

posted @ 2019-11-28 21:46  沃德吉尔·邦英  阅读(1261)  评论(0)    收藏  举报