js实现网页计算器（js实现网页计算器功能）

25-02-02 18

对于想了解js实现网页计算器的读者，本文将提供新的信息，我们将详细介绍js实现网页计算器功能，并且为您提供关于html5+css3+js实现网页计算器、JavaScript制作简单网页计算器、java

对于想了解js实现网页计算器的读者，本文将提供新的信息，我们将详细介绍js实现网页计算器功能，并且为您提供关于html5+ css3 +js实现网页计算器、JavaScript制作简单网页计算器、javascript实现简单的可随机变色网页计算器示例、JavaScript实现网页版简易计算器功能的有价值信息。

本文目录一览：

js实现网页计算器（js实现网页计算器功能）
html5+ css3 +js实现网页计算器
JavaScript制作简单网页计算器
javascript实现简单的可随机变色网页计算器示例
JavaScript实现网页版简易计算器功能

js实现网页计算器（js实现网页计算器功能）

如何在利用HTML，css和js的知识制作一个简单的网页计算器呢？

一个计算机中具备了：

计算机整体框
输入框
输入按钮

计算机整体框：

/*设置div样式*/
 #showdiv{
   border: solid 1px;
   border-radius: 5px;
   width: 350px;
   height: 400px;
   text-align: center;
   margin: auto;/*设置居中*/
   margin-top: 50x;
   background-color: rgb(214, 219, 190);    
}

输入框：

/*设置输入框样式*/
  input[type=text]{
      margin-top: 20px;
      width: 290px;
      height: 40px;
      font-size: 20px;

}

输入按钮：

/*设置按钮样式*/
   input[type=button]{
      width: 60px;
      height: 60px;
      margin-top: 20px;
      margin-left: 5px;
      margin-right: 5px;
      font-size: 30px;
      font-weight: bolder;
      font-family: "楷书";
}

使用js代码对执行对应业务逻辑操作：

<!--声明js代码-->
        <script>
            function test(btn){
                //获取button按钮对象
                var number = btn.value;
                //执行对应的业务逻辑
                switch (number) {
                    case "=":
                        document.getElementById("input").value= eval(document.getElementById("input").value);
                        break;
                    case "c":
                        document.getElementById("input").value="";
                        break;
                    default:
                        //将按钮的值赋值给input输入框
                        document.getElementById("input").value+=number;
                        break;
                }
                
            }
</script>

使用HTML对计算机进行排版布局：

<body>
    <div id="showdiv">
        <input type="text"  id="input" readonly="readonly"><br>
        <input type="button" value="1" onclick="test(this)">
        <input type="button" value="2" onclick="test(this)">
        <input type="button" value="3" onclick="test(this)">
        <input type="button" value="4" onclick="test(this)"><br>
        <input type="button" value="5" onclick="test(this)">
        <input type="button" value="6" onclick="test(this)">
        <input type="button" value="7" onclick="test(this)">
        <input type="button" value="8" onclick="test(this)"><br>
        <input type="button" value="9" onclick="test(this)">
        <input type="button" value="+" onclick="test(this)">
        <input type="button" value="-" onclick="test(this)">
        <input type="button" value="*" onclick="test(this)"><br>
        <input type="button" value="0" onclick="test(this)">
        <input type="button" value="/" onclick="test(this)">
        <input type="button" value="c" onclick="test(this)">
        <input type="button" value="=" onclick="test(this)">
      


    </div>
</body>

总体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /*设置div样式*/
        #showdiv{
            border: solid 1px;
            border-radius: 5px;
            width: 350px;
            height: 400px;
            text-align: center;
            margin: auto;/*设置居中*/
            margin-top: 50x;
            background-color: rgb(214, 219, 190);    
         }
        /*设置输入框样式*/
        input[type=text]{
            margin-top: 20px;
            width: 290px;
            height: 40px;
            font-size: 20px;

        }
        /*设置按钮样式*/
        input[type=button]{
            width: 60px;
            height: 60px;
            margin-top: 20px;
            margin-left: 5px;
            margin-right: 5px;
            font-size: 30px;
            font-weight: bolder;
            font-family: "楷书";
        }
        </style>
        <!--声明js代码-->
        <script>
            function test(btn){
                //获取button按钮对象
                var number = btn.value;
                //执行对应的业务逻辑
                switch (number) {
                    case "=":
                        document.getElementById("input").value= eval(document.getElementById("input").value);
                        break;
                    case "c":
                        document.getElementById("input").value="";
                        break;
                    default:
                        //将按钮的值赋值给input输入框
                        document.getElementById("input").value+=number;
                        break;
                }
                
            }
        </script>
        
        
    <title>Document</title>
