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>
阅读全文
2 0
- Js与BootStrap实现简易计算器
- js实现简易计算器
- js实现简易计算器
- 用js实现简易计算器
- js css 实现简易计算器
- js实现简易计算器功能
- js实现简易的计算器
- 简易的JS计算器
- Js简易计算器
- 简易js计算器
- js制作简易计算器
- js之简易计算器
- js网页简易计算器
- 用js实现简易计算器(只能实现加减乘除)
- 计算器简易实现
- javascript实现简易计算器
- 实现简易计算器
- 简易计算器的实现
- 第一章 编程初步
- 实用git管理项目,托管在码云上!
- rhcsa学习杂记—centos7命令行配置网络连接以及修改主机名
- 妙趣横生:aspx列表展示数据
- 常用的正则表达式
- Js与BootStrap实现简易计算器
- 剑指offer—数组中出现次数超过一半的数字
- 浅析开源数据库MySQL架构
- The user specified as a definer ('root'@'%') does not exist
- Java关键字transient和volatile
- 图片处理之模式匹配(match_template)
- 二、Spring Cloud系列:Zipkin客户端配置
- Go语言:同个包下不同文件不能互相调用函数
- 吐槽