用html、css、js做一个简单的计算器
HC_J888
已于 2024-03-26 11:18:37 修改
阅读量1k
收藏
25
点赞数
20
已于 2024-03-26 11:18:37 修改
阅读量1k
收藏
25
点赞数
20
于 2023-12-09 14:14:17 首次发布
效果：
HTML、JS代码：
<body>
<div class="box">
<span>算数运算</span>
<div class="figureA">
<p>数字A</p>
<input class="s1" type="text" value="" id="A">
</div>
<div class="figureB">
<p>数字B</p>
<input class="s2" type="text" value="" id="B">
</div>
<div class="count">
<p>结果C</p>
<input class="jie" type="text" value="" id="C" readonly>
</div>
<div class="suan">
<input class="add" type="button" id="add" value="加">
<input class="jian" type="button" id="jian" value="减">
<input class="chen" type="button" id="cheng" value="乘">
<input class="chu" type="button" id="chu" value="除">
</div>
</div>
<script>
let A=document.getElementById("A");
let B=document.getElementById("B");
let C=document.getElementById("C");
let jia=document.getElementById("add");
let jian=document.getElementById("jian");
let cheng=document.getElementById("cheng");
let chu=document.getElementById("chu"); //定义变量
add.addEventListener("click",function(){
let a = Number(A.value);
let b = Number(B.value); //将输入值转化为数字
if(Number.isNaN(a)||Number.isNaN(b)) //判断用户是否是输入的数字字符
{
C.value="请输入正确的数值";
return false;
}
else
C.value=a+b;
});
jian.addEventListener("click",function(){
let a = Number(A.value);
let b = Number(B.value);
if(Number.isNaN(a)||Number.isNaN(b))
{
C.value="请输入正确的数值";
return false;
}
else
C.value=a-b;
});
cheng.addEventListener("click",function(){
let a = Number(A.value);
let b = Number(B.value);
if(Number.isNaN(a)||Number.isNaN(b))
{
C.value="请输入正确的数值";
return false;
}
else
C.value=a*b;
});
chu.addEventListener("click",function(){
let a = Number(A.value);
let b = Number(B.value);
if(Number.isNaN(a)||Number.isNaN(b))
{
C.colo
C.value="请输入正确的数值";
return false;
}
else
C.value=a/b;
});
</script>
</body>
外部样式CSS代码：
.box{
width: 600px;
height: 500px;
margin: auto;
margin-top: 50px;
border: solid 2px black;
background: #f1f1f1;
position: relative;
}
.box span{
display: inline-block;
font-size: 30px;
position: absolute;
bottom: 480px;
left:10px;
}
.figureA{
width: 600px;
height: 100px;
margin-top: 50px;
}
.figureB{
width: 600px;
height: 100px;
}
.count{
width: 600px;
height: 100px;
}
.suan{
width: 600px;
height: 100px;
}
.box p{
display: inline-block;
font-size: 30px;
margin-left: 40px;
margin-top: 20px;
}
.box .s1,
.s2,
.jie{
width: 400px;
height: 50px;
margin-left: 20px;
margin-top: 20px;
font-size: 30px;
}
.suan .add,
.jian,
.chen,
.chu{
width: 100px;
height: 50px;
margin-left: 35px;
margin-top: 50px;
font-size: 20px;
border-radius: 20px;
}
.count .jie{
background: #ebebe4;
}
.suan .add,
.chen{
background: #ffb6c1;
}
.suan .jian,
.chu{
background: #87ceeb;
}
扫一扫
1491
到【灌水乐园】发言
CSDN-Ada助手: 恭喜用户写了第9篇博客！文章内容非常实用，对于JS获取HTML标签内容和输出值到网页中的方法有了更深入的理解。希望用户能继续坚持创作，分享更多有趣的技术知识和经验。下一步建议可以尝试结合实际案例，展示如何利用这些方法解决具体的问题，让读者更容易理解和运用。期待用户的下一篇作品！愿您越来越进步！
CSDN-Ada助手: 恭喜用户发布了如此有用的博客！学习如何打造“爆款标题”对于吸引读者是非常重要的。希望您能继续保持创作的热情，分享更多有价值的内容。下一步，您可以尝试探索更多关于标题创作的技巧，比如如何结合关键词提升搜索引擎排名，或者如何在标题中引发读者的好奇心。期待您的更多精彩文章！
CSDN-Ada助手: 恭喜您写了这么精彩的博客！看到您用JavaScript制作实时电子时钟的方法，让我对编程又有了新的认识。接下来，我建议您可以尝试用CSS美化时钟的外观，或者尝试添加闹钟功能，让时钟更加实用和有趣。期待您的下一篇作品！继续加油！
HC_J888: 若下载图片素材要会员，需要的私~
CSDN-Ada助手: 恭喜您写了第四篇博客！标题看起来非常有趣，使用HTML、CSS和JS来制作一个简单的计算器是一个很好的主题选择。我很期待阅读您的博客，了解您是如何实现这个功能的。在下一步的创作中，我建议您可以尝试添加一些附加功能，比如键盘支持或者增加科学计算器的功能。当然，这只是我的建议，您可以根据自己的兴趣和技术水平来进行创作。继续保持创作，期待您的下一篇博客！ 如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5