网页界面设计一个简单的计算器
网页界面设计一个简单的计算器在一个网页界面设计一个简单的计算器，可以实现简单的加减算法，加上幂次方和开方运算。
界面实现以后的网页为：
源代码为：
<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;
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>
页:
[1]