网页界面设计一个简单的计算器

胡汉九 · 发表于 2021-11-14 16:03:20

网页界面设计一个简单的计算器

在一个网页界面设计一个简单的计算器，可以实现简单的加减算法，加上幂次方和开方运算。

界面实现以后的网页为：
捕获.PNG

源代码为：

<font color="purple"><!DOCTYPE html></font>
<html lang="en">
<head>
<meta charset="UTF-8">
<font color="cyan"><title>简易计算机</title></font>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" align="center" >
<br>
<h1 ><span style="background:darkblue; ">简易计算机</span></h1>
<br>以下计算机可以实现数字进行的加减，幂次方以及开方运算
<hr>
<br>
<br>
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="^">^</option>
<option value="s">s</option>
<lect>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calculator">
<input type="text" v-model="result">
<br>
<br>
<br>
<h5 >
<span style="background: skyblue">+执行加法运算
<br> -执行减法运算
<br> ^执行n1的幂次方运算
<br> s执行n1的开n2方运算
</span>
<h5>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
opt: '-',
result: 0
},
methods: {
calculator() {
switch (this.opt) {
case '+':
this.result = Number(this.n1) + Number(this.n2);
break;
case '-':
this.result = Number(this.n1) - Number(this.n2);
break;
case '^':
this.result = Math.pow(Number(this.n1),Number(this.n2));
break;
case 's':
this.result = Math.pow(Number(this.n1),1/Number(this.n2));
break;
}
}
}
});
</script>
</body>
<html>
<script>
(function() {
var ws = new WebSocket('ws://' + window.location.host + '/jb-server-page? reloadServiceClientId=103');
ws.onmessage = function (msg) {
if (msg.data === 'reload') {
window.location.reload();
}
if (msg.data.startsWith('update-css ')) {
var messageId = msg.data.substring(11);
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.rel !== 'stylesheet') continue;
var clonedLink = link.cloneNode(true);
var newHref = link.href.replace(/(&|\?)jbUpdateLinksId=\d+/, "$1jbUpdateLinksId=" + messageId);
if (newHref !== link.href) {
clonedLink.href = newHref;
}
else {
var indexOfQuest = newHref.indexOf('?');
if (indexOfQuest >= 0) {
// to support ?foo#hash
clonedLink.href = newHref.substring(0, indexOfQuest + 1) + 'jbUpdateLinksId=' + messageId + '&' +
newHref.substring(indexOfQuest + 1);
}
else {
clonedLink.href += '?' + 'jbUpdateLinksId=' + messageId;
}
}
link.replaceWith(clonedLink);
}
}
};
})();
</script>

复制代码