本文将为大家详细介绍“使用html+css+js实现简易计算器的案例”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“使用html+css+js实现简易计算器的案例”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
html有什么特点
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。
2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。
4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
使用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" rel="external nofollow" >
<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;
}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实现简易计算器的案例”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注天达云行业资讯频道！