html、css、js实现简易计算器
学习HTML，CSS，JS一个月后，想着能自己是否能写出一个简单的东西，故编写了简易的计算器，之前也写过一个坦克大战，坦克大战的有些基本功能没有实现，
故也没有记录下来，想来，对这行初来咋到的，还是需要留下些东西供自己日后回忆，于是写下这篇随笔；因第一次写博客，不知道怎么上传源代码，也不知道怎么在博客页面实现计算效果。
下面是完成后计算器页面：
该计算器只是实现了简易的计算功能，很多其他功能没有实现，如运算的优先级功能，在后面的学习中再慢慢改进吧！
因计算器布局比较规整，故用table表格布局，也可以用div或列表来布局；单元格里加入button标签，整体上大的table里含三列两行，在单元格里再插入表格；
下面代码是：大的table里的第一行，包括时间、计算结果、清零和退格。
以下是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="计算器.css"/>
<script src="计算器.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="" id='main'>
<tr>
<th id='time'>
</th>
<th >
<input type="text" name="" id="result" value="0" />
</th>
<th>
<input type="button" name="" id="" value="清零" onclick="clean()"/>
<input type="button" name="" id="" value="退格" onclick='backspace()'/>
</th>
</tr>
下面代码是：大的table里的第二行的第一个单元格（左边的计算板块），单元格内加入table表格
<tr>
<td>
<table id="table1">
<tr>
<td>
<input type="button" name="" id="" value="sin" onclick="calc1('sin')"/>
</td>
<td>
<input type="button" name="" id="" value="cos" onclick="calc1('cos')"/>
</td>
<td>
<input type="button" name="" id="" value="tan" onclick="calc1('tan')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="asin" onclick="calc1('asin')"/>
</td>
<td>
<input type="button" name="" id="" value="acos" onclick="calc1('acos')"/>
</td>
<td>
<input type="button" name="" id="" value="atan" onclick="calc1('atan')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="PI" onclick="calc1('PI')"/>
</td>
<td>
<input type="button" name="" id="" value="1/X" onclick="calc1('1/x')"/>
</td>
<td>
<input type="button" name="" id="" value="exp" onclick="calc1('exp')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="Inx" onclick="calc1('Inx')"/>
</td>
<td>
<input type="button" name="" id="" value="lgx" onclick="calc1('lgx')"/>
</td>
<td>
<input type="button" name="" id="" value="n!" onclick="calc1('n!')"/>
</td>
</tr>
</table>
</td>
下面代码是：大的table里的第二行的第二个单元格（数字板块），单元格内加入table表格
<td>
<table id="table2">
<tr>
<td>
<input type="button" name="" id="" value="7" onclick="num(7)"/>
</td>
<td>
<input type="button" name="" id="" value="8" onclick="num(8)"/>
</td>
<td>
<input type="button" name="" id="" value="9" onclick="num(9)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="4" onclick="num(4)"/>
</td>
<td>
<input type="button" name="" id="" value="5" onclick="num(5)"/>
</td>
<td>
<input type="button" name="" id="" value="6" onclick="num(6)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="1" onclick="num(1)"/>
</td>
<td>
<input type="button" name="" id="" value="2" onclick="num(2)"/>
</td>
<td>
<input type="button" name="" id="" value="3" onclick="num(3)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="0" onclick="num(0)"/>
</td>
<td>
<input type="button" name="" id="" value="." onclick="dian()"/>
</td>
<td>
<input type="button" name="" id="" value="=" onclick="calc('=')"/>
</td>
</tr>
</table>
</td>
下面代码是：大的table里的第二行的第三个单元格（右边板块），单元格内加入table表格
<td>
<table id="table3">
<tr>
<td>
<input type="button" name="" id="" value="+" onclick="calc('+')"/>
</td>
<td>
<input type="button" name="" id="" value="取整" onclick="calc('取整')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="-" onclick="calc('-')"/>
</td>
<td>
<input type="button" name="" id="" value="取余" onclick="calc('%')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="*" onclick="calc('*')"/>
</td>
<td>
<input type="button" name="" id="" value="x^y" onclick="calc('x^y')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="/" onclick="calc('/')"/>
</td>
<td>
<input type="button" name="" id="" value="+/-" onclick="calc('+/-')"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
编写完HTML部分后，对计算器按钮进行布局和美化，可以根据个人想法设置
以下是CSS部分：
#main{
border: 10px outset orange;
margin: 30px auto;
background: #ABABAB;
box-shadow: 5px 5px #CCCCCC inset;
padding-top: 20px;
}/*设置最外层表格样式*/
th{
height: 40px;
border: 2px outset #CCCCCC;
}
#result{
width: 100%;
height: 100%;
box-shadow: 3px 3px #CCCCCC inset;
text-align: right;
font-size: 20px;
}
[type=button]{
width: 60px;
height: 40px;
box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC inset;
background-image:linear-gradient(to top right,#000,#fff);/*设置按钮渐变色*/
color: #00FFFF;
font-weight: bold;
margin: 5px;
border-radius: 10px/6px;
}/*设置所有butto的样式*/
#table1,#table2,#table3{
margin-top: 20px;
border: 2px outset #CCCCCC;
}
[type=button]:hover{
background-image:linear-gradient(to top right,#fff,#000);
}
#time{
margin:;
padding:;
color:#00FFFF;
}
样式设置好后，开始JS部分，实现简易计算功能
首先定义几个全局变量，后面实现计算功能时会用上
var sum=0;
var Boo=false;//判断是否按下计算符号
var ope;//存储计算符号的变量
当我们按下数字键的时候，数字会显示出来，所以先获取数字
//获取数字
function num(Num) {
var result=document.getElementById('result');
if (Boo) {
result.value=Num;
Boo=false;//若接受过运算符，文本框清零
}else{
if (result.value=='0') {
result.value=Num;
} else{
result.value+=Num;
}
}
}
这个时候，在测试的时候，多次点击小数点，小数点会出现多次，需要避免出现这种情况，indexOf检索字符，没有检索到时，返回-1
//避免出现两个小数点
function dian () {
var result=document.getElementById('result');
if (result.value.indexOf('.')==-1) {
result.value+='.';
}
}
清零，可以是重新加载页面，也可以将默认值设为零没，这里设置为重新加载；
退格，没点一次按钮，字符长度减1，当为空时，设置默认值为0；
//清零，重新加载页面
function clean() {
location.replace(location)
}
//退格
function backspace() {
var result=document.getElementById('result');
result.value=result.value.substring(0,result.value.length-1);
if (result.value=='') {
result.value=0;
}
}
实现这些功能后，进入简易计算功能，需要用到之前定义的全局变量
首先实现二元运算，如加减乘除等 ，涉及到两个数字的：
function calc(op){
var result=document.getElementById('result').value*1;
if (result=='') {
result=0;
}
Boo=true;
switch (ope){
case '+':
sum=sum+result;
break;
case '-':
sum=sum-result;
break;
case '*':
sum=sum*result;
break;
case '/':
sum=sum/result;
break;
case '取整':
sum=Math.floor(sum/result);
break;
case '%':
sum=sum%result;
break;
case 'x^y':
sum=Math.pow(sum,result);
break;
case '+/-':
sum=result*(-1);
break;
case '=':
document.getElementById('result').value=sum;
break;
default:sum=parseFloat(result);
break;
}
document.getElementById('result').value=sum;
ope=op;
}
接着实现一元运算，首先进行角度与弧度的转换，且需要对浮点数的计算进行一点简单处理：
function calc1(op){
var result=document.getElementById('result').value*1;
var π=Math.PI*2/360;//角度转换成弧度
var deg=360/(Math.PI*2);//弧度转换成角度
if (result=='') {
result=0;
}
Boo=true;
switch (op){
case 'sin':
sum=Math.round(Math.sin(result* π)*100000000000000)/100000000000000; //sum=Math.sin(result* π);Math.round()解决浮点数运算问题
break; //程序处理浮点数的时候，每一次运算都会取一次近似值，所以最终的结果，总是近似值，而不是我们通过代数得出的结果。
case 'cos':
sum=Math.round(Math.cos(result* π)*100000000000000)/100000000000000;
break;
case 'tan':
sum=Math.round(Math.tan(result* π)*100000000000000)/100000000000000;
break;
case 'asin':
sum=Math.round(Math.asin(result)*deg*100000000000000)/100000000000000+'°';
break;
case 'acos':
sum=Math.round(Math.acos(result)*deg*100000000000000)/100000000000000+'°';
break;
case 'atan':
sum=Math.round(Math.atan(result)*deg*100000000000000)/100000000000000+'°';
break;
case 'PI':
sum=Math.PI;
break;
case '1/x':
sum=1/parseFloat(result);
break;
case 'exp':
sum=Math.exp(result);
break;
case 'Inx':
sum=Math.log(result);
break;
case 'lgx':
sum=Math.log10(result);
break;
case 'n!':
for (var i=1;i<result;i++) {
sum=sum*i;
}
break;
default:sum=parseFloat(result);
break;
}
document.getElementById('result').value=sum;
}
这样计算器的简易功能基本就实现了，最后我们加上时间，当打开页面的时候，出现时钟：
//设置时间
window.onload=function(){
showTime();
}
function showTime(){
var today=new Date();
var y=today.getFullYear();
var M=today.getMonth()+1;
var d=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
var week=today.getDay();
var w=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六');
for (var i=0;i<w.length;i++) {
document.getElementById('time').innerHTML=y+'年'+M+'月'+d+'日'+'</br>'+h+":"+m+":"+s+' '+w[week];
}
setTimeout('showTime()',500);
}
//数字小于10时，前面添加一个0
function checkTime(i){
if (i<10) {
i="0" + i;
}
return i
}
html、css、js实现简易计算器的更多相关文章
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- 用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- js之简易计算器
<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS编写简易计算器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
- JS实现简易计算器的7种方法
先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- JS简易计算器的实现，以及代码的优化
用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- 查看iis对应w3wp.exe显示的进程ID号(转载)
管理员身份运行cmd,跳转到C:\Windows\System32\inetsrv目录,然后运行appcmd list wp即可查看
- oracle expdp和impdp常用命令选项
一.expdp导出数据库 1.按用户导出 expdp scott/tiger@orcl DIRECTORY=oracle_dmp dumpfile=bak.dmp schemas=scott vers ...
- 提高C++编译速度-------pimpl 模式& 桥接模式（转）
pimpl 模式(Private Implementation),我们常常听到诸如“不要改动你的公有接口”这样的建议,所以我们一般都会修改私有接口,但是这会导致包含该头文件的所有源文件都要重新编译,这 ...
- 算法模板——sap网络最大流 1（非递归+邻接矩阵）
实现功能:首行输入N,M,S,T,代表这张图N个点,M条边,源点为S,汇点为T:接下来T行输入个边的出发点.终点和权值:输出最大流 原理:sap网络流算法(详见百度百科,个人觉得这个模板已经不错了,虽 ...
- linux命令分块总结---多操作才是真理
ps:其实学习linux系统,多多联系我们现在使用的Windows系统,这样就可以事半功倍的学习: 一. 启动,关机,登入,登出相关命令 [login]: 登录 [logout] :登出 [shutd ...
- Broken pipe错误终极解释
叙述 想必或多或少在Java的服务器都会遇到过这种异常,如下图 由于Java偏上层,日常开发接触系统底层的机会偏少,要搞清楚什么原因导致的这种异常,肯定是先要百度google一番. 网络 ...
- .Net编译运行原理
.Net Framework: 它是框架库和运行时的集合 ( FCL, Framework Class Library ) ( CLR, Common Language Runtime ) 不严格说它 ...
- Linux环境Perl链接MS Sql Server数据库
1.下载相关软件 unixODBC.freetds和DBD-ODBC ①.Linux系统的ODBC unixODBC-2.3.4.tar.gz ( http://www.unixodbc.org) ② ...
- Build your own linino system 编译你自己的linino系统
懒癌犯了,先简单写过程,之后有时间再补上每一步的理由吧.对着来一遍,有bug请留言,我会尝试回答.(づ￣ 3￣)づ ------------------------------------------ ...
- Java中static的特点
前两天面试时被问到静态的特点,当时回答地不是很好,现在来总结一下 在了解某样东西的时候我们通常会从它是什么,为什么,和怎么样在三方面来衡量,对于java中的static,我们也这样讨论下,要明确以下几 ...