二、练习内容
从零实现一个计算器，并制作成 APP，并实现网页模式
三、教程如下
1.软件 vscode、hbuilder
计算器 A 符号 B = result + - * / %
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" href="global.css">
<script src="calc.js" type="text/javascript"></script>
</head>
<body>
<div class="calc">
<!-- 输入框 -->
<input type="text" id="inputA">
<!-- 选择框 -->
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<!-- 输入框 -->
<input type="text" id="inputB">
<!-- 计算按钮 -->
<button id="btn" onclick="result()">计算</button>
<!-- 结果 -->
<input type="text" id="result">
</div>
</body>
</html>
global.css
body,html{
width: 100%;
height: 100%;
}
.calc{
display: flex;
flex-direction: row;
justify-content: center;
}
calc.js
function result() {
var inputA = document.getElementById("inputA").value;
var mysymbol = document.getElementById("select").value;
var inputB = document.getElementById("inputB").value;
if (mysymbol == "+") {
document
.getElementById("result")
.setAttribute("value", parseInt(inputA) + parseInt(inputB));
} else if (mysymbol == "-") {
document
.getElementById("result")
.setAttribute("value", parseInt(inputA) - parseInt(inputB));
} else if (mysymbol == "*") {
console.log(parseInt(inputA));
document
.getElementById("result")
.setAttribute("value", parseInt(inputA) * parseInt(inputB));
} else if (mysymbol == "/") {
document
.getElementById("result")
.setAttribute("value", parseFloat(inputA) / parseFloat(inputB));
} else {
document
.getElementById("result")
.setAttribute("value", parseFloat(inputA) % parseFloat(inputB));
}
}
// 1 2 3
// 1.2 3.4 4.6
2.打包
2.1创建app项目
2.2复制文件html
2.3复制js和css +改地址
2.4设置app图标
2.5使用公有证书
2.6打包完成
3.结果
更多推荐
（简单记录）从零实现一个计算器,并制作成 APP,并实现网页模式
发布评论