<!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. c# ftp 判断目录是否存在和创建文件夹

    工作中项目一直使用的ftp上传日志文件出现了问题,新的服务器搭建好后,日志无法上传.正好来学习一下ftp. 程序中的流程是,一个计时器,每分钟检测配置文件中本地日志文件路径下有没有日志文件,如果有就上 ...

  2. 天云CloudStack 改进版

    整体风格   创建区域

  3. POST 与 GET请求区别

     

  4. redis 面试题2

    使用过Redis分布式锁么,它是什么回事? 先拿setnx来争抢锁,抢到之后,再用expire给锁加一个过期时间防止锁忘记了释放. 这时候对方会告诉你说你回答得不错,然后接着问如果在setnx之后执行 ...

  5. OpenCV学习记录（二）：自己训练haar特征的adaboost分类器进行人脸识别 标签： 脸部识别opencv 2017-07-03 21:38 26人阅读

    上一篇文章中介绍了如何使用OpenCV自带的haar分类器进行人脸识别(点我打开). 这次我试着自己去训练一个haar分类器,前后花了两天,最后总算是训练完了.不过效果并不是特别理想,由于我是在自己的 ...

  6. [c++] polymorphism without virtual function

    polymorphism without virtual function

  7. 手机优秀app

    Mantano 阅读器 Aldiko   阅读器 掌阅阅读器 奇特阅读器 Gitden reader 网易蜗牛阅读

  8. Hadoop压缩之MapReduce中使用压缩

    1.压缩和输入分片 Hadoop中文件是以块的形式存储在各个DataNode节点中,假如有一个文件A要做为输入数据,给MapReduce处理,系统要做的,首先从NameNode中找到文件A存储在哪些D ...

  9. Android开发之Tween(补间动画)

    在android中动画主要有三种,①帧动画(http://blog.csdn.net/dmk877/article/details/45893017)这篇文章已经详细的进行了讲解,②补间动画这也是这篇 ...

  10. 机器学习及其matlab实现—从基础到实践

    第1周 MATLAB入门基础 第2周 MATLAB进阶与提高 第3周 BP神经网络 第4周 RBF.GRNN和PNN神经网络 第5周 竞争神经网络与SOM神经网络 第6周 支持向量机(Support ...