您的位置：首页 > Web前端 > JavaScript

JavaScript 简单的计算器

2015-12-06 21:51 671 查看

应老师要求，查查补补弄了一个js计算器，主要有html、css、JavaScript等知识，简单实用。

CSS 语法

CSS 语法由三部分构成：选择器、属性和值：

selector {property: value;property2: value2 }

CSS 对大小写不敏感,建议全小写,样式之间使用英文;分号隔开,最后一个可以不使用分号.

CSS 选择器

Html选择器:所用相同的html元素(全部)

Id选择器:唯一的,精确控制(唯一)

Class选择器:相同class的控制(范围控制,部分)

属性选择器

派生选择器(Extjs): 上下文(级\层)关系来定义样式

伪类选择器

混合选择器:多种选择器混合使用.

CSS 优先级：

声明的顺序：行内》内嵌》外部

选择器：id选择器》class选择器》html选择器

JavaScript注意要点：

<script type="text/javascript"></script>
<script>两种用途：
1.引入外部js文件（总是使用js文件）。
2.内嵌js代码。

注意：一但<script>用于引入js文件，该标签内部的所有代码将永远不会执行。

引入css和js

<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<script src="js/mystyle.js"></script>

html完整代码如下：

<!DOCTYPE html><!--解决HTML5的兼容 -->
<html><!--ttp-equiv 把 content 属性关联到 HTTP 头部。-->
<head>
<meta http-equiv="Conrtent-Type" content="text/html" charset = "utf-8"/>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<script src="js/mystyle.js"></script>

<title>计算器</title>
<style type="text/css">
/*1、在此填写css样式;2、或者在link引入css包*/
</style>
</head>
<body>
<div id="calculator">
<form name="calculator">
<table id="tab">
<caption><h3><img id="img" src="images/icon.jpg"/>计算器</h3></caption>
<tr>
<td>
<input class="inputscreen" name="inputScreen" value="0" onfocus="this.blur();"/>
</td>

</tr>
<tr>
<td class="resulttd">
= <input class="resultscreen" name="resultScreen" value="0" onfocus="this.blur();"/>
</td>
</tr>
<tr >
<td >
<input type="button" value="7" onclick="command(7)"/>
<input type="button" value="8" onclick="command(8)"/>
<input type="button" value="9" onclick="command(9)"/>
<input type="button" value="←" onclick="del()"/>
<input type="button" value="C" onclick="clearscreen()"/>
</td>
</tr>
<tr>
<td >
<input type="button" value="4" onclick="command(4)"/>
<input type="button" value="5" onclick="command(5)"/>
<input type="button" value="6" onclick="command(6)"/>
<input type="button" value="x" onclick="times()"/>
<input type="button" value="÷" onclick="divide()"/>
</td>
</tr>
<tr>
<td >
<input type="button" value="1" onclick="command(1)"/>
<input type="button" value="2" onclick="command(2)"/>
<input type="button" value="3" onclick="command(3)"/>
<input type="button" value="+" onclick="plus()"/>
<input type="button" value="-" onclick="minus()"/>
</td>
</tr>
<tr>
<td >
<input type="button" value="0" onclick="command(0)"/>
<input type="button" value="00" onclick="dzero()"/>
<input type="button" value="." onclick="dot()"/>
<input type="button" value="%" onclick="persent()"/>
<input type="button" value="=" onclick="equal()"/>
</td>
</tr>
<tr>
<td>
<span id="note"></span>
</td>
</tr>
<tr>
<td >
<strong>韩星博客  <a style="text-decoration:none;" href="http://blog.csdn.net/azhansy" target="_blank" >建议反馈</a></strong>
</td>
</tr>
</table>
</form>
</div>
</body>

</html>

css完整代码：

/*html选择器: html关键字 无需其他引用*/
body {
color: rgb(25,100,255);
background-color:#00FF7F
}
/*id选择器,用id引用*/
#calculator {
width:380px;
height:auto;
text-align: center;
overflow:hidden; /*超出内容部分：内容会被修剪，并且其余内容是不可见的。scoll：滚动*/
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#F2F4FF;
font-family: Georgia, serif, verdana;
/*font-style: italic;*/
}
/*派生选择器*/
td strong {
font-style: italic;
font-weight: normal;
float: right;
text-decoration: none;
}
/* 伪类选择器 链接选中时的颜色*/
a:hover{
background-color:yellow;
}
#img{
width:30px;
height:30px;
}
#tab{
border:0;
margin:auto;/*table外框居中*/
}
/*class选择器 用class引用*/
.inputscreen{
width:280px;
text-align:right;
}
.resultscreen{
width:120px;
text-align:right;
float: right;
}
.resulttd{
width:280px;
text-align: right;

}
/*属性选择器 如果跟class选择器冲突，属性选择器 优先级*/
input[type="button"] {
font-weight:bold;
margin:1px;
font-size:18px;
margin-top: 5px;
width: 52px;
color: red;
font-family: Verdana, Arial;
}

JavaScript完整代码：

//alert("引入js成功");
var num=0;          //计算器输入的数字
var result=0;        //计算的结果
var inputshow="0"; //输入框显示的内容
var operate=0;   //判断输入状态的标志 "0"为刚添加完数据,"1"为刚操作完运算符号
var calcul=0;    //判断计算状态的标志 1加 2减 3乘 4除 5求余
var quit=0;      //防止重复按键的标志 0为刚输入数字 1为刚输入运算符,则不可以再输入运算符
function command(num){
//alert("进入command()方法");
var str=String(document.calculator.inputScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.inputScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //刚输入数字
}

function calculate(){
//alert('inputshow'+"haha");
inputshow=Number(document.calculator.inputScreen.value); //Number() 函数把对象的值转换为数字
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+inputshow;break;
case 2:result=num-inputshow;break;
case 3:result=num*inputshow;break;
case 4:if(inputshow!=0){result=num/inputshow;}else{document.getElementById("note").innerHTML="<span style='color:red'>被除数不能为零!</span>"; setTimeout(clearnote,4000)} break;
case 5:result=num%inputshow;break;
}

quit=1; //避免重复按键
}else{
result=inputshow;
//result=document.calculator.numresult.value;
}
// alert("calculate");
inputshow=String(result);
document.calculator.inputScreen.value=inputshow;
document.calculator.resultScreen.value=inputshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}
function clearscreen(){ //清除数据
//alert("进入clearscreen()方法");
num=0;
result=0;
inputshow="0";
document.calculator.inputScreen.value="0";
document.calculator.resultScreen.value="0";
}
function dzero(){ //添加双零00""
var str=String(document.calculator.inputScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.inputScreen.value=str;
operate=0;
}
function dot(){ //判断是否插入小数点
var str=String(document.calculator.inputScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.inputScreen.value=str;
operate=0;
}
function del(){ //退格
var str=String(document.calculator.inputScreen.value);
str=(str!="0") ? str : ""; //如果字符串是"0"，则为""，不是"0",则为原来屏幕上的数字字符串
str=str.substr(0,str.length-1); //删除str最后一个字符
str=(str!="") ? str : "0";  //如果str不为空则返回str
document.calculator.inputScreen.value=str;
}
function plus(){ //加法
//alert("进入加法");
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
//alert("equal");
operate=1;
num=0;
result=0;
inputshow="0";
}

完整资源点这里

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航