效果图

index.html

<!DOCTYPE html>

<html>

<head>

    <title></title>

  <link rel="stylesheet" type="text/css" href="calc.css">

  <script type="text/javascript" src="calc.js"></script>

</head>

<body onload="init()">

     <div id="div1">

         <div id="div2">

             <input type="text" name="num" id="num" />

         </div>

         <div id="div3">

             <input type="button" value="c" name="" id=""/>

             <input type="button" value="←" name="" id=""/>

             <input type="button" value="+/-" name="" id=""/>

             <input type="button" value="/" name="" id=""/>

             <input type="button" value="1" name="" id="n1"/>

             <input type="button" value="2" name="" id=""/>

             <input type="button" value="3" name="" id=""/>

             <input type="button" value="*" name="" id=""/>

             <input type="button" value="4" name="" id=""/>

             <input type="button" value="5" name="" id=""/>

             <input type="button" value="6" name="" id=""/>

             <input type="button" value="-" name="" id=""/>

             <input type="button" value="7" name="" id=""/>

             <input type="button" value="8" name="" id=""/>

             <input type="button" value="9" name="" id=""/>

             <input type="button" value="+" name="" id=""/>

             <input type="button" value="0" name="" id=""/>

             <input type="button" value="." name="" id=""/>

             <input type="button" value="=" name="" id=""/>

             <input type="button" value="m" name="" id="imooc"/>

         </div>

     </div>

</body>

</html>

calc.css

*{

    margin:0px;

    padding:0px;

}

div{

    width: 170px;

}

#div1{

    top:60px;

    left: 100px;

    position: absolute;

}

input[type="button"]{

    width: 30px;

    margin-right: 5px;

}

input[type="text"]{

    width: 152px;

    text-align: right;

    background-color: #fff;

    border: 1px solid;

    padding-right: 5px;

    box-sizing: border-box;

}

input[type="button"]:hover{

    background-color: yellow;

    border: 1px solid;

}

calc.js

function init(){

    var num=document.getElementById("num");

    num.value=0;

    num.disabled="disabled";

    var oButton=document.getElementsByTagName("input");

    var btn_num1;

    var fh;

    for(var i=0;i<oButton.length;i++){

        oButton[i].onclick=function(){

            if(isNumber(this.value)){

                if(isNull(num.value)){

                    num.value=this.value;

                }else{

                    num.value=num.value+this.value;

                }

            }else{

                var btn_num=this.value;

                switch(btn_num){

                    case "+":

                        btn_num1=Number(num.value);

                        num.value=0;

                        fh="+";

                        break;

                    case "-":

                        btn_num1=Number(num.value);

                        num.value=0;

                        fh="-";

                        break;

                    case "*":

                        btn_num1=Number(num.value);

                        num.value=0;

                        fh="*";

                        break;

                    case "/":

                        btn_num1=Number(num.value);

                        num.value=0;

                        fh="/";

                        break;

                    case ".":

                        num.value=dec_number(num.value);

                        break;

                    case "←":

                        num.value=back(num.value);

                        break;

                    case "c":

                        num.value="0";

                        break;

                    case "+/-":

                        num.value=sign(num.value);

                        break;

                    case "=":

                        switch(fh){

                            case "+":

                              num.value=btn_num1+Number(num.value);

                              break;

                            case "-":

                               num.value=btn_num1-Number(num.value);

                               break;

                            case "*":

                               num.value=btn_num1*Number(num.value);

                               break;

                            case "/":

                               if(Number(num.value)==0){

                                       alert("除数不能是0");

                                     num.value=0;

                               }else{

                                     num.value=btn_num1/Number(num.value);

                               }

                               break;

                        }

                        break;

                }

            }

        }

    }

}

/*正负号*/

function sign(n){

   n=Number(n)*-1;

   return n;

}

/*退位键*/

function back(n){

   n=n.substr(0,n.length-1);

   if(isNull(n)){

         n="0";

   }

   return n;

}

/*小数点*/

function dec_number(n){

   if(n.indexOf(".")==-1){

      n=n+".";

   }

   return n;

}

/*验证文本框是否为空或者0*/

function isNull(n){

   if(n=="0" || n.length==0){

       return true;

   }else{

          return false;

   }

}

function isNumber(n){

  return  !isNaN(n);

}

JavaScript仿计算器案例源代码的更多相关文章

  1. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. javascript简单计算器实践

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...

  3. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  4. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  5. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  6. 自己做的javascript简易计算器

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. JavaScript编写计算器的发展史

    JavaScript编写计算器的发展史: 编写一个普通的四则运算: <!DOCTYPE html> <html lang="en"> <head> ...

  9. 【JavaScript定时器小案例】常见的几种定时器实现的案例

    [JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...

随机推荐

  1. 7个有用的JS技巧

    就如其他的编程语言一样,JavaScript也具有许多技巧来完成简单和困难的任务. 一些技巧已广为人知,而有一些技巧也会让你耳目一新. 让我们来看看今天可以开始使用的七个JavaScript技巧吧! ...

  2. Keras深度学习框架之损失函数

    一.损失函数的使用 损失函数[也称目标函数或优化评分函数]是编译模型时所需的两个参数之一. model.compile(loss='mean_squared_error', optimizer='sg ...

  3. 配置nginx代理服务器访问tomcat服务

    nginx原配置文件如下: #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log ...

  4. 加密算法极先锋之MD5算法

    在开发过程中,避免不了要涉及到数据加密,比如用户账号密码的加密,用户敏感数据的加密,涉及到的加密算法种类繁多,作为拿来主义的开发者时间精力有限,能够清楚其中主流的加密算法和用途,就已经足够了. 主要的 ...

  5. toj 3019 Hidden Password (最小表示法)

    Hidden Password 时间限制(普通/Java):1000MS/3000MS 运行内存限制:65536KByte总提交: 53 测试通过: 19 描述 Some time the progr ...

  6. position属性值4缺一带你了解相对还是绝对抑或是固定定位

    阿基米德说“给我一个支点,我能翘起整个地球”,在HTML页面中,给你一个坐标,可以把任何一个元素定位目标点,这就是定位!CSS有三种基本的定位机制:相对定位.绝对定位.固定定位,决定定位的positi ...

  7. 14.Android-使用sendMessage线程之间通信

    1.Handler介绍 Handler 是一个消息分发对象.handler是Android给我们提供用来更新UI的一套机制,也是一套消息处理机制,通过它可以实现在不同线程之间传递消息 本章Handle ...

  8. Android埋点方案的简单实现-AOP之AspectJ

    个人博客 http://www.milovetingting.cn Android埋点方案的简单实现-AOP之AspectJ AOP的定义 AOP为Aspect Oriented Programmin ...

  9. markdown语法链接新页面打开

    我们在写markdown语法的文章时,经常会写超链接,默认markdown的写法超链接打开页面都是在当前页面,对自己页面的访问不是很好,所以我们一般都希望在新页面打开.但是据我对markdwon的语法 ...

  10. 关于css背景的一点总结

    background默认背景区域覆盖内容和内边距及边框,分别有以下属性: 1.background-clip(定义背景绘制区域) border-box 背景覆盖边框最外面 padding-box 背景 ...