效果：
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;
}
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
