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

<!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. 最小/大费用最大流模板(codevs1914)

    void addedge(int fr,int to,int cap,int cos){ sid[cnt].fr=fr;sid[cnt].des=to;sid[cnt].cap=cap;sid[cnt ...

  2. CSS3 transform原点设置

    以左上角为原点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; 以右上角给原点 - ...

  3. 14-find 查找文件

    find - search for files in a directory hierarchy 查找文件 [语法]: find [选项] [参数] [功能介绍] find命令用来在指定目录下查找文件 ...

  4. Java网络编程——IP

    类:InetAdrress 该类主要用于表示互联网协议(IP对象)地址,且无构造方法 主要方法: public static InetAddress getLocalHost()-->返回本地主 ...

  5. CSS选择器优先级排列

    CSS选择器的效率从高到低做了一个排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul & ...

  6. zabbix_server的自动发现，实现批量添加主机，并链接到模板

    一.需求 zabbix 服务器可以手动加入zabbix-agent客户端,对于少量的机器,这没有什么.但到了线上,我们有大量的服务器需要监控时,如果再一个个的手动加的话,工作量势必会增加很多.这时,z ...

  7. 【BZOJ 2194】快速傅立叶之二

    随便代换一下把它变成多项式乘法,及$C[T]=\sum_{i=0}^{T}A[i]×B[T-i]$这种形式,然后FFT求一下就可以啦 #include<cmath> #include< ...

  8. APP图标和启动页

    iOS App图标和启动画面尺寸 字数349 阅读22025 评论3 喜欢51 注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for i ...

  9. Leetcode 113. Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  10. NOI题库刷题日志 （贪心篇题解）

    这段时间在NOI题库上刷了刷题,来写点心得和题解 一.寻找平面上的极大点 2704:寻找平面上的极大点 总时间限制:  1000ms  内存限制:  65536kB 描述 在一个平面上,如果有两个点( ...