温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(6456)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_087069',
blogTitle:'用C语言实现科学计算器',
blogAbstract:'&&&&&&&由于最近一直忙于上课，到现在才整理完。我学的东西不多，只学习了C语言、软件技术基础、c++等几门课，现在在自学c++& Builder，掌握的东西不多，写的时候也没用任何复杂的东西，也就是一些IF语句，充数个人兴趣，不足的地方请大家见谅。\r\n&&&&&&& 在此首先感谢悉心指导我的曾怡老师、郑立垠老师和王保三老师！从刚学C开始有编这个计算器的想法到实现，这三位老师给了我很大的帮助。\r\n&&&&&&& 关于程序的一点说明：\r\n&&&&&&& 实现的时候，我基本上全用的是自己的想法，不管算法和实现的好坏，都是经过我自己推敲后定出来的，做过一些改进和优化，不足之处请大家多多指教。\r\n&&&&&&& 编完后才发现没有加入对负数的处理，思维不全面。所以只能用新的方法，完全可以将运算符‘-’向后合并，最后再做一个',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:2,
publishTime:9,
permalink:'blog/static/',
commentCount:6,
mainCommentCount:5,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}第1单元 计算器16-28_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第1单元 计算器16-28
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩10页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢html、css、js实现简易计算器 - 熊熊之火 - 博客园
随笔 - 148, 文章 - 25, 评论 - 40, 引用 - 0
&学习HTML，CSS，JS一个月后，想着能自己是否能写出一个简单的东西，故编写了简易的计算器，之前也写过一个坦克大战，坦克大战的有些基本功能没有实现，
故也没有记录下来，想来，对这行初来咋到的，还是需要留下些东西供自己日后回忆，于是写下这篇随笔；因第一次写博客，不知道怎么上传源代码，也不知道怎么在博客页面实现计算效果。
下面是完成后计算器页面：
该计算器只是实现了简易的计算功能，很多其他功能没有实现，如运算的优先级功能，在后面的学习中再慢慢改进吧！
因计算器布局比较规整，故用table表格布局，也可以用div或列表来布局；单元格里加入button标签，整体上大的table里含三列两行，在单元格里再插入表格；
下面代码是：大的table里的第一行，包括时间、计算结果、清零和退格。
以下是HTML部分
1 &!DOCTYPE html&
&meta charset="UTF-8"&
&title&计算器&/title&
&link rel="stylesheet" type="text/css" href="计算器.css"/&
&script src="计算器.js"
type="text/javascript" charset="utf-8"&&/script&
<span style="color: #
&table border="0" cellspacing="0" cellpadding="" id='main'&
<span style="color: #
<span style="color: #
&th id='time'&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="text" name="" id="result" value="0" /&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="清零"
onclick="clean()"/&
<span style="color: #
&input type="button" name="" id="" value="退格"
onclick='backspace()'/&
<span style="color: #
<span style="color: #
下面代码是：大的table里的第二行的第一个单元格（左边的计算板块），单元格内加入table表格
&table id="table1"&
&input type="button" name="" id="" value="sin"
onclick="calc1('sin')"/&
&input type="button" name="" id="" value="cos"
onclick="calc1('cos')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="tan"
onclick="calc1('tan')"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="asin"
onclick="calc1('asin')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="acos"
onclick="calc1('acos')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="atan"
onclick="calc1('atan')"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="PI"
onclick="calc1('PI')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="1/X"
onclick="calc1('1/x')"/&
&input type="button" name="" id="" value="exp"
onclick="calc1('exp')"/&
&input type="button" name="" id="" value="Inx"
onclick="calc1('Inx')"/&
&input type="button" name="" id="" value="lgx"
onclick="calc1('lgx')"/&
&input type="button" name="" id="" value="n!"
onclick="calc1('n!')"/&
下面代码是：大的table里的第二行的第二个单元格（数字板块），单元格内加入table表格
&table id="table2"&
&input type="button" name="" id="" value="7"
onclick="num(7)"/&
&input type="button" name="" id="" value="8"
onclick="num(8)"/&
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="9"
onclick="num(9)"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="4"
onclick="num(4)"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="5"
onclick="num(5)"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="6"
onclick="num(6)"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="1"
onclick="num(1)"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="2"
onclick="num(2)"/&
&input type="button" name="" id="" value="3"
onclick="num(3)"/&
&input type="button" name="" id="" value="0"
onclick="num(0)"/&
&input type="button" name="" id="" value="."
onclick="dian()"/&
&input type="button" name="" id="" value="="
onclick="calc('=')"/&
下面代码是：大的table里的第二行的第三个单元格（右边板块），单元格内加入table表格
&table id="table3"&
&input type="button" name="" id="" value="+"
onclick="calc('+')"/&
&input type="button" name="" id="" value="取整"
onclick="calc('取整')"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="-"
onclick="calc('-')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="取余"
onclick="calc('%')"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="*"
onclick="calc('*')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="x^y"
onclick="calc('x^y')"/&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="/"
onclick="calc('/')"/&
<span style="color: #
<span style="color: #
<span style="color: #
&input type="button" name="" id="" value="+/-"
onclick="calc('+/-')"/&
40 &/html&
编写完HTML部分后，对计算器按钮进行布局和美化，可以根据个人想法设置
以下是CSS部分：
border: 10
margin: 30
background: #ABABAB;
box-shadow: 5px 5px #CCCCCC
padding-top: 20
7 }/*设置最外层表格样式*/
height: 40
<span style="color: #
border: 2px outset #CCCCCC;
<span style="color: # }
<span style="color: # #result{
<span style="color: #
width: 100%;
<span style="color: #
height: 100%;
<span style="color: #
box-shadow: 3px 3px #CCCCCC
<span style="color: #
text-align:
<span style="color: #
font-size: 20
<span style="color: # }
<span style="color: # [type=button]{
<span style="color: #
<span style="color: #
height: 40
<span style="color: #
box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC
<span style="color: #
background-image:linear-gradient(to top right,#000,#fff);/*设置按钮渐变色*/
<span style="color: #
color: #00FFFF;
<span style="color: #
font-weight:
<span style="color: #
<span style="color: #
border-radius: 10px/6
<span style="color: # }/*设置所有butto的样式*/
<span style="color: # #table1,#table2,#table3{
<span style="color: #
margin-top: 20
<span style="color: #
border: 2px outset #CCCCCC;
<span style="color: # }
<span style="color: # [type=button]:hover{
<span style="color: #
background-image:linear-gradient(to top right,#fff,#000);
<span style="color: # }
<span style="color: # #time{
<span style="color: #
margin: 0;
<span style="color: #
padding: 0;
<span style="color: #
color:#00FFFF;
<span style="color: # }
样式设置好后，开始JS部分，实现简易计算功能
首先定义几个全局变量，后面实现计算功能时会用上
<span style="color: # var sum=0;
<span style="color: # var Boo=//判断是否按下计算符号
<span style="color: # //存储计算符号的变量
当我们按下数字键的时候，数字会显示出来，所以先获取数字
1 //获取数字
2 function num(Num) {
var result=document.getElementById('result');
if (Boo) {
result.value=N
Boo=//若接受过运算符，文本框清零
if (result.value=='0') {
result.value=N
<span style="color: #
<span style="color: #
result.value+=N
<span style="color: #
<span style="color: #
<span style="color: # }
这个时候，在测试的时候，多次点击小数点，小数点会出现多次，需要避免出现这种情况，indexOf检索字符，没有检索到时，返回-1
<span style="color: # //避免出现两个小数点
<span style="color: # function dian () {
<span style="color: #
var result=document.getElementById('result');
<span style="color: #
if (result.value.indexOf('.')==-1) {
<span style="color: #
result.value+='.';
<span style="color: #
<span style="color: # }
清零，可以是重新加载页面，也可以将默认值设为零没，这里设置为重新加载；
退格，没点一次按钮，字符长度减1，当为空时，设置默认值为0；
1 //清零，重新加载页面
2 function clean() {
location.replace(location)
6 function backspace() {
var result=document.getElementById('result');
result.value=result.value.substring(0,result.value.length-1);
if (result.value=='') {
<span style="color: #
result.value=0;
<span style="color: #
<span style="color: # }
实现这些功能后，进入简易计算功能，需要用到之前定义的全局变量
首先实现二元运算，如加减乘除等 ，涉及到两个数字的：
1 function calc(op){
var result=document.getElementById('result').value*1;
if (result=='') {
switch (ope){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
case '取整':
<span style="color: #
sum=Math.floor(sum/result);
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
case 'x^y':
<span style="color: #
sum=Math.pow(sum,result);
<span style="color: #
<span style="color: #
case '+/-':
<span style="color: #
sum=result*(-1);
<span style="color: #
<span style="color: #
<span style="color: #
document.getElementById('result').value=
<span style="color: #
<span style="color: #
default:sum=parseFloat(result);
<span style="color: #
<span style="color: #
<span style="color: #
document.getElementById('result').value=
<span style="color: #
<span style="color: # }
接着实现一元运算，首先进行角度与弧度的转换，且需要对浮点数的计算进行一点简单处理：
1 function calc1(op){
var result=document.getElementById('result').value*1;
π=Math.PI*2/360;//角度转换成弧度
var deg=360/(Math.PI*2);//弧度转换成角度
if (result=='') {
switch (op){
<span style="color: #
case 'sin':
<span style="color: #
sum=Math.round(Math.sin(result* π)*000)/000;
//sum=Math.sin(result* π);Math.round()解决浮点数运算问题
<span style="color: #
//程序处理浮点数的时候，每一次运算都会取一次近似值，所以最终的结果，总是近似值，而不是我们通过代数得出的结果。
<span style="color: #
case 'cos':
<span style="color: #
sum=Math.round(Math.cos(result* π)*000)/000;
<span style="color: #
<span style="color: #
case 'tan':
<span style="color: #
sum=Math.round(Math.tan(result* π)*000)/000;
<span style="color: #
<span style="color: #
case 'asin':
<span style="color: #
sum=Math.round(Math.asin(result)*deg*000)/000+'°';
<span style="color: #
<span style="color: #
case 'acos':
<span style="color: #
sum=Math.round(Math.acos(result)*deg*000)/000+'°';
<span style="color: #
<span style="color: #
case 'atan':
<span style="color: #
sum=Math.round(Math.atan(result)*deg*000)/000+'°';
<span style="color: #
<span style="color: #
case 'PI':
<span style="color: #
sum=Math.PI;
<span style="color: #
<span style="color: #
case '1/x':
<span style="color: #
sum=1/parseFloat(result);
<span style="color: #
<span style="color: #
case 'exp':
<span style="color: #
sum=Math.exp(result);
<span style="color: #
<span style="color: #
case 'Inx':
<span style="color: #
sum=Math.log(result);
<span style="color: #
<span style="color: #
case 'lgx':
<span style="color: #
sum=Math.log10(result);
<span style="color: #
<span style="color: #
case 'n!':
<span style="color: #
for (var i=1;i&i++) {
<span style="color: #
sum=sum*i;
<span style="color: #
<span style="color: #
<span style="color: #
default:sum=parseFloat(result);
<span style="color: #
<span style="color: #
<span style="color: #
document.getElementById('result').value=
<span style="color: # }
这样计算器的简易功能基本就实现了，最后我们加上时间，当打开页面的时候，出现时钟：
1 //设置时间
2 window.onload=function(){
showTime();
5 function showTime(){
var today=new Date();
var y=today.getFullYear();
var M=today.getMonth()+1;
var d=today.getDate();
<span style="color: #
var h=today.getHours();
<span style="color: #
var m=today.getMinutes();
<span style="color: #
var s=today.getSeconds();
<span style="color: #
m=checkTime(m);
<span style="color: #
s=checkTime(s);
<span style="color: #
var week=today.getDay();
<span style="color: #
var w=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六');
<span style="color: #
for (var i=0;i&w.i++) {
<span style="color: #
document.getElementById('time').innerHTML=y+'年'+M+'月'+d+'日'+'&/br&'+h+":"+m+":"+s+'
'+w[week];
<span style="color: #
<span style="color: #
setTimeout('showTime()',500);
<span style="color: # }
<span style="color: # //数字小于10时，前面添加一个0
<span style="color: # function checkTime(i){
<span style="color: #
if (i&10) {
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # }}