简单⽹页计算器代码
注：本⼈为初学者，欢迎各位⼤神指教
简单计算器实现效果：
HTML代码counter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet"type="text/css" href="css/counter.css" />
<script type="text/javascript" src="js/counter.js"></script>
</head>
<body>
<div class="counter">
<div class="counter_top" >
<form>
<input type="text" id="top"value="" />
</form>
</div>
<div class="counter_down">
<form>
<input type="button"class="CE"value="清屏" onclick="cl(this.value)" />
<input type="button"class="CE"value="退格" onclick="cl(this.value)"/>
<div class="down_right" id="cou">
<input type="button"class="cou"value="÷" onclick="eva(this.value)"/>
<input type="button"class="cou"value="×" onclick="eva(this.value)"/>
<input type="button"class="cou"value="-" onclick="eva(this.value)"/>
<input type="button"class="cou"value="+" onclick="eva(this.value)"/>
<input type="button"class="cou"value="=" onclick="eva(this.value)"/>
</div>
<div id="down_num" >
<input type="button"class="num"value="7" onclick="show(this.value)"/>                        <input type="button"class="num"value="8" onclick="show(this.value)"/>                        <input type="button"class="num"value="9" onclick="show(this.value)"/>                        <input type="button"class="num"value="4" onclick="show(this.value)" />                        <input type="button"class="num"value="5" onclick="show(this.value)" />                        <input type="button"class="num"value="6" onclick="show(this.value)"/>                        <input type="button"class="num"value="1" onclick="show(this.value)"/>                        <input type="button"class="num"value="2" onclick="show(this.value)"/>                        <input type="button"c
lass="num"value="3" onclick="show(this.value)"/>                        <input type="button"class="num"value="0" onclick="show(this.value)"/>                        <input type="button"class="num"value="." onclick="show(this.value)"/>
<input type="button"class="num"value="+/-" onclick="eva(this.value)"/>                    </div>
</form>
</div>
</div>
</body>
</html>
CSS代码counter.css
.counter{
background-color:#E0E0E0;
width: 440px;
height: 460px;css简单网页代码
padding: 20px;
}
.unter_top{
width: 440px;
height: 53px;
background-color:#fff;
}
.unter_top input{
width: 440px;
height: 53px;
border: 0px;
}
.counter_down.CE{
width: 152.5px;
height: 45px;
margin: 15px 15px 0px 0px;
}
.u{
width: 95px;
height: 45px;
margin-bottom: 15px;
}
.down_right{
width: 95px;
float: right;
margin-top: 15px;
}
.counter_down.num{
width: 95px;
height: 45px;
margin: 15px 16px 0px 0px;
}
js代码counter.js
var a=0;
var b;
var c = 0;
function show(value) {
}
function eva(value){
c=ElementById("top").value);
if (value=="=") {
if(b=="+"){
}else if(b=="-"){
}else if(b=="×"){
}else if(b=="÷"){
if(c==0){
}else{
}
}
}else{
a=ElementById("top").value);
b=value;
if(b=="+/-"){
a=-a;
}
}
}
function cl(value){
if(value=="清屏"){
}else{      ElementById("top").ElementById("top").value.substring(0,(ElementById("top").value.length-    }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。