Js与BootStrap实现简易计算器

来源:互联网 发布:mac os恢复出厂设置 编辑:程序博客网 时间:2024/05/28 15:06

Js与BootStrap实现简易计算器

页面展示主要用到了Bootstrap的样式和布局
源码如下

这里写图片描述

<div class="container"> <div class="row"> <button class="col-xs-4"  id='Show'   ></button> </div> </div><div class="container">    <div class="row">    <button class="col-xs-1 btn btn-success" id='1' onclick='Num(this)'>1</button>    <button class="col-xs-1 btn btn-success" id='2' onclick='Num(this)'>2</button>    <button class="col-xs-1 btn btn-success" id='3' onclick='Num(this)'>3</button>     <button class="col-xs-1 btn btn-success" id='+' onclick='Num(this)'>+</button>    </div>  <div class="row">         <button class="col-xs-1 btn btn-success" id='4' onclick='Num(this)'>4</button>    <button class="col-xs-1 btn btn-success" id='5' onclick='Num(this)'>5</button>    <button class="col-xs-1 btn btn-success" id='6' onclick='Num(this)'>6</button>        <button class="col-xs-1 btn btn-success" id='-' onclick='Num(this)'>-</button>    </div>      <div class="row">          <button class="col-xs-1 btn btn-success" id='7' onclick='Num(this)'>7</button>    <button class="col-xs-1 btn btn-success" id='8' onclick='Num(this)'>8</button>    <button class="col-xs-1 btn btn-success" id='9' onclick='Num(this)'>9</button>        <button class="col-xs-1 btn btn-success" id='*' onclick='Num(this)'>x</button>    </div>      <div class="row">    <button class="col-xs-1 btn btn-success" id='C' onclick='Clear()'>C</button>    <button class="col-xs-1 btn btn-success" id='0' onclick='Num(this)'>0</button>    <button class="col-xs-1 btn btn-success" id='=' onclick='Eval()'onblur='Clear()'>=</button>        <button class="col-xs-1 btn btn-success" id='/' onclick='Num(this)'>/</button>    </div></div>

主要功能实现

主要功能有:实现简单的加减乘除,归零键清空,以及再计算

Js代码如下

<script type="text/javascript">function Num(obj){    //将每一个按钮的值抓取到页面    document.getElementById('Show').innerText +=obj.id;}function Clear(){    //点击归零键时清空展示框    //当等于键失去焦点时调用    document.getElementById('Show').innerText=null;}function Eval(){    //调用eval()函数实现计算功能    var Evals=document.getElementById('Show').innerText;    document.getElementById('Show').innerText=eval(Evals);}</script>
原创粉丝点击