JavaScript仿windows计算器功能代码示例

本篇文章小编给大家分享一下JavaScript仿windows计算器功能代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

任务要求：

名称：仿windows计算器功能：

1、实现单击按钮录入数字

2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为0

3、实现小数点功能并添加异常处理：小数点只能出现一次

4、实现正负号功能

5、实现退位功能，已经是最后一位时，显示框显示为0

6、清屏功能

使用的知识点:

1、利用大量的自定义函数实现业务逻辑

2、灵活运用事件及事件处理

3、培养异常处理的编程方法

4、培养并实践利用不同思路实现编程

综合练习的目的:

1、将css、 html和js有效的进行技术组合，实现业务功能

2、锻炼和培养编程思想，解决问题的能力和方法

3、锻炼和培养利用多种编程思路，完成预先设定的目标

成品效果图：

html页面：

css页面：

*{
    margin: 0px;
    padding: 0px;
}
div{
    
    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;
    
    
    margin: 5px ;
    border: 5px;
    /*圆弧度*/
    border-radius: 10px;
    font-size: 20px;
    /*不透明度*/
    opacity:0.85;
}
input[type="text"]{
    
    
    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{
    
}

/*伪类：产生浮动，银灰色*/
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可以为false，不能为true
function isNumber(n){
    return !isNaN(n);
}

网页效果图：