</head>
<body>
    <div id="showdiv">
        <input type="text"  id="input" readonly="readonly"><br>
        <input type="button" value="1" onclick="test(this)">
        <input type="button" value="2" onclick="test(this)">
        <input type="button" value="3" onclick="test(this)">
        <input type="button" value="4" onclick="test(this)"><br>
        <input type="button" value="5" onclick="test(this)">
        <input type="button" value="6" onclick="test(this)">
        <input type="button" value="7" onclick="test(this)">
        <input type="button" value="8" onclick="test(this)"><br>
        <input type="button" value="9" onclick="test(this)">
        <input type="button" value="+" onclick="test(this)">
        <input type="button" value="-" onclick="test(this)">
        <input type="button" value="*" onclick="test(this)"><br>
        <input type="button" value="0" onclick="test(this)">
        <input type="button" value="/" onclick="test(this)">
        <input type="button" value="c" onclick="test(this)">
        <input type="button" value="=" onclick="test(this)">
      


    </div>
</body>
</html>

实现效果：

你一定已经学会了前端网页计算机的制作了吧！

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

您可能感兴趣的文章:

javascript写的简单的计算器，内容很多，方法实用，推荐
简易js代码实现计算器操作
js实现简单计算器
html+js实现简单的计算器代码(加减乘除)
用JS写的简单的计算器实现代码
javascript-简单的计算器实现步骤分解(附图)
js实现一个简易计算器
纯javascript代码实现计算器功能(三种方法)
js网页版计算器的简单实现
网页计算器一个JS计算器

html5+ css3 +js实现网页计算器

1.这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮。

看效果图：

看链接地址

http://download.csdn.net/detail/u010973529/9019575

谢谢

JavaScript制作简单网页计算器

本文实例为大家分享了JavaScript制作简单网页计算器的具体代码，供大家参考，具体内容如下

一、题目

利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。

二、代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页计算器</title>
</head>
 
<body>
<div>
    <p>数字1：<input type="text" id="num1"/></p>
    <p>数字2：<input type="text" id="num2"/></p>
    <p>
        <input type="button" value="相加" onclick="add()"/>
        <input type="button" value="相减" onclick="sub()"/>
        <input type="button" value="相乘" onclick="mul()"/>
        <input type="button" value="相除" onclick="div()"/>
    </p>
    <p>结果（数字1 op 数字2）：<p><input type="text" id="result"/></p></p>
</div>
<script>
    
    function add(){
        var num1=parseFloat(document.getElementById("num1").value);
        var num2=parseFloat(document.getElementById("num2").value);
        if(isNaN(num1)||isNaN(num2)){
            alert("请输入数字！");
        }else{
            result.value=(num1+num2).toFixed(2);
            return result.value;
        }
    }
    function sub(){
        var num1=parseFloat(document.getElementById("num1").value);
        var num2=parseFloat(document.getElementById("num2").value);
        if(isNaN(num1)||isNaN(num2)){
            alert("请输入数字！");
        }else{
            result.value=(num1-num2).toFixed(2);
            return result.value;
        }
    }
    function mul(){
        var num1=parseFloat(document.getElementById("num1").value);
        var num2=parseFloat(document.getElementById("num2").value);
        if(isNaN(num1)||isNaN(num2)){
            alert("请输入数字！");
        }else{
            result.value=(num1*num2).toFixed(2);
            return result.value;
        }
    }
    function div(){
        var num1=parseFloat(document.getElementById("num1").value);
        var num2=parseFloat(document.getElementById("num2").value);
        if(isNaN(num1)||isNaN(num2)){
            alert("请输入数字！");
        }else if(num2==0){
            alert("除数不能为0！");
        }else{
            result.value=(num1/num2).toFixed(2);
            return result.value;
        }
    }
    
    
</script>
</body>
</html>

三、结果

四、总结

document.getElementById("num1").value获取的是一个字符串；
NaN表示非数值；
parseFloat()函数解析字符串并返回浮点数；
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字;toFixed(2)就是保留两位小数；

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

您可能感兴趣的文章:

javascript写的简单的计算器，内容很多，方法实用，推荐
js实现简单计算器
简易js代码实现计算器操作
html+js实现简单的计算器代码(加减乘除)
js实现一个简易计算器
用JS写的简单的计算器实现代码
javascript-简单的计算器实现步骤分解(附图)
纯javascript代码实现计算器功能(三种方法)
Vue.js实现的计算器功能完整示例
js网页版计算器的简单实现

javascript实现简单的可随机变色网页计算器示例

本文实例讲述了javascript实现简单的可随机变色网页计算器。分享给大家供大家参考，具体如下：

该程序能实现简单的加、减、乘、除、求余，页面还添加了随机变换颜色的功能。

运行效果图如下：

完整实例代码如下：

