<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js计算器案例</title>
<style type="text/css">
#showdiv{
border:solid 1px;
width: 300px;
height: 400px;
text-align: center;
}
input[type=text]{
margin-top: 10px;
width: 290px;
height: 40px;
font-size:20px ;
}
input[type=button]{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight:bold ;
}
</style>
<script type="text/javascript">
function test(btn){
var num=btn.value;
switch(num){
case "=":
document.getElementById("inp").value=eval(document.getElementById("inp").value);
break;
case "c":
document.getElementById("inp").value="";
break;
default:
document.getElementById("inp").value=document.getElementById("inp").value+num;
break;
}
}
</script>
</head>
<body>
<div id="showdiv">
<input type="text" name="" id="inp" value="" readonly="readonly"/><br />
<input type="button" name="" id="" value="1" onclick="test(this)"/>
<input type="button" name="" id="" value="2" onclick="test(this)"/>
<input type="button" name="" id="" value="3" onclick="test(this)"/>
<input type="button" name="" id="" value="4" onclick="test(this)"/><br />
<input type="button" name="" id="" value="5" onclick="test(this)"/>
<input type="button" name="" id="" value="6" onclick="test(this)"/>
<input type="button" name="" id="" value="7" onclick="test(this)"/>
<input type="button" name="" id="" value="8" onclick="test(this)"/><br />
<input type="button" name="" id="" value="9" onclick="test(this)"/>
<input type="button" name="" id="" value="+" onclick="test(this)"/>
<input type="button" name="" id="" value="-" onclick="test(this)"/>
<input type="button" name="" id="" value="*" onclick="test(this)"/><br />
<input type="button" name="" id="" value="0" onclick="test(this)"/>
<input type="button" name="" id="" value="/" onclick="test(this)"/>
<input type="button" name="" id="" value="c" onclick="test(this)"/>
<input type="button" name="" id="" value="=" onclick="test(this)"/>

</div>
</body>
</html>

js计算器案例的更多相关文章

  1. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  2. 早期练手：功能相对比较完善的 js 计算器

    第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. 正則表達式--js使用案例

    前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...

  5. JS小案例：循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  6. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  7. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  8. js计算器---转

    至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...

  9. node.js 爬虫案例

    本案例是爬的一部小说,爬取并存在本地 使用了动态浏览器头部信息,和 动态ip代理, 这2个方式可以有效的伪装自己,不至于被反爬,然后拉黑,之前已有记录,浏览器头部信息,也记录的有, app.js im ...

随机推荐

  1. ubuntu Qt5 opencv3.4 项目配置

    #------------------------------------------------- # # Project created by QtCreator 2019-03-25T14:14 ...

  2. noi2729 Blah数集

    Blah数集 大数学家高斯小时候偶然间发现一种有趣的自然数集合Blah,对于以a为基的集合Ba定义如下: (1) a是集合Ba的基,且a是Ba的第一个元素: (2)如果x在集合Ba中,则2x+1和3x ...

  3. Ubuntu 安装ＱＴ５ 后编译程序报错： FindQt5Widgets.cmake

    安装QT5．4后,需要编译一个C++程序. Cmakelist 有find_package(Qt5Widgets REQUIRED),cmake 报错如下: CMake Error at CMakeL ...

  4. 通过MySql自动同步刷新redis

    在服务端开发过程中,一般会使用MySQL等关系型数据库作为最终的存储引擎,Redis其实也可以作为一种键值对型的数据库,但在一些实际场景中,特别是关系型结构并不适合使用Redis直接作为数据库.这俩家 ...

  5. Python实现二叉树的遍历

    二叉树是有限个元素的集合,该集合或者为空.或者有一个称为根节点(root)的元素及两个互不相交的.分别被称为左子树和右子树的二叉树组成. 二叉树的每个结点至多只有二棵子树(不存在度大于2的结点),二叉 ...

  6. ceph中查看一个rbd的image的真实存储位置

    1.新建一个image存储 rbd create hzb-mysql --size 2048 2.查看hzb-mysql的所有对象 一个rbd image实际上包含了多个对象(默认情况下是image_ ...

  7. Ceph介绍

    1. 介绍 云硬盘是IaaS云平台的重要组成部分,云硬盘给虚拟机提供了持久的块存储设备.目前的AWS 的EBS(Elastic Block store)给Amazon的EC2实例提供了高可用高可靠的块 ...

  8. 51Nod 1554 欧姆诺姆和项链 (KMP)

    题意:中文题. 析:首先要使用KMP的失配函数 f ,对于长度为 i 的串,如果存在循环节那么  i % (i-f[i]) == 0,循环节的长度就是 i - f[i] ,当然次数就是 i / (i- ...

  9. ContextLoaderListener和Spring MVC中的DispatcherServlet学习 随手记

    Servlet上下文关系 DispatcherServlet的上下文是通过配置servlet的contextConfigLocation来加载的,默认实现是XmlWebApplicationConte ...

  10. 学习python2

    字符串遍历 列表遍历 元组遍历 字典遍历 <1> 遍历字典的key(键) <2> 遍历字典的value(值) <3> 遍历字典的项(元素) <4> 遍历 ...