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

<!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. 禁用Win10显卡更新

    右键This PC-Properties-Advanced system settings-选择Hardware这个tab-Device installation settings选择No

  2. CSS3——让最后一行显示省略号

    代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...

  3. arguments.callee 调用自身 caller，callee，apply and call

    一.Arguments该对象代表正在执行的函数和调用他的函数的参数.[function.]arguments[n]参数function :选项.当前正在执行的 Function 对象的名字.n :选项 ...

  4. 理解 Paxos

    Paxos是前段时间刚获得图灵奖的大神Leslie Lamport所提出的,是用来解决分布式系统中的一致性问题的算法.该算法对于分布式系统的重要性,在这里不再赘言.了解过Paxos的朋友应该都知道,要 ...

  5. 2016年GitHub 排名前 100 的安卓、iOS项目简介（收藏）

    排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不相关的项目, 所以排名并不具备任何官方效力, 仅供参考学习, 方便初学者 ...

  6. Ubuntu14.04下安装tomcat

    1.官方网站下载最新的tomcat:http://tomcat.apache.org/download-80.cgi在ubuntu上,我们下载zip和tar.gz.Ubuntu14.04安装和配置To ...

  7. Swift基础--Swift中的异常处理

    Swift中的异常处理 OC中的异常处理:方法的参数要求传入一个error指针地址,方法执行完后,如果有错误,内部会给error赋值 Swift中的异常处理:有throws的方法,就要try起来,然后 ...

  8. 表单提交中get和post方式的区别

    表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据,post是向服务器传送数据. 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一 ...

  9. C# 后台获取WebApi 方法

    以下是方法 返货json数据 代码都有注释 /// <summary>        /// 请求webpapi        /// </summary>        // ...

  10. 优先队列priority_queue的比较函数

    STL头文件:#include<queue> 优先队列: 默认从大到小排列:priority_queuee<node>q; 自定义优先级的三种方法: 1.重载操作符: bool ...