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 ...
随机推荐
- 专题：DUILIB Win32 透明效果
Win32 透明效果相关基础知识 Layered Windows 分层窗口.这是Windows2000开始引入的概念,重新定义了窗口的Hit Testing方法,以前都是把窗口按rectangle的方 ...
- Lowest Common Ancestor of a Binary Tree leetcode
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- 队列工厂之RabbitMQ
本次和大家分享的是RabbitMQ队列的用法,前一篇文章队列工厂之(MSMQ)中在描述的时候已经搭建了简单工厂,因此本章内容是在其之上扩充的子项不再过多讲解工厂的代码了:RabbitMQ应该是现在互联 ...
- .NET Core项目从xproj+project.json向csproj迁移简介
3月7日,微软发布了Visual Studio 2017 RTM,与之一起发布的还有.NET Core Runtime 1.1.0以及.NET Core SDK 1.0.0,尽管这些并不是最新版,但也 ...
- 对VC++6.0爱得深沉（三）静态库的制作与使用
[创建] 1)建立新工程(win32静态库) (2)加入.h文件于.cpp文件如图. 3)编译-构建,生成.lib文件 [使用] 1)新建普通控制台程序 2)打开项目文件夹与刚才生成的库文件夹 3)方 ...
- Solr5.2.1+Zookeeper3.4.8分布式集群搭建
1.选取三台服务器 由于机器比较少,现将zookeeper和solr都部署在以下三台机器上.(以下操作都是在172.16.20.101主节点上进行的哦) 172.16.20.101 主节点 172.1 ...
- Oracle数据块损坏的恢复实例
测试环境:11.2.0.4 1.构建数据块损坏的测试环境 2.有备份:常规恢复坏块 3.无备份:跳过坏块 1.构建数据块损坏的测试环境 1.1 创建测试表 --Create Table t_test ...
- benchmark 库
性能测试的库 https://github.com/bestiejs/benchmark.js
- CoreCLR源码探索(五) GC内存收集器的内部实现 调试篇
在上一篇中我分析了CoreCLR中GC的内部处理, 在这一篇我将使用LLDB实际跟踪CoreCLR中GC,关于如何使用LLDB调试CoreCLR的介绍可以看: 微软官方的文档,地址 我在第3篇中的介绍 ...
- Androidstudio2.0.0下载，欢迎下载
Androidstudio开发工具很实用,但是没了Google下载还是蛮麻烦的,所以呢Eric就向大家提供了下载的地址,其实就是从自己网盘考过来的,大家可以下载的. http://pan.baidu. ...