使用html+css+js实现简易计算器
Posted 前端一点红
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用html+css+js实现简易计算器相关的知识，希望对你有一定的参考价值。
使用html+css+js实现简易计算器，效果图如下：
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="contain.js"></script>
<title>Document</title>
</head>
<body>
<div class="calculator">
<form name="calculator">
<input type="text" id="display" value="">
<br>
<input type="button" class="btn number txt" value="TYNAM">
<input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();">
<input type="button" class="btn number" value="<-" onclick="del();">
<input type="button" class="btn operator" value="/" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="7" onclick="get(this.value);">
<input type="button" class="btn number" value="8" onclick="get(this.value);">
<input type="button" class="btn number" value="9" onclick="get(this.value);">
<input type="button" class="btn operator" value="*" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="4" onclick="get(this.value);">
<input type="button" class="btn number" value="5" onclick="get(this.value);">
<input type="button" class="btn number" value="6" onclick="get(this.value);">
<input type="button" class="btn operator" value="+" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="1" onclick="get(this.value);">
<input type="button" class="btn number" value="2" onclick="get(this.value);">
<input type="button" class="btn number" value="3" onclick="get(this.value);">
<input type="button" class="btn operator" value="-" onclick="get(this.value);">
<br>
<input type="button" class="btn number" value="0" onclick="get(this.value);">
<input type="button" class="btn number" value="." onclick="get(this.value);">
<input type="button" class="btn operator equal" value="=" onclick="calculates();">
</form>
</div>
</body>
</html>
css代码如下：
* {
border: none;
font-family: ‘Open Sans‘, sans-serif;
margin: 0;
padding: 0;
}
.calculator {
background-color: #fff;
height: 600px;
margin: 50px auto;
width: 600px;
}
form {
background-color: rgb(75, 70, 71);
padding: 5px 1px auto;
width: 245px;
}
.btn {
outline: none;
cursor: pointer;
font-size: 20px;
height: 45px;
margin: 5px 0 5px 10px;
width: 45px;
}
.btn:first-child {
margin: 5px 0 5px 10px;
}
#display {
outline: none;
background-color: #dededc;
color: rgb(75, 70, 71);
font-size: 40px;
height: 47px;
text-align: right;
width: 224px;
margin: 10px 10px auto;
}
.number {
background-color: rgb(143, 140, 140);
color: #dededc;
}
.operator {
background-color: rgb(239, 141, 49);
color: #ffffff;
}
.equal{
width: 105px;
}
.txt{
font-size:12px;
background: none;
}
资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com
js代码如下：
/* display clear */
function cleardisplay() {
document.getElementById("display").value = "";
}
/* del */
function del() {
var numb = "";
numb = document.getElementById("display").value;
for(i=0;i<numb.length;i++)
{
document.getElementById("display").value = numb.substring(0,numb.length-1);
if(numb == ‘‘)
{
document.getElementById("display").value = ‘‘;
}
}
}
/* recebe os valores */
function get(value) {
document.getElementById("display").value += value;
}
/* calcula */
function calculates() {
var result = 0;
result = document.getElementById("display").value;
document.getElementById("display").value = "";
document.getElementById("display").value = eval(result);
};
以上是关于使用html+css+js实现简易计算器的主要内容，如果未能解决你的问题，请参考以下文章