m0_59753362 2021-06-27 23:12 采纳率: 100%
浏览 11
已采纳

有dalao可以完整的做下不，不太会做

 

  • 写回答

1条回答 默认 最新

  • CSDN专家-天际的海浪 2021-06-28 00:08
    关注

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

    <!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>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。