前面几天大勇给小伙伴们分享了一些html、css和js的知识。今天就带小伙伴们,用前面的知识实现一个简单的计算器。
工程结构图:
首先画出界面:calc.html
calc.html
"content-type"content="text/html; charset=UTF-8">
"stylesheet"type="text/css"href="../css/calc.css">
"text/javascript"src="../js/jquery-1.8.3.js">
"text/javascript">
$(function() {
//给按钮绑定点击事件
$(".btn").click(function() {
// 1.获取文本框中已经存在的数据
varoldStr = $("#txtcalc").val();
// 2.获取点击按钮上的数字或符号
varnum = $(this).text();
// 3.文本框中将来要显示的数据
varnewStr = oldStr + num;
// 4.把将来要显示的数据赋值给文本框
$("#txtcalc").val(newStr);
});
//给等于号绑定点击事件
$("#btnGetRes").click(function() {
//获取文本框中的值
varstr = $("#txtcalc").val();
//对文本框内的结果进行计算
varres = eval(str);
//把计算的结果赋值给文本框本身
$("#txtcalc").val(res);
});
});
"calc">
"calcTitle">计算器
"txtcalc"type="text"/>
"btnContainer">
"btn">7
"btn">8
"btn">9
"btn">/
"btn">4
"btn">5
"btn">6
"btn">*
"btn">1
"btn">2
"btn">3
"btn">-
"btn">
"btnGetRes">=
"btn">.
"btn">+
添加外部样式:calc.css
@CHARSET"UTF-8";
#calc{
border:1pxsolid#ff94b9;
width:300px;
margin:auto;
}
#calcTitle{
padding:13px20px;
font-size:20px;
font-weight:300;
color:#ff2222;
}
#txtcalc{
outline:none;
width:247px;
margin-left:20px;
height:35px;
font-size:25px;
padding-left:10px;
border:1pxsolid#ff94b9;
color:#ff2222;
}
#btnContainer{
margin:17px20px17px;
}
#btnContainer>table>tbody>tr>td>div{
border:1pxsolid#ff94b9;
padding:13px22px;
margin:7px7px;
background-color:#fdeff3;
color:#E91E63;
cursor:pointer;
}
#btnContainer>table>tbody>tr>td>div:hover{
border:1pxsolid#fd75a4;
background-color:#ffdee7;
}
最终界面效果:
一起动手试试吧,过程中有问题可以给我留言哦~
本文作者 | 大勇
特别敬告 | 未经允许,请勿转载,版权所有,违者必究
领取专属 10元无门槛券
私享最新 技术干货