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>

目录
相关文章
|
3月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
40 6
|
7月前
|
JavaScript 前端开发
|
3月前
|
移动开发 JavaScript 前端开发
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
28 0
|
3月前
|
前端开发
好看的前端计算器代码分享(html+css+js制作计算器)
好看的前端计算器代码分享(html+css+js制作计算器)
36 0
|
3月前
|
前端开发 JavaScript
使用HTML、CSS和JavaScript实现一个简单的计算器
使用HTML、CSS和JavaScript实现一个简单的计算器
|
6月前
|
存储 搜索推荐 数据可视化
基于html5+javascript技术开发的房贷利率计算器,买房的码农们戳进来
房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。
54 0
|
7月前
|
JavaScript Android开发
js日期控件 (补助计算器页面)
js日期控件 (补助计算器页面)
35 0
|
9月前
|
开发框架 JavaScript 前端开发
Javascript制作简易计算器并实现其功能
Javascript制作简易计算器并实现其功能
162 0
|
JavaScript 前端开发
史上最好看的利用javascript制作计算器
利用javascript制作计算器 前面我们讲到如何用js模拟计算器的基本运算,现在咱们来讲一下如何使用HTML+CSS+javascript制作一个功能齐全,切外观大气的计算器。功能效果如下图所示: 在这里插入图片描述 HTML代码: &lt;table&gt; &lt;tr&gt; &lt;td colspan=&quot;5&quot;&gt; &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;button value=&quot;7
史上最好看的利用javascript制作计算器
|
JavaScript 前端开发 Serverless
最简单的用js模拟计算器进行计算(初级)
用js模拟计算器进行计算 今天我们来讲一下怎么使用js来模拟计算器的加减乘除基本运算。代码如下: HTML代码: &lt;h1&gt;计算器&lt;/h1&gt; &lt;input type=&quot;number&quot; name=&quot;&quot; id=&quot;num1&quot;&gt; &lt;br&gt; &lt;input type=&quot;number&quot; name=&quot;&quot; id=&quot;num2&quot;&gt; &lt;br&gt; &lt;button onclick=&quot;func(&#39;+&#39;)&quot;&gt;+&lt;/button&gt; &lt;button onclick=&quot;func(&#39;-&#39;)&quot;&gt;-&lt;/button&gt; &lt;button onclick=&quot;func(&#39;*&#39;)&quot;