大勇说：使用前几天分享的知识来实现一个简单的计算器

前面几天大勇给小伙伴们分享了一些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;

}

最终界面效果：

一起动手试试吧，过程中有问题可以给我留言哦~

本文作者 | 大勇

特别敬告 | 未经允许，请勿转载，版权所有，违者必究