用js写计算器代码
程序员文章站
2024-02-27 12:40:45
...
此项目的收获
input[type=“text”]{}的css用法
isNaN（n）:不能转换为数字：ture，可以转换成数字：flase
return !isNaN(n);
n=n.substr(0,n.length-1); 字符串减少最后一个
[0，NaN，“”，null，undefined]都可以直接转化为false，但这几个值不是完全相等的
return (n==“0”||n.length==0);判断里面是否正确，正确为true，错误为false；
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
window.location.href=“http://www.imooc.com”;跳转链接
获得数组的如getElementsByTagName必有其循环去支撑数组的运行
步骤
1.判断是否是数字。
2.数字叠加
3.加减乘除的运行
4.判断特殊符号的作用
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.content{
width: 170px;
margin:100px 0 0 100px;
}
input[type="button"]{
width:30px;
margin-right: 5px;
margin-bottom: 3px;
}
input[type="text"]{
width: 149px;
background-color: white;
text-align: right;
border: solid 1px;
padding-right: 5px;
box-sizing: border-box;
}
</style>
<script>
function init(){
num=document.getElementById('num');
num.disabled="disabled";
num.value="0";
var input=document.getElementsByTagName("input");
score=0;
char="";
for(var i=0;i<input.length;i++){
input[i].onclick=function(){
if(!isNaN(this.value)){
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
btn=num.value;
switch(this.value){
case "+":
score=Number(btn);
num.value="0";
char="+";
break;
case "-":
score=Number(btn);
num.value="0";
char="-";
break;
case "*":
score=Number(btn);
num.value="0";
char="*";
break;
case "/":
score=Number(btn);
num.value="0";
char="/";
break;
case "+/-":
num.value=sign(btn);
break;
case "←":
num.value=reduce(btn);
break;
case "C":
num.value=0;
break;
case ".":
num.value=point(btn);
break;
case "=":
switch(char){
case "+":
num.value=score+Number(num.value);
break;
case "-":
num.value=score-Number(num.value);
break;
case "*":
num.value=score*Number(num.value);
break;
case "/":
if(Number(num.value)==0){
alert('除数不可为0,请重新输入');
num.value="0";
}else{
num.value=score/Number(num.value);
}
break;
}
break;
}
}
}
}
}
//判断长度
function isNull(n){
return (n=="0"||n.length==0);
}
//正负转变
function sign(n){
if(Number(n)){
n=n*-1;
}else{
n=n;
}
return n;
}
//减少一位
function reduce(n){
n=n.substr(0,n.length-1);
if(n=="0"||n.length==0){
n="0";
}
return n;
}
//加小数点
function point(n){
if(n.indexOf(".")==-1){
n=n+".";
}else{
n=n;
}
return n;
}
//使页面跳转到百度
function imooc(){
document.getElementById('imooc').onclick=function(){
window.location.href="http://www.baidu.com";
}
}
</script>
</head>
<body onload="init(),imooc()">
<div class="content">
<div class="top">
<input type="text" name="" id="num" value="">
</div>
<div class="bottom">
<input type="button" name="" id="" value="C" />
<input type="button" name="" id="" value="←" />
<input type="button" name="" id="" value="+/-" />
<input type="button" name="" id="" value="/" />
<input type="button" name="" id="" value="1" />
<input type="button" name="" id="" value="2" />
<input type="button" name="" id="" value="3" />
<input type="button" name="" id="" value="*" />
<input type="button" name="" id="" value="4" />
<input type="button" name="" id="" value="5" />
<input type="button" name="" id="" value="6" />
<input type="button" name="" id="" value="-" />
<input type="button" name="" id="" value="7" />
<input type="button" name="" id="" value="8" />
<input type="button" name="" id="" value="9" />
<input type="button" name="" id="" value="+" />
<input type="button" name="" id="" value="0" />
<input type="button" name="" id="" value="." />
<input type="button" name="" id="" value="=" />
<input type="button" name="" id="imooc" value="m" />
</div>
</div>
</body>
</html>
推荐阅读
-
用VB写计算器
-
用js写计算器代码
-
Python的爬虫框架scrapy用21行代码写一个爬虫
-
用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码
-
已给出相应js判断代码，怎么用js或者php判断电脑是否登录qq并获得相应qq号
-
用JS写的简单的计算器实现代码_javascript技巧
-
已给出相应js判断代码，怎么用js或者php判断电脑是否登录qq并获得相应qq号
-
windows上用c写php扩展（加密解密php源代码）
-
javascript - 用js自写ajax提交表单数据到php，但是php的$_POST为空？
-
第一次用php写webservice遇到一个很奇怪的有关问题，详细请看内容，有代码