rush:js;"> Day 2 <Meta NAME="Generator" CONTENT="EditPlus"> <Meta NAME="Author" CONTENT=""> <Meta NAME="Keywords" CONTENT=""> <Meta NAME="Description" CONTENT=""> simple web calculator

PS：这里再为大家推荐两款本站的在线计算器，都是采用js实现，且功能强大，相信对于大家深入了解JavaScript数学运算及web设计有所帮助：

在线标准计算器：

在线科学计算器：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript实现网页版简易计算器功能

本文实例为大家分享了JavaScript实现网页版计算器功能的具体代码，供大家参考，具体内容如下

运行效果

运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后用任意浏览器打开即可。

实现思路以及代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页版的简易计算器</title>
<!--使用js完成,之后可用:jquery-->
<!-
-->
<style>
    /*设置input的宽度和高度*/
    input{
        width: 396px;
        height: 50px;
        font-size: 30px;
    }
    
    /*表格的行文本左右居中*/
    tr{
        /*text-align*/
        text-align: center;
    }
    /*设置单元格的内容宽度和高度以及字体大小*/
    td{
        width: 100px;
        height: 119px;
        font-size:30px;
    }
    /*伪类选择器:hover*/
    td:hover{
        /*指定背景色*/
        background-color: greenyellow;
        /*cursor:pointer
         * 鼠标经过的时候,变成小手
         */
        cursor:pointer ;
    }
</style>
    </head>
<body>
<!--
cellspacing:单元边沿和单元格之间的空间
cellpadding:单元格和单元格之间的空间
-->
<!--在input上面写一个div: 指定这个当前系统时间-->
<!--禁用文本框的输入功能:disabled:disabled-->
<center><input type="text" value="0" id="show" disabled="disabled" /></center>
<table border="1px" cellspacing="0" cellpadding="2" align="center" width="400px" 
    height="600px">
    <tr>
        <td id="clear">C</td>
        <td id="del">退格</td>
        <td>%</td>
        <td>/</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>*</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
    </tr>
    <tr>
        <td colspan="2">0</td>
        <td>.</td>
        <td id="result">=</td>
    </tr>
</table>
</body>
<script>
    /**
     * -
    1.页面布局
        要么使用div+css,要么table布局
        table布局:5行4列的表格
        div+css布局:大的div  嵌套两个字div(输入框的和键盘)
    2.逻辑处理
        2.1 将数字键和小数点看成一类:clas="num"
        2.2 将运算符看成一类:        2.3 将清除键,退格键,=(等号),显示框,单独设置id属性
        2.4 获取显示框,清除键,=号,推格键所在的标签对象
        2.5 获取数字键所在的对象并设置点击事件
        2.6 获取运算符所在的对象并设置点击事件
     */
//获取显示框所在的标签对象
var showResult = document.getElementById("show") ;
//获取清除键所在的标签对象
var clear = document.getElementById("clear") ;
//获取退格键所在的标签对象
var del = document.getElementById("del") ;
//获取等号所在的对象
var result = document.getElementById("result") ;

//定义三个变量,分别保存第一个数,第二个数以及运算符
//第一个数
var numValue1 = "" ;
//第二个数
var numValue2 = "" ;
//操作符
var oper ="" ;

//获取数字键,包含小数点,并设置点击事件
var nums = document.getElementsByClassName("num") ;
//遍历数字,分别设置点击事件
for(var i = 0 ; i< nums.length ; i++){
    //设置点击事件:使用匿名函数
    nums[i].onclick = function(){
        
        //小数点的问题：只能出现一个：
        /**
         * 如果这个this.innerTest==.
         *         //小数点只能出现一个
         * 否则：
         *         不是小数点，就属于整数运算
         *         numValue1 += this.innerText;
                showResult.value = numValue1*1 ; //去掉首尾无效0
         */
        
        
        
        //测试
//        alert("获取到了每一个数字对象") ;
        //将点击的数字显示到文本框上
        //将nums[i]--->看成一个this:代表当前数字键对象的内存地址值
        //var text = this.innerText ; //普通文本
        //测试
//        alert(tesxt) ;
        //改变显示框对象的value属性
        //showResult.value = text;
        
        //问题1:目前:用户输入第一个数只能是一位数的
        //将数字内容赋值给第一个数,然后将第一个数展示到文本框上
//        numValue1 = this.innerText ;
        numValue1 += this.innerText;
//        showResult.value = numValue1*1 ; //去掉首尾无效0
        showResult.value = numValue1 ; //去掉首尾无效0
        
        //问题2:小数点的问题(小数点只能出现一个)
        
        
    }
}


