用HTML做计算器
前言
由于上节课我们学习了html,今天我们就来练习一下。
开肝
创建基础框架
首先，我们先创建一个新文本文档，并把后缀名改为.html。
右键，打开方式，选择vscode编辑器。
vscode界面出现，按下英文问号，一个基础的框架出现了。
构思
按照上节课的构思方法，开始构思。
我画了张图简单的标了一下一个小框架就出现了，我们要开始搭了。
按下回车。调整一下
把符号文字加一下，把class也加上。
这是我后来改的class虽然很乱，但是先凑合着看吧，后面还要用，在最后一个div后面加上这一段，加完这一段，你的计算器就可以加减了。
<script>
function init() {
n1 = null
n2 = null
flag = null
n3 = null
}
init()
$('.zero').click(function () {
init()
$('.msg').text('')
})
$('.per').click(function () {
str=$('.msg').text()*100
$('.msg').text(str + '$')
})
$('.zf').click(function () {
str=$('.msg').text()*-1
$('.msg').text(str)
if(flag ==null){
n1 = str
}else{
n2 = str
}
})
$('.eq').click(function () {
if (n1 != null && n2 != null && flag != null) {
switch (flag) {
case '+': n3 = n1 + n2; break;
case '-': n3 = n1 - n2; break;
case '*': n3 = n1 * n2; break;
case '/': n3 = n1 / n2; break;
}
$('.msg').text(n3)
init()
}
})
$('.f').click(function () {
str = $(this).text()
if (n1 != null) {
clear()
flag=str
}
$('.msg').text(str)
})
$('.n').click(function () {
str = $(this).text()
if (flag == null) {
if (n1 == null) {
clear()
}
$('.msg').append(str)
n1 = $(".msg").text() * 1
} else {
if (n2 == null) {
clear()
}
$('.msg').append(str)
n2 = $(".msg").text() * 1
}
console.log(n1,flag, n2)
})
function clear() {
$(".msg").text(' ')
}
</script>
这里不做太多解释，即将一下其工作原理，假如我按下1，它就在变量的最后加上数字1，按下等号是就运算变量里的内容。
修饰
这里直接把代码放上来，我的键盘要冒烟了。
<style>
button {
width: 50px;
height: 50px;
background: skyblue;
border-radius: 50px;
border: 3px solid #fff;
}
.btns {
width: 200px;
display: flex;
flex-wrap: wrap;
}
.calc{
background: linear-gradient(red,orange);
padding: 20px;
width: 200px;
}
.w {
width: 100px;
}
.msg {
width: 200px;
height: 70px;
line-height: 50px;
background: #000;
color: #fff;
padding: 0 20px;
box-sizing: border-box;
border-radius: 20px;
}
</style>
<script src="js/jquery.js"></script>
注意这段代码的最后导入了jquery库，需要安装，最后把jquery放在js文件夹里。但这这节课中不要用，可不下载。
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 50px;
height: 50px;
background: skyblue;
border-radius: 50px;
border: 3px solid #fff;
}
.btns {
width: 200px;
display: flex;
flex-wrap: wrap;
}
.calc{
background: linear-gradient(red,orange);
padding: 20px;
width: 200px;
}
.w {
width: 100px;
}
.msg {
width: 200px;
height: 70px;
line-height: 50px;
background: #000;
color: #fff;
padding: 0 20px;
box-sizing: border-box;
border-radius: 20px;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="calc">
<div class="msg">欢迎使用</div>
<div class="btns">
<button class="zero">AC</button>
<button class="zf">+/-</button>
<button class="per">%</button>
<button class="f">/</button>
<button class="n">7</button>
<button class="n">8</button>
<button class="n">9</button>
<button class="f">*</button>
<button class="n">4</button>
<button class="n">5</button>
<button class="n">6</button>
<button class="f">-</button>
<button class='n'>1</button>
<button class='n'>2</button>
<button class='n'>3</button>
<button class="f">+</button>
<button class="w">0</button>
<button class="f">.</button>
<button class="eq">=</button>
</div>
</div>
<script>
function init() {
n1 = null
n2 = null
flag = null
n3 = null
}
init()
$('.zero').click(function () {
init()
$('.msg').text('')
})
$('.per').click(function () {
str=$('.msg').text()*100
$('.msg').text(str + '$')
})
$('.zf').click(function () {
str=$('.msg').text()*-1
$('.msg').text(str)
if(flag ==null){
n1 = str
}else{
n2 = str
}
})
$('.eq').click(function () {
if (n1 != null && n2 != null && flag != null) {
switch (flag) {
case '+': n3 = n1 + n2; break;
case '-': n3 = n1 - n2; break;
case '*': n3 = n1 * n2; break;
case '/': n3 = n1 / n2; break;
}
$('.msg').text(n3)
init()
}
})
$('.f').click(function () {
str = $(this).text()
if (n1 != null) {
clear()
flag=str
}
$('.msg').text(str)
})
$('.n').click(function () {
str = $(this).text()
if (flag == null) {
if (n1 == null) {
clear()
}
$('.msg').append(str)
n1 = $(".msg").text() * 1
} else {
if (n2 == null) {
clear()
}
$('.msg').append(str)
n2 = $(".msg").text() * 1
}
console.log(n1,flag, n2)
})
function clear() {
$(".msg").text(' ')
}
</script>
</body>
</html>
最后
这篇结束了，有问题的记得私信，敬请期待！
标签：text,HTML,str,计算器,msg,n1,n2,null From： https://blog.csdn.net/2401_82944012/article/details/140146249