JavaScript仿windows计算器功能

本文实例为大家分享了JavaScript仿windows计算器的具体代码,供大家参考,具体内容如下

任务要求:

名称:仿windows计算器功能:

1、实现单击按钮录入数字
2、实现基础四则运算功能,并添加必要的异常处理,例如,除数为0
3、实现小数点功能并添加异常处理:小数点只能出现一次
4、实现正负号功能
5、实现退位功能,已经是最后一位时,显示框显示为0
6、清屏功能

使用的知识点:

1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程

综合练习的目的:

1、将css、 html和js有效的进行技术组合,实现业务功能
2、锻炼和培养编程思想,解决问题的能力和方法
3、锻炼和培养利用多种编程思路,完成预先设定的目标

成品效果图:

html页面:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="计算器.css">
<script type="text/javascript" src="计算器.js"></script>
<!-- <script type="text/javascript" src="js/mooc.js"></script> -->

</head>
<body onload="init()">
    <div id="div1">
        <!-- form与后台进行传递 -->
        <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="">
            <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="btn2">
            <input type="button" value="." name="" id="">
            <input type="button" value="=" name="" id="">
            <!-- <input type="button" value="m" name="" id="imooc" > -->
        </div>
    </div>
</body>
</html>

css页面:

*{
    margin: 0px;
    padding: 0px;
}
div{
    width: 220px;
    border-radius: 5px;
}
#div1{
    top: 60px;
    left: 100px;
    position: relative;
    background-image: url(image/7.png);
    background-size: 108%;
}
input[type="button"]{
    position: relative;
    left: 3px;
    top: 3px;
    width: 40px;
    height: 30px;
    margin: 5px ;
    border: 5px;
    /*圆弧度*/
    border-radius: 10px;
    font-size: 20px;
    /*不透明度*/
    opacity:0.85;
}
input[type="text"]{
    width: 205px;
    height: 30px;
    position: relative;
    top: 3px;
    left: 8px;
    font-size: 20px;
    text-align: right;
    background-color: #ffffff;
    /*border: 1px solid;*/
    /*不延伸,用已存在的*/
    box-sizing: border-box;
    padding-right: 5px;
}
#btn2{
    width: 93px;
}

/*伪类:产生浮动,银灰色*/
input[type="button"]:hover{
    background-color: silver;
}

js页面:

function init(){
    var num=document.getElementById("num");
    num.value=0;
    num.disabled="disabled";//不能输入

    // 通过标签获取input的数组,进行遍历,通过this.value输出单击当前按钮的值
    // 事件添加
    var objButton=document.getElementsByTagName("input");
    var btn_num1;//中间变量
    var fh;//加减乘除符号
    for(var i=0;i<objButton.length;i++){
        objButton[i].onclick=function(){
            if(isNumber(this.value)){
                // num.value=(num.value+this.value)*1;
                if(isNull(num.value)){
                    num.value=this.value;
                }else{
                    num.value=num.value+this.value;
                }
            }else{
                var btn_num=this.value;
                // var btn_num1;
                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");
                                }else{
                                    num.value=btn_num1/Number(num.value);
                                }
                                break;
                        }
                    break;
                }
            }
        }
    }
}

// 正负号
function sign(n){
    //乘以-1
    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;
    }
}

// isNaN判断是否转换为数字-->可以为false,不能为true
function isNumber(n){
    return !isNaN(n);
}

网页效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 纯javascript代码实现计算器功能(三种方法)

    今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

  • js实现一个简易计算器

    本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset="gb2312"> </head> <body> <h1>这是一个标题</h1> <p>以下是一个简易计算器</p> <tab

  • js实现简单计算器

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

  • js网页版计算器的简单实现

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head> <meta http-equiv=&

  • Vue.js实现的计算器功能完整示例

    本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc

  • 用JS写的简单的计算器实现代码

      1.本页效果图片     2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.

  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

  • 简易js代码实现计算器操作

    复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--

  • javascript-简单的计算器实现步骤分解(附图)

    知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果:   代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back

  • javascript写的简单的计算器,内容很多,方法实用,推荐

    最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul

随机推荐