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>

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

报告相同问题？