JS+css实现该页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dz21</title>
<style>
.box{
width: 800px;
height: 650px;
background-color: orangered;
border-radius: 10% 10% 0 0;
margin: 0 auto;
line-height: 1px;
}
.oo{
width: auto;
height: 80px;
}
#p1{
color: white;
font-size: 50px;
text-align: center;
padding: 10px;
}
.line_01{
height: 1px;
width: auto;
background-color: white;
}
.on{
width: 100%;
height: 570px;
}
.anjian{
font-size: 25px;
}
.radio{
width: auto;
height: 50px;
}
#radio1{
margin-top: 20px;
margin-left: 150px;
}
.text{
width: 48%;
height: auto;
float: left;
margin-top: 40px;
margin-left: 20px;
}
#text01{
font-size: 25px;
}
#text02{
font-size: 25px;
}
#text03{
font-size: 25px;
}
.img{
width: 45%;
height: auto;
float: right;
text-align: center;
margin-top: 40px;
margin-right: 20px;
}
.anniu{
width: auto;
height: 85px;
margin-top: 350px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="oo">
<div id="p1">简单计算器</div>
<div class="line_01"></div>
</div>
<div class="on">
<div class="anjian">
<input type="radio" class="add" name="gender" value="add" style="zoom: 200%;" />加法
<input type="radio" class="add" name="gender" value="sub" style="zoom: 200%;"/>减法
</div>
<div class="text">
<div id="text01">
数1：<input type="text" id="text_1" placeholder="请输入第一个数字" style="width: 300px; height: 30px; font-size: 25px;"/>
<p></p>
</div>
<div id="text02">
数2：<input type="text" id="text_2" placeholder="请输入第二个数字" style="width: 300px; height: 30px;font-size: 25px;" />
<p></p>
</div>
<div id="text03">
对比：<input type="text" id="text_3" placeholder="等于的数" style="width: 300px; height: 30px;font-size: 25px;"/>
</div>
</div>
<div class="img">
<img src="./right.jpg" width="200px" class="isRight" />
</div>
<div class="anniu">
<input type="button" value="计算" style="width: 130px; height: 80px; font-size: 50px;" class="computed" />
<input type="button" value="交换" style="width: 130px; height: 80px; font-size: 50px;" class="change" />
<input type="button" value="换背景色" style="width: 250px; height: 80px; font-size: 50px;" class="color"/>
</div>
</div>
</div>
</body>
<script>
// 获取数字1
let inp1 = document.querySelector('#text_1')
// 获取数字2
let inp2 = document.querySelector('#text_2')
// 获取对比框的值
let inp3 = document.querySelector('#text_3')
// 获取两个单选按钮
let add = document.querySelectorAll('.add')
// 获取计算按钮
let comBtn = document.querySelector('.computed')
// 获取图片
let rightImg = document.querySelector('.isRight')
// 获取叫唤按钮
let changeBtn = document.querySelector('.change')
// 获取变换背景的按钮
let colorBtn = document.querySelector('.color')
// 获取控制背景颜色的div
let colorGround = document.querySelector('.box')
// 用于接受单选框的value值
let isAdd = ''
// 点击计算按钮时候获取值并计算
comBtn.onclick = function (){
// 每次点击拿到单选框的value
for (let i = 0; i< add.length; i++){
if(add[i].checked){
isAdd = add[i].value
}
}
// isAdd === add 说明是加法
if(isAdd === 'add'){
// 是加法就判断 值1 + 值2 是否等于 值3 进行值得转换 不进行转换就是 1 + 1 = 11 字符串拼接类型
if( inp1.value * 1 + inp2.value * 1 === inp3.value * 1){
// 相等说明计算正确 正确就修改图片
rightImg.src = './right.jpg'
}else{
// 计算不正确 显示错误图片
rightImg.src = './error.jpg'
}
}
// 这里写减法逻辑
else{
// 这里写减法 值1 - 值2 是否等于 值3 进行值得转换
if( inp1.value * 1 - inp2.value * 1 === inp3.value * 1){
// 相等说明计算正确 正确就修改图片
rightImg.src = './right.jpg'
}else{
// 计算不正确 显示错误图片
rightImg.src = './error.jpg'
}
}
}
// 点击交换的时候
let a = 0 // 用于存储a的值 因为涉及到了叫唤
changeBtn.onclick = function (){
// inp1的值存储起来
a = inp1.value
// 表单1交换表单2的值
inp1.value = inp2.value
// 表单2的值交换表单1的值 上面表单1的值已经是表单2的值了 a里面是我们存的表单1的值
inp2.value = a
}
// 变换背景颜色
let color = ['red','blue','green','white', 'yellow']
colorBtn.onclick = function (){
setInterval(()=>{
// 每过5秒生成一个随机的索引 从数组找对应颜色 color[i]
let i = Math.floor(Math.random() * color.length)
// 设置到背景
colorGround.style.backgroundColor = color[i]
},5000)
}
</script>
</html>
主要是input。获取input值。利用eval函数拼接就行。
我昨天写了完整版