Javascript学习：综合案例2--网页计算器

最新推荐文章于 2023-12-18 17:49:34 发布
最新推荐文章于 2023-12-18 17:49:34 发布
阅读量433 收藏 3
点赞数
分类专栏： 前端笔记 Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32584661/article/details/80667175
版权

js自学网站推荐：http://www.51zxw.net/study.asp?vip=4857021

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin: 20px auto;
            border: 5px outset orange;
        }
        #tab_1,#tab_2,#tab_3{
            border: 3px outset rgba(15,10,10,0.3);
        }
        td{
            height: 30px;
            background:#ccc;
        }
        input{
            outline: none;
            box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset;
        }
        [type=button]{
            width:60px;
            height:40px;
            border-radius: 5px;
            background: #fff;
            box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset;
        }
        #txtnum{
            background: #fff;
            width:100%;
            height:44px;
            text-align: right;
            font-size:22px;
        }
        .btnbox{
            padding: 5px auto;
            text-align: center;
        }

    </style>
</head>
<body>

    <table cellspacing="0">
        <tr>
            <td colspan="2"><input type="text" id="txtnum" value="0"></td>
            <td class="btnbox">
                <input type="button" value="清除" οnclick="txtnum.value='0';result=0">
                <input type="button" value="退格" οnclick="backspace()">
            </td>
        </tr>
        <tr>
            <td>
                <table id="tab_1">
                    <tr>
                        <td><input type="button" value="sin" οnclick="math('sin')"></td>
                        <td><input type="button" value="cos" οnclick="math('cos')"></td>
                        <td><input type="button" value="tan" οnclick="math('tan')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="asin" οnclick="math('asin')"></td>
                        <td><input type="button" value="acos" οnclick="math('acos')"></td>
                        <td><input type="button" value="atan" οnclick="math('atan')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="PI" οnclick="math('PI')"></td>
                        <td><input type="button" value="1/x" οnclick="math('1/x')"></td>
                        <td><input type="button" value="exp" οnclick="math('exp')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="lnx" οnclick="math('lnx')"></td>
                        <td><input type="button" value="lgx" οnclick="math('lgx')"></td>
                        <td><input type="button" value="n!" οnclick="math('n!')"></td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="tab_2">
                    <tr>
                        <td><input type="button" value="7" οnclick="num(7)"></td>
                        <td><input type="button" value="8" οnclick="num(8)"></td>
                        <td><input type="button" value="9" οnclick="num(9)"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="4" οnclick="num(4)"></td>
                        <td><input type="button" value="5" οnclick="num(5)"></td>
                        <td><input type="button" value="6" οnclick="num(6)"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="1" οnclick="num(1)"></td>
                        <td><input type="button" value="2" οnclick="num(2)"></td>
                        <td><input type="button" value="3" οnclick="num(3)"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="0" οnclick="num(0)"></td>
                        <td><input type="button" value="." οnclick="decimal()"></td>
                        <td><input type="button" value="=" οnclick="compute('=')"></td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="tab_3">
                    <tr>
                        <td><input type="button" value="+" οnclick="compute('+')"></td>
                        <td><input type="button" value="取整" οnclick="math('int')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="-" οnclick="compute('-')"></td>
                        <td><input type="button" value="取余" οnclick="compute('%')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="*" οnclick="compute('*')"></td>
                        <td><input type="button" value="x^y" οnclick="compute('x^y')"></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="/" οnclick="compute('/')"></td>
                        <td><input type="button" value="+/-" οnclick="plusMinus()"></td>
                    </tr>
                </table>

            </td>
        </tr>
        
    </table>


    <script>

        var Boo = false;
        var result = 0 ;

        var ope; //存储计算符号的变量

        /*自定义通过Id来获取元素的函数 */
        function $(id) {
            return document.getElementById(id);
        };

        /*输入小数点*/
        function decimal() {
            var txt = $("txtnum");
            //判断是否按下运算符号,若按下运算符，文本框清0；
            if(Boo){
                txt.value = "0." ;
            }else{
                //indexOf:检索数值中是否已有小数点
                if(txt.value.indexOf(".")==-1){
                    txt.value += "." ;
                }
            }


        };

        /*显示屏获取按键数字 */
        function num(num) {
            var txt = $("txtnum");
            //判断是否按下运算符号,若按下运算符，文本框清0；
            if(Boo){
                txt.value = num ;
                Boo=false;
            }else{
                //判断初始数字是否为0
                if(txt.value=="0"){
                    txt.value = num ;
                }else{
                    txt.value += num ;
                }
            }
            Boo=false;
        }

        function compute(op) {
            var onum = $("txtnum").value;
            if(onum==" "){onum=0};
            Boo = true;

            switch(ope){
                case "+" :
                    result += parseFloat(onum);break;
                case "-" :
                    result -= parseFloat(onum);break;
                case "*" :
                    result *= parseFloat(onum);break;
                case "/" :
                    result /= parseFloat(onum);break;
                case "=" :
                    result = parseFloat(onum);break;
                case "%" :
                    result %= onum;break;
                case "x^y" :
                    result =Math.pow(result,onum);break;

                default:
                    result = parseFloat(onum);
            }

            $("txtnum").value = result;
            ope = op;
        }
        
        //正负键：取反
        function plusMinus(){
            var onum = $("txtnum").value;
            if(onum==""){
                alert("数据不能为空！");
            }else{
                $("txtnum").value *= -1;
            };
            
        }

        //退格键
        function backspace(){
            var txt = $("txtnum");
            txt.value = txt.value.substring(0,txt.value.length-1);
            if(txt.value==""){ txt.value=0; }
        }


        function math(op){
            var onum = $("txtnum").value;
            if(onum==""){alert("数据不能为空！");}
            Boo = true;
            with(Math){
                switch (op){
                    case "sin": result = sin(onum);break;
                    case "cos": result = cos(onum);break;
                    case "tan": result = tan(onum);break;
                    case "asin": result = asin(onum);break;
                    case "acos": result = acos(onum);break;
                    case "atan": result = atan(onum);break;

                    case "PI": result = PI;break;
                    case "1/x": result = 1/onum;break;
                    case "exp": result = exp(onum);break;
                    case "lnx": result = log(onum);break;
                    case "lgx": result = log(onum)/log(10);break;
                    case "i": result = floor(onum);break;
                    case "int" :result =round(onum);break;  //取整（四舍五入）

                    case "n!": result = jc(onum);break;  //求阶乘

                    default: result = parseFloat(onum);

                };

                $("txtnum").value = result;

            };

        };

        //阶乘计算
        function jc(a){
            if(a==1){
                return 1;
            }else{
                return jc(a-1)*a;
            }
        }

        /*
        * indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
        * 如果要检索的字符串值没有出现，则该方法返回 -1。
        *
        * substring() 方法用于提取字符串中介于两个指定下标之间的字符。
        *
        * with 语句用于设置代码在特定对象中的作用域。
        * 
        * */


    </script>