//获取运算符所在的对象并设置点击事件
var operators = document.getElementsByClassName("operator") ;
//遍历操作符,设置点击事件
for(var i = 0 ; i < operators.length ; i++){
    //设置点击
    operators[i].onclick = function(){
        
        /**
         * 判断numValue2的值是否为空：
     *         如果是numValue2==""     
     *         如果numValue2不是空字符串
     *             用户可能点击等号或者运算符
         */
        if(numValue2==""){
                numValue2 = numValue1 ;
                numValue1 = "" ;
                //保存操作符
                oper = this.innerText ;
        }else{
            //用户要么点击=号要么进行四则运算
            //问题：应该将计算的结果赋值numValue2,清空numvalue1 
            
            if(numValue1!=""){
                resultFn() ;
            }
            
            //保留操作符
            oper = this.innerText ;
        }
        
        
        
        //测试
        //alert("运算符获取到了") ;
        //做运算 :思考如何做运算,最终处理
        //将第二个数赋值第一个数,然后将第一个数清空,等待接收用户下一次输入的数据
    /*    numValue2 = numValue1 ;
        numValue1 = "" ;
        //保存操作符
        oper = this.innerText ;*/
    }
}

//关于其他的操作:清除键
//设置清除键的点击事件
clear.onclick = function(){

    
    //将第一个数,第二个数以及运算符都情况掉
    //显示框显示默认值0
    numValue1 = "" ;
    numValue2 = "" ;
    oper = "" ;
    showResult.value = "0" ;
}

//删除键的逻辑,设置点击事件
del.onclick = function(){
    
//        alert("abc") ;
    //可以用到String :substring()截取功能
    if(numValue1.length!=1){
        //进行截取:从0索引开始截取到当前numValue1.length-1处的位置结束,将其值
        //赋值给numValue1
        //场景:删除剩余一个数字即可
     numValue1 = numValue1.substring(0,numValue1.length-1) ;
        //alert(numValue1) ;
    //将numValue1显示文本框上
//    showResult.value = numValue1 *1 ; //去掉首位无效0
    showResult.value = numValue1 ; //
}
//    else{
//        //自己处理    
        //将第一个数,第二个数,运算符清空掉
//    }
}

//给等号添加点击事件,做四则运算

result.onclick = function(){
    
    //抽取出一个方法
    resultFn() ;
}

//具体做四则运算的方法
function resultFn(){
    
    //定义运算的两个数据: one ,two
    //数据类型转换
    var one = new Number(numValue2)    ;//实际是第二个数
    var two = new Number(numValue1) ;//实际第一个数
    //保存计算结果
    var r = null ;
    //根据运算符进行判断，switch语句
    switch(oper){
    case "+":
        r = one + two ;
        break ;
    case "-":
        r = one - two ;
        break;
    case "*":
        r = one * two ;
        break ;
    case "/":
        //除数不能为0
        //判断
    /*    if(two==0){
            //将数据情况掉
            //并且弹框提示；除数不能为0
            
            r = 0 
        }else{
            one /two ;
        }*/
        r = one /two ;
        
        break ;
    }
    
    //将计算结果展示到显示框上
//    showResult.value = r ;
    
    //将计算的结果进行保留小数点的有戏位
//    numValue2 = r ;
    numValue2 = new Number(r).toFixed(6) ;
    numValue1 = "" ; //numValue1清空了
    showResult.value = numValue2*1; // numValue2*1

    //问题1 :1.2 * 3 = 3.599999996
    //问题2：去掉首尾无效0    ：parseFloat()
    //问题3：在四则元素：判断用户如果是点击等号或者点击继续运算，每一次都将第一个数清空掉了，
    //判断第一个数是否为空
    
     //问题4：小数点问题：小数点只能出现一个
    
//四则运算的问题：
    /**
     * 用户输入两个数据目前是直接处理结果，那么如何判断用户是要点击=号还是继续进行四则运算？
     *     在运算符点击监听事件中去坐
     * 判断numValue2的值是否为空：
     *         如果是numValue2==""     
     *         如果numValue2不是空字符串
     *             用户可能点击等号或者运算符
     *                 
     */
    
}

</script>
</html>

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

您可能感兴趣的文章:

javascript写的简单的计算器，内容很多，方法实用，推荐
js实现简单计算器
简易js代码实现计算器操作
html+js实现简单的计算器代码(加减乘除)
js实现一个简易计算器
用JS写的简单的计算器实现代码
javascript-简单的计算器实现步骤分解(附图)
纯javascript代码实现计算器功能(三种方法)
Vue.js实现的计算器功能完整示例
js网页版计算器的简单实现

关于js实现网页计算器和js实现网页计算器功能的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于html5+ css3 +js实现网页计算器、JavaScript制作简单网页计算器、javascript实现简单的可随机变色网页计算器示例、JavaScript实现网页版简易计算器功能的相关信息，请在本站寻找。

本文标签：