m0_58858737
2021-06-28 18:38
采纳率: 75%
浏览 19

JS+css实现该页面

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 张海智_ 2021-06-29 09:15
    已采纳
    <!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%;" />加法
    					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    					<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" />
    					&nbsp;&nbsp;&nbsp;
    					<input type="button" value="交换" style="width: 130px; height: 80px; font-size: 50px;" class="change" />
    					&nbsp;&nbsp;&nbsp;
    					<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函数拼接就行。

    点赞 评论
  • 张海智_ 2021-06-29 09:10

    我昨天写了完整版

    点赞 评论

相关推荐 更多相似问题