</body>
</html>

酷jjs
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在html界面中加入js代码,在html中嵌入js脚本
weixin_36467048的博客
05-31 2653
一、在html中嵌入js代码：在html文件里嵌入js代码主要有四种形式：第一种是通过标记，这种一般用来定义一些函数，放在body外；第二种是通过文件形式导入，由标记的src属性指定路径；第三种是放在由句柄的属性值指定；第四种是使用javascript:协议。(1)方法一：1、把js代码放在标记之间；如：functionsquare(x){returnx*x;}2、一个html文档可以包含多个标记...
react-reactantdmobilewebpack房贷计算器
08-14
总的来说，"react-reactantdmobilewebpack房贷计算器"是一个综合性的项目，展示了React、Ant Design Mobile和Webpack在实际开发中的应用。通过学习和实践这样的项目，开发者不仅可以提升React和移动端开发技能，还能...
JavaScript实例教程源码
09-30
JavaScript实例教程源码
用JavaScript和HTML实现一个精美的计算器网页
高性价比服务器就选：蓝易云
12-18 95
该计算器网页使用HTML定义了页面结构，CSS样式使其具有精美的外观，而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符，并通过“=”按钮来进行计算，计算结果会显示在文本框中。为了实现一个精美的计算器网页，我们可以使用HTML和JavaScript来构建界面和处理计算逻辑。
用javascript实现从两个文本框中获取输入的数字，点击求和按钮，在文本框中得到结果。
aigo_2021的博客
04-25 6815
编程完成以下效果 <!doctype html> <html lang="en"> <head> <title>Document</title> <script> function button1(){ var t1=document.getElementById("text1"); var t2=document.getElementById("text2"); var sum1=parseInt.
JavaScript小案例——输入两个数，计算两者的和，打印到页面中
weixin_54645034的博客
08-06 4701
简单实操js的输入输出
微信小程序开发-简易计算器案例源码.zip
11-21
在这个“微信小程序开发-简易计算器案例源码.zip”压缩包中，我们找到了一个用于学习和实践微信小程序开发的简易计算器应用的源代码。 首先，我们需要了解微信小程序的基本开发环境。开发者需要安装微信开发者工具...
房贷计算器-表单提交案列
01-02
在这个“房贷计算器-表单提交案例”中，我们主要关注如何设计和实现一个具有验证功能的房贷计算器表单。这个案例涵盖了表单验证的多种策略，包括非空检查、数字验证以及正则表达式验证。 首先，让我们从表单设计的...
微信小程序设计-房贷计算器.zip
最新发布
12-19
在本案例中，“微信小程序设计-房贷计算器”是一个专为计算房贷而设计的小程序项目，用户可以通过它方便地估算自己的贷款负担。下面将详细介绍房贷计算器涉及的相关知识点。 1. 微信小程序开发环境搭建： 开发微信...
Calculator:这是使用HTML，CSS和Javascript制作的计算器
05-24
综上所述，这个计算器项目是一个综合性的实践案例，涵盖了前端开发的三大核心技术，有助于提升开发者在网页交互和动态效果方面的技能。通过学习和理解这个项目，你可以更深入地了解HTML、CSS和JavaScript在实际项目...
在HTML中插入JavaScript代码的示例
zam183的博客
06-20 883
在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。 在 <head>...</head> 部分. 在 <body>...</body> 部分. 在<body>...</body> 和<head>...</he...
（五十二）剑网三大风车伤害计算器
weixin_33875564的博客
12-03 171
#include<iostream> #include<string> usingnamespacestd; intmain() { signedinta; doubleatk,pf,hx,hx1; cout<<"本程序用于测试藏剑大风车伤害收益:\n默认奇穴点出：\n孤鸾（加大风车10...
JavaScript总结2
qq_43776408的博客
09-01 110
<html> <body> <script language = "JavaScript"> var a = 0xa1 var b = 0xf2//这是16进制 var c = 037//这是8进制 var d =3e2//这是科学记数法 var e = true//这是布尔型变量 //if语句和C语言一样，非0真，0假，true真 document.write...
基于js的网页计算器实现
学习小使者 的专栏
06-17 2297
一个功能非常齐全的计算器，支持十六进制、十进制、八进制、二进制、双曲函数、角度制、弧度制的运算，支持公式计算，以及一些常用的功能。
Html初学之————超详细教写一个简陋的加减乘除计算器
CCblibo的博客
09-06 9863
1.新建一个记事本将html基本结构写出 2.以实现加法举例 a.先定义一个文本框用来输入 b.+ c.再定义一个文本框输入 d.= e.定义一个文本框用来输出 在body中输入以下代码 <input type="text" id="input2" />+<input type="text" id="input3" >=<input type="text" id=...
JavaScript编程语言 基础 （1）
weixin_33730836的博客
01-02 291
问题：什么是web前端前端：指界面，计算机（PC）软件桌面的界面； 计算机端的浏览器界面； 移动端的软件（app）界面； 移动端的浏览器界面。Html+css+JavaScript 使用网页技术（Html，css，JavaScript）开发界面；Html，css和JavaScript的关系：HTML:架构师，网页内容；CSS:修饰师：装饰内容。JavaScript：魔术师，内容网页进行交互。关于学...
前端项目---网页计算器（HTML+CSS+JavaScript）
m0_37671741的博客
04-22 8430
网页计算器 <html> <head> <title>计算器</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置div样式*/ #showdiv{ border: soli...
函数综合 简易计算器案例
gegejiawei的博客
06-04 950
项目说明 名称：仿windows计算器 功能 1、实现单击按钮录入数字 2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为零 3、实现小数点功能并添加异常处理：小数点只能出现一次 4、实现正负号功能 5、实现退位功能，已经是最后一位时，显示框显示为零 6、清屏功能 使用的知识点 1、利用大量的自定义函数实现业务逻辑 2、灵活运用事件及事件处理 3、培养异常处理的编程方法 4、培养并实践利用不同思路实现编程 综合练习的目的 1、将css、html和js有效的进行技术组合，实现业务功能 2、锻炼和
JavaScript：综合案例---房贷计算器的实现
06-10
好的，我很乐意为您介绍JavaScript实现房贷计算器的方法。 首先，我们需要了解房贷计算器的计算公式。一般来说，房贷计算器需要计算出每月还款金额、还款总额、支付利息总额等指标。这些指标的计算公式如下： 每月...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值