icendjoennhdind 2021-06-27 23:42 采纳率: 75%
浏览 46
已采纳

关于使用js写计算器的问题

如何实现判断输入框3是否正确并显示相应图像？

如何实现两数交换？

 

  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2021-06-27 23:46
    关注

    设置        <img src="1.jpg" width="80" height="70" id="pic" alt="" />

    用

    if (a+b==c) {
        document.getElementById("pic").src = "正确.jpg"
    } else {
        document.getElementById("pic").src = "错误.jpg"
    }
     

     

    完整的代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#calc {
	background-color: #f90;
	width: 350px;
	height: 300px;
	border-radius: 30px 30px 0px 0px;
	padding: 5px;
	margin: 0 auto;
}
h2 {
	text-align: center;
	color: #fff;
	font-size: 40px;
	margin: 5px;
}
.ctbox {
	float: left;
	width: 50%;
	text-align: center;
}
.inputbox img {
	float: right;
}
.binbox {
	margin: 10px;
	text-align: center;
}
</style>
</head>
<body>
<div id="calc">
	<h2>简单计算器</h2>
	<hr />
	<div class="ctbox">
		<input type="radio" name="ct" id="ct1" checked="checked" />加法
	</div>
	<div class="ctbox">
		<input type="radio" name="ct" id="ct2"/>减法</p>
	</div>
	<div class="inputbox">
		<img src="1.jpg" width="80" height="60" id="pic" alt="" />
		数 1：<input type="text" id="num1" value="" /><br />
		数 2：<input type="text" id="num2" value="" /><br />
		对比：<input type="text" id="num3" value="" /><br />
	</div>
	<div class="binbox">
		<input type="button" value="计算" onclick="calc();" />
		<input type="button" value="交接" onclick="swap();" />
		<input type="button" value="换背景色" onclick="reBackgroundColor();" />
	</div>
</div>
<script type="text/javascript">
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = document.getElementById("num3");
var ct1 = document.getElementById("ct1");
var ct2 = document.getElementById("ct2");
function calc() {
	var a = parseFloat(num1.value);
	var b = parseFloat(num2.value);
	var c = parseFloat(num3.value);
	if (ct1.checked) {
		var s = a+b;
	}
	else if (ct2.checked) {
		var s = a-b;
	}
	if (s==c) {
		document.getElementById("pic").src = "正确.jpg"
	} else {
		document.getElementById("pic").src = "错误.jpg"
	}
}
function swap() {
	var a = num1.value;
	num1.value = num2.value;
	num2.value = a;
}
var timer;
function reBackgroundColor() {
	var arr = ["#f00","#00f","#0f0","#fff","#ff0"];
	clearInterval(timer);
	function p(){
		var n = Math.floor(Math.random()*arr.length);
		document.getElementById("calc").style.backgroundColor = arr[n];
	}
	p();
	timer = setInterval(p, 5000);
	
}
</script>
</body>
</html>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 mmocr的训练错误，结果全为0
  • ¥15 python的qt5界面
  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