html、js写了一个简单的计算器

最新推荐文章于 2022-02-27 20:58:52 发布

DOREMI428

最新推荐文章于 2022-02-27 20:58:52 发布

阅读量758

点赞数 1

分类专栏： Test 文章标签： HTML JS 计算器

本文链接：https://blog.csdn.net/DOREMI428/article/details/79081645

版权

Test 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图如下：

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#calculator{
margin: 15px auto;
width:330px;
height:400px;
border: 1px solid lightgray;
padding:15px;
float:left;
background-color:#C7D6DA;
}
#shuRu{
margin-top:15px;
}
.screen{
margin-top:5px;
width:300px;
height:40px;
text-align: right;
padding-right:10px;
font-size:20px;
}
#keys{
border:1px solid lightgray;
height:270px;
margin-top:25px;
padding:8px;
}
#keys .buttons{
float:left;
width: 42px;
height: 36px;
text-align:center;
background-color:#C7D6DA;
margin: 0 17px 20px 0;
}
</style>
<script type="text/javascript">
var num = 0 ;
function dj(num){
document.getElementById('screenName').value += document.getElementById(num).value;
textRecard=document.getElementById('textAll').value += document.getElementById(num).value;
}
function denghao(){
document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
document.getElementById("textAll").value = document.getElementById("textAll").value + "=" + eval(document.getElementById("screenName").value) + '\n';
document.getElementById('screenName').value=" ";
}
function del(){
document.getElementById("textAll").value = null;
}
function clearNum(){
document.getElementById("screenName").value = null;
document.getElementById("screenName").focus();
}
function back(){
var arr = document.getElementById("screenName");
arr.value = arr.value.substring(0, arr.value.length - 1);
}
</script>
</head>

<body>
<div style="min-width:800px; min-height:500px;">
<div>
<textarea id="textAll" width:400px;height:800px="width:400px;height:800px"></textarea>
</div>
<div id="calculator">
<div id="shuRu">
<div class="screen">
<input type="text" id="screenName" name="screenName" class="screen">
</div>
</div>
<div id="keys">
<input type="button" id="del" οnclick="del()" value="删除" class="buttons">
<input type="button" id="CE" οnclick="clearNum()" value="CE" class="buttons">
<input type="button" id="C" οnclick="back()" value="C" class="buttons">
<input type="button" id="±" οnclick="dj(this.id)" value="±" class="buttons">
<input type="button" id="√" οnclick="dj(this.id)" value="√" class="buttons" style="margin-right:0px">
<input type="button" id="1" οnclick="dj(this.id)" value="1" class="buttons">
<input type="button" id="2" οnclick="dj(this.id)" value="2" class="buttons">
<input type="button" id="3" οnclick="dj(this.id)" value="3" class="buttons">
<input type="button" id="/" οnclick="dj(this.id)" value="/" class="buttons">
<input type="button" id="%" οnclick="dj(this.id)" value="%" class="buttons" style="margin-right:0px">
<input type="button" id="4" οnclick="dj(this.id)" value="4" class="buttons">
<input type="button" id="5" οnclick="dj(this.id)" value="5" class="buttons">
<input type="button" id="6" οnclick="dj(this.id)" value="6" class="buttons">
<input type="button" id="*" οnclick="dj(this.id)" value="*" class="buttons">
<input type="button" id="//" οnclick="dj(this.id)" value="1/x" class="buttons" style="margin-right:0px">
<input type="button" id="7" οnclick="dj(this.id)" value="7" class="buttons">
<input type="button" id="8" οnclick="dj(this.id)" value="8" class="buttons">
<input type="button" id="9" οnclick="dj(this.id)" value="9" class="buttons">
<input type="button" id="-" οnclick="dj(this.id)" value="-" class="buttons">
<input type="button" id="eva" οnclick="denghao()" value="=" class="buttons" style="margin-right:0px;height:90px">
<input type="button" id="0" οnclick="dj(this.id)" value="0" class="buttons" style="margin-top:-55px;width:100px">
<input type="button" id="." οnclick="dj(this.id)" value="." class="buttons" style="margin-top:-55px; font-weight:bold">
<input type="button" id="+" οnclick="dj(this.id)" value="+" class="buttons" style="margin-top:-55px">
</div>
</div>
</body>
</html>

DOREMI428

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html、js写了一个简单的计算器

效果图如下：无标题文档#calculator{ margin: 15px auto; width:330px; height:400px; border: 1px solid lightgray; padding:15px;float:left; background-color:#C7D6DA;
复制链接

扫一扫