加法运算
这是我写的一个简单的加法运算法则，可以根据这个加法变换出多种，比如加减乘除都能去实现，可以说非常实用。如果有更好的办法或者有什么不懂的问题都可以多多和我交流哟。
这是设计出来的整体样式预览。
image.png
1、首先第一步我们先构思一个想法，这里我用到了百度脑图，把大致的想法归纳一遍，然后去逐步实现。
image.png
2、按照上面所说，先创建三个文本框，和两个按钮并给文本框赋值为id、给按钮赋值为onclick。
代码如下：
<input type="text" id="text1"></input>
<button type="button" onclick="mybutton()">+</button>
<input type="text" id="text2"></input>
<button type="button" onclick="mybutton2()">=</button>
<input type="text" id="text3"></input>
3、然后由于样式问题，需要对文本框以及具体位置做一个定位，和样式的美化说以此时我们应当新建一个div，并给他赋上一个id。
代码如下：
<div id="center">
<input type="text" id="text1"></input>
<button type="button" onclick="mybutton()">+</button>
<input type="text" id="text2"></input>
<button type="button" onclick="mybutton2()">=</button>
<input type="text" id="text3"></input>
</div>
4、给div赋上id之后，此时我们新建一个文件夹，给文本添加样式，注意两个文件夹要用链接样式链接。
代码如下：
<link href="css/style.css" rel="stylesheet">
#text1{
width: 70px;
height: 20px;
}
#center{
text-align: center;
padding: 100px;
}
#text2{
width: 70px;
height: 20px;
}
#text3{
width: 70px;
height: 20px;
}
5、具体框架搭好之后，我们开始给三个文本框赋值变量 x，y，z。记住给文本框赋值是要用value哦。
代码如下：
var x = document.getElementById('text1').value;
var y = document.getElementById('text2').value;
var z = document.getElementById('text3').value;
6、之后我们就根据不同的需要提供不同的算法计算值。
代码如下：
var z=Number(x)+Number(y);
document.getElementById('text3').value=z;
7、最后我把所有的代码梳理一遍供大家参考使用，谢谢。
代码如下：
<!DOCTYPE HTML>
<HTML>
<head>
<title></title>
<link href="css/style.css" rel="stylesheet">
<script>
function mybutton2() {
var x = document.getElementById('text1').value;
var y = document.getElementById('text2').value;
var z = document.getElementById('text3').value;
var z=Number(x)+Number(y);
document.getElementById('text3').value=z;
}
</script>
<body>
<div id="center">
<input type="text" id="text1"></input>
<button type="button" onclick="mybutton()">+</button>
<input type="text" id="text2"></input>
<button type="button" onclick="mybutton2()">=</button>
<input type="text" id="text3"></input>
</div>
</body>
</head>
</HTML>
网友评论