JS-计算器制作

简介: 不完善,接下来想着把运算符分开成一个一个的按钮... 自制计算器 input{ border: 1px solid #4169E1; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-...

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

<!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>

目录
相关文章
|
8月前
|
JavaScript
JS实现计算器功能
JS实现计算器功能
59 2
|
8月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
84 6
|
JavaScript 前端开发
js计算器
js计算器
77 0
|
2月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
28 2
|
7月前
|
JavaScript 前端开发 算法
详细解读24点计算器的Javascript实现
详细解读24点计算器的Javascript实现
74 0
|
7月前
|
前端开发 JavaScript 算法
JavaScript制作简版计算器,提供加减乘除功能
JavaScript制作简版计算器,提供加减乘除功能
332 0
|
8月前
|
JavaScript 前端开发
JavaScript编写一个简易计算器
JavaScript编写一个简易计算器
42 0
|
8月前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
8月前
|
移动开发 JavaScript 前端开发
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
75 0
|
8月前
|
前端开发
好看的前端计算器代码分享(html+css+js制作计算器)
好看的前端计算器代码分享(html+css+js制作计算器)
173 0