不完善，接下来想着把运算符分开成一个一个的按钮...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自制计算器</title>
<style type="text/css">
input{
border: 1px solid #4169E1;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
padding: 10px;
}
select{
border: 1px solid #4169E1;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
padding: 10px;
}
input[type='button']{
padding: 10px 30px;
}
</style>
</head>
<body>
<input type="text" id="n1" placeholder="请输入第一个数" />
<input type="text" id="n2" placeholder="请输入第二个数" />
<select name="" id="fh">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除 </option>
<option value="%">取余 </option>
</select>
<input type="button" id="s" value="求值" onclick="s()"/>
</body>
<script type="text/javascript">
function s(){
var num1 = parseInt(document.getElementById('n1').value);
var num2 = parseInt(document.getElementById('n2').value);
var fh = document.getElementById('fh').value;
var sum;
switch(fh){
case '+':
sum = num1 + num2;
document.write(num1+'+'+num2+'='+sum);
break;
case '-':
sum = num1 - num2;
document.write(num1+'-'+num2+'='+sum);
break;
case '*':
sum = num1 * num2;
document.write(num1+'*'+num2+'='+sum);
break;
case '/':
sum = num1 / num2;
document.write(num1+'/'+num2+'='+sum);
break;
case '%':
sum = num1 % num2;
document.write(num1+'%'+num2+'='+sum);
break;
}
}
</script>
</html>

JS-计算器制作的更多相关文章

  1. 留念 C语言第一课简单的计算器制作

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

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

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

  3. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  4. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  5. Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...

  6. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  7. 用简单的JS代码制作计算器

    代码+注释一共不到200行,是练习交流的必备良药 主界面如下: 操作示意图: 以下是代码部分 HTML: <div> <table class="window"& ...

  8. js计算器---转

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

  9. js 选项卡制作

    知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

随机推荐

  1. Linux之我见

    Linux哲学之美 linux就像是一个哲学的最佳实践.如果非要对它评价,我真的不知道该怎么赞叹,我只能自豪的说着:“linux的美丽简直让人沉醉.” 我只能说是我处在linux学习的修炼之路上的一个 ...

  2. SQLServer中的事务与锁

    事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁:是数据库性能的 ...

  3. nios II--实验6——串口硬件部分

    串口 硬件开发 新建原理图 打开Quartus II 11.0,新建一个工程,File -> New Project Wizard…,忽略Introduction,之间单击 Next> 进 ...

  4. 清空KindEditor富文本编辑器里面的内容方法

    //清空KindEditorKindEditor.instances[0].html(""); 0表示第一个KindEditor编辑器对象 详情见链接:http://www.new ...

  5. AJAX——核心XMLHttpRequest对象

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...

  6. 【转】VO BO PO 介绍

    原文链接:http://www.cnblogs.com/zander/archive/2012/08/11/2633344.html PO(persistant object)(个人理解:就是数据库模 ...

  7. C++命名规范

    1.1    类型名 首字母大写,末尾加_T.如: class TnppCoverageArea_T{…}; 1.2    1.2 变量和函数名 变量和函数名中首字母小写,其后每个英文单词的第一个字母 ...

  8. jenkins 把包传到远程服务器上

    首先我们在 一台服务器上部署svn,maven,jdk,tomcat,nexus,还有Jenkins. 这里我主要记录Jenkins. 首先我们从网上下载Jenkins的包 wget http://m ...

  9. cygwin-介绍-安装

    初学linux时,最头疼的是,因为windows和linux各有优点,各有用途,所以只能麻烦的在两者之间切换,不断的重启.开机时也麻烦,因为初学者大多数使用windows,装了linux后,开机会自动 ...

  10. pch文件的使用

    pch文件的应用场景:1.用来定义一些全局的宏2.用来导入一些全局都能访问的头文件(如果只需要让.m或者.mm文件访问到,不需要让.c文件访问到,那么需要把头文件写到#ifdef _OBJC_ #en ...