计算器cal

1.html布局的绘制

(1)计算机的表头部分

<div class="cal-title">

        <h1>计算</h1>

        <h1>换算</h1>

        <h1>税贷</h1>

    </div>

(2)计算机按键内容显示部分

<div class="cal-content">

        <div id="exp"></div>     //计算的表达式区域

        <div id="result"></div>  //计算的结果部分

    </div> 

(3)计算机的按键部分----关键点是iconfont的引入

<div class="cal-number">

        <div class="number" id="clear">AC</div>

        <div class="number">

            <span class="iconfont icon-qingchu" id="backhome"></span>

        </div>

        <div class="number btn">%</div>

        <div class="number btn">÷</div>

        <div class="number btn">7</div>

        <div class="number btn">8</div>

        <div class="number btn">9</div>

        <div class="number btn">x</div>

        <div class="number btn">4</div>

        <div class="number btn">5</div>

        <div class="number btn">6</div>

        <div class="number btn">-</div>

        <div class="number btn">1</div>

        <div class="number btn">2</div>

        <div class="number btn">3</div>

        <div class="number btn">+</div>

        <div class="number active">

            <span class="iconfont icon-04zhuanhuan"></span>   //利用iconfont字体

        </div>

        <div class="number btn">0</div>

        <div class="number btn">.</div>

        <div class="number circle">=</div>

    </div>

2.css样式的绘制----单位利用的是rem单位

该部分的引入是取消页面的原有样式

/* u-reset.css v1.0.10 */

[rem="1920"] {

    font-size: 5.2083333333vw

}

[rem="750"] {

    /* 相当于 font-size:100px */

    font-size: 13.333333333vw

}

* {

    -webkit-tap-highlight-color: transparent

}

html {

    -webkit-text-size-adjust: 100%

}

body {

    margin: 0;

    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

    font-size: 16px

}

figure,

p {

    margin: 0

}

h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 0;

    padding: 0;

    font-weight: 400

}

dd,

dl,

dt,

li,

ol,

ul {

    margin: 0;

    padding: 0;

    list-style: none

}

a {

    background-color: transparent;

    text-decoration: none;

    color: #000;

}

img {

    border: 0

}

table {

    border-collapse: collapse;

    border-spacing: 0

}

td,

th {

    padding: 0

}

button,

input,

select,

textarea {

    color: inherit;

    font: inherit;

    margin: 0

}

textarea {

    overflow: auto

}

article,

aside,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section {

    display: block

}

template {

    display: none

}

.hidden2,

.hidden3,

.hidden4,

.hidden5 {

    display: -webkit-box;

    /* autoprefixer:off */

    -webkit-box-orient: vertical;

    overflow: hidden

}

.hidden1 {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap

}

.hidden2 {

    -webkit-line-clamp: 2

}

.hidden3 {

    -webkit-line-clamp: 3

}

.hidden4 {

    -webkit-line-clamp: 4

}

.hidden5 {

    -webkit-line-clamp: 5

}

.clearfix::after,

.clearfix::before {

    content: "";

    width: 0;

    height: 0;

    display: block;

    clear: both

}

该部分的引入是对页面元素进行一些样式的布局

body{

    padding: 0.1rem 0.38rem;

}

.cal-title{

    width: 3.06rem;

    height: 0.5rem;

    font-size: 0.2rem;

    font-weight: 400;

    display: flex;

    justify-content: space-between;

}

.cal-content{

    height: 4.16rem;

    padding: 0.25rem;

    box-sizing: border-box;

    background-color: #fff;

    border-bottom: 1px solid #ccc;

}

.cal-content #exp{

    font-size: 0.5rem;

    height: 0.8rem;

}

.cal-content #result{

    font-size: 1.2rem;

}

/* 内容部分结束 */

.cal-number{

    display: flex;

    flex-wrap: wrap;

}

.cal-number .number{

    width: 25%;

    height: 1.68rem;

    /* height: 1.3rem; */

    text-align: center;

    line-height: 1.68rem;

    font-size: 0.5rem;

}

.cal-number .number.circle{

    width: 25%;

    border-radius: 50%;

    background-color: #f97932;

}

.cal-number .number:first-child{

    color: #f97932;

}

.cal-number .number:nth-child(2){

    color: #f97932;

}

.cal-number .number:nth-child(3){

    color: #f97932;

}

.cal-number .number:nth-child(4n){

    color: #f97932;

}

.cal-number .number:last-child{

    color: #fff;

}

.number.active{

    color: #f97932;

}

.cal-number .number:active{

    color: #ccc;

}

3.js对计算器实现计算功能

整体思路 ：首先页面的每一个元素都需要点击事件，可以给其父元素进行添加，进而利用事件冒泡作用于每一个元素身上，e.target可以获取当前点击的是哪一个，对于单独需要处理的模块，比如：整体页面的清除AC(直接让exp的textContent = ' ')，输入错误后需要删除输入的内容x(字符串的slice(-1,0)方法，删除最后一位)，×和÷符号的替换(字符串的replace(‘×’，‘*’)的方法,替换的时候需要对全局进行匹配，否则只会替换本次)，以及=结果的计算(window.eval(' '))，对于特殊需要处理的元素，最好先行加上id。

//这是表达式

var $exp = document.querySelector('#exp');

//这是结果

var $result = document.querySelector('#result');

//这是等于

var $equal = document.querySelector('.number.circle');

//这是清除

var $clear = document.querySelector('#clear');

//这是后退

var $backhome = document.querySelector('#backhome');

//这是表达式页面显示内容

var exp = '';

// 选取所有的按钮

var $btns = document.querySelectorAll('.btn');

function btn_click(){

    exp = exp + this.textContent;

    $exp.textContent = exp;

}

for(var i = 0;i<$btns.length;i++){

    $btns[i].onclick = btn_click;

}

//计算按钮点击的结果 按钮添加的内容全部都在exp里面存放

function result_display(){

    // 匹配所有的x和/

    exp = exp.replace('x','*');

    // exp = exp.replace(/x/g,'*').replace(/÷/g,'/');

    $result.textContent = eval(exp);

}

$equal.onclick = result_display;

//清除函数 点击清除 exp和result部分内容清除

function clear_click(){

    $exp.textContent = '';

    $result.textContent = '';

    exp = '';

}

$clear.onclick = clear_click;

//后退函数 点击后退 删除一个元素

function backhome_click(){

    exp = exp.slice(0,-1)

    $exp.textContent = exp;

}

$backhome.onclick = backhome_click;