<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mini计算器</title>
<style type="text/css">
body {
margin: 100px
}
#app {
border: 1px solid #ccc
width: 175px
height: 285px
padding: 10px
border-radius: 4px
}
#app .btn {
width: 40px
height: 40px
border: 1px solid #ccc
border-radius: 2px
background-color: white
margin-bottom: 10px
cursor: pointer
color: #666
font-weight: bold
}
#app .btn:hover {
background-color: #333
color: white
}
#input-box {
width: 161px
text-align: right
height: 30px
border: 1px solid #ccc
border-radius: 2px
margin-bottom: 10px
background-color: white
padding: 0 5px
}
#app .btn-double {
width: 84px
}
</style>
</head>
<body>
<div id="app">
<result-box :get-value="resultvalue"></result-box>
<calc-box>
<button class="btn" @click="clear">C</button>
<button class="btn" @click="sign">+/-</button>
<button class="btn" @click="sambol('*')">*</button>
<button class="btn" @click="sambol('/')">/</button>
<button class="btn" @click="input('1')">1</button>
<button class="btn" @click="input('2')">2</button>
<button class="btn" @click="input('3')">3</button>
<button class="btn" @click="sambol('-')">-</button>
<button class="btn" @click="input('4')">4</button>
<button class="btn" @click="input('5')">5</button>
<button class="btn" @click="input('6')">6</button>
<button class="btn" @click="sambol('+')">+</button>
<button class="btn" @click="input('7')">7</button>
<button class="btn" @click="input('8')">8</button>
<button class="btn" @click="input('9')">9</button>
<button class="btn" @click="sambol('%')">%</button>
<button class="btn" @click="input('0')">0</button>
<button class="btn" @click="point">.</button>
<button class="btn btn-double" @click="calculate">=</button>
</calc-box>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 去掉提示
// Vue.config.productionTip=false
const resultBox = {
// 父子通信
props: ["getValue"],
// 计算属性
computed: {
value() {
return this.getValue
}
},
template: `<input id="input-box" type="text" v-model="value" readonly />`
}
const calcBox = {
template: `<div id="calc-box">
<slot></slot>
</div>
`
}
const app = new Vue({
el: "#app",
data: {
resultvalue: 0
},
// 组件
components: {
// 计算器结果框
'result-box': resultBox,
// 计算器输入面板组件
'calc-box': calcBox
},
methods: {
// 输入数值 累加
input(param) {
// 拒绝开始0和反复0 防止0.被和谐
if (parseInt(this.resultvalue) === 0 &&!/0[\.|\s]/.test(this.resultvalue)) {
this.resultvalue = param
} else {
this.resultvalue += param
}
},
// 加减乘除
sambol(param) {
// 有空格显得更加好看
this.resultvalue += ' ' + param + ' '
},
// 处理小数点
point() {
const strValue = this.toStr()
// 得到最后一位数值
const lastNumber = strValue.substring(strValue.lastIndexOf(' '))
// 判断是否已经存在小数点
// 存在
if (lastNumber.indexOf('.') !== -1) {
return
} else {
this.resultvalue += '.'
}
},
// 转换成字符串
toStr() {
return this.resultvalue.toString()
},
clear(){
this.resultvalue=0
},
// 正负号设置
sign(){
const strValue=this.toStr()
let lastNumber = strValue.substring(strValue.lastIndexOf(' '))
// 得到之前的数值+符号
let prevNumber=strValue.substr(0,strValue.lastIndexOf(' '))
// 判断当前是否有正负号
if(lastNumber.indexOf('-')===-1){
lastNumber=' -'+lastNumber.trim()
}
else{
lastNumber=' '+lastNumber.trim().substr(1)
}
this.resultvalue=prevNumber+lastNumber
},
calculate(){
try{
this.resultvalue=eval(this.resultvalue)
}catch(e){
//TODO handle the exception
alert('no')
}
}
}
})
</script>
</body>
</html>
html网页计算器代码编写过程如下：
1.首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码
<table id="calculater" onClick="calculater()">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey" >1</td>
<td class="numberkey" >2</td>
<td class="numberkey" >3</td>
<td class="numberkey" >+</td>
<td class="numberkey" id="deletesign">c</td>
</tr>
<tr>
<td class="numberkey" >4</td>
<td class="numberkey" >5</td>
<td class="numberkey" >6</td>
<td class="numberkey" >-</td>
<td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td>
</tr>
<tr>
<td class="numberkey" >7</td>
<td class="numberkey" >8</td>
<td class="numberkey" >7</td>
<td class="numberkey" >*</td>
</tr>
<tr >
<td class="numberkey" >+/-</td>
<td class="numberkey" >0</td>
<td class="numberkey" >.</td>
<td class="numberkey" >/</td>
</tr>
上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了
colspan="5" 是合并五列的意思，表示这个单元格要占五列
rowspan="3"是合并三行的意思，表示这个单元格要占三行
效果如下，这样一个简单的架构就完成了
2.接下来就是css的设计，下面是代码
*{
padding:0
margin:1px
}
#calculater{
margin: auto
margin-top: 30px
border: solid 6px #2371D3
border-spacing: 0px
}
#display{
width: 100%
height: 30px
border-bottom: solid 4px #2371D3
font-weight: bold
color: #193D83
font-family: 黑体
padding-left: 2px
}
.numberkey{
cursor: pointer
width: 40px
height: 30px
border: solid 1px #FFFFFF
background: #2371D3
color: #ffffff
text-align: center
font-weight: bold
font-family: 黑体
}
#equality{
cursor: pointer
width: 40px
height: 100%
background: #2371D3
border: solid 1px #FFFFFF
color: #ffffff
text-align: center
font-weight: bold
font-family: 黑体
}
.numberkey:hover{
background: #EA6F30
}
#equality:hover{
background: #EA6F30
}
以上是css代码，比较简单
border-spacing: 0px
这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px能使其默认距离为零，没有这句会比较难设计好看的样式。
cursor: pointer
这里代码的意义是：使鼠标放在上面时变成一个手的标志
效果如下
3.接下来是javascript的代码，按照思路来一点点写
首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号
所以我们在table标签里加上onClick="calculater()"，添加一个点击事件
然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。
这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容
function calculater(){
results=event.srcElement.innerText
}
results就是单元格的内容
4.当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值
display.innerText=results
这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么
calculater()的代码就变成这样
function calculater(){
results=event.srcElement.innerText
display.innerText=results
}
这样我们就能输出我们点击的单元格内容
5.但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为
var results=""
function calculater(){
results+=event.srcElement.innerText
display.innerText=results
}
设置results为全局变量，event.srcElement.innerText用+=累加进results，
这样我们就能输入并显示一条算式
6.我们在“=”单元格标签里加上onClick="resultscalcaulte()"，计算这个结果
function resultscalcaulte(){
calresults=eval(results)
display.innerText=calresults
}
eval()能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来
7.加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上
if (event.srcElement.innerText=="=") {
return
}
使点击“=”单元格触发的calculater()函数得不到任何结果
最后得到最简单的计算器运算代码
var results=""
var calresults=""
function calculater(){
if (event.srcElement.innerText=="=") {
return
}
results+=event.srcElement.innerText
display.innerText=results
}
function resultscalcaulte(){
calresults=eval(results)
display.innerText=calresults
}
8.下面是计算7*8的结果
function test(){var txt1 = document.getElementById("txt1"),
txt2 = document.getElementById("txt2"),
txt3 = document.getElementById("txt3"),
opt = document.getElementById("sel")
txt3.value = eval(txt1.value + opt.value + txt2.value)//eval函数可计算某个字符串，并执行其中的的js代码
} <input type="text" id="txt1" />
<select id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" />
=
<input type="text" id="txt3" />
<input type="button" id="btn" value="计算" onclick="test()"/>
