JavaScript实现网页计算器

 更新时间:2022年07月05日 07:05:22   作者:但行好事wlw  
这篇文章主要为大家详细介绍了JavaScript实现网页计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

我们学完了函数,做一个网页计算器的小案例,巩固一下。

共两个案例:

案例一图:

相加:

相减:

相乘:

相除:

代码如下:

结构:

<p>整数1: <input type="text" name="" id="num1"> </p>
<p>整数2: <input type="text" name="" id="num2"> </p>
    <p>
        <input type="button" value="相加" onclick="math(add)">
        <input type="button" value="相减" onclick="math(fuck)">
        <input type="button" value="相乘" onclick="math(doubles)">
        <input type="button" value="相除" onclick="math(fucks)">
    </p>
    <p>结果:<input type="text" name="" id="result"></p>
   
     <script>
        function math(func) {
            var result = document.getElementById('result');
            var num1 = parseInt(document.getElementById('num1').value);
            var num2 = parseInt(document.getElementById('num2').value);
            if (isNaN(num1) || isNaN(num2)) {
                alert('输入数字,你个傻吊');
                return false;
            } else {
                result.value = func(num1, num2);
            }
        }

        function add(num1, num2) {
            return num1 + num2;
        }

        function fuck(num1, num2) {
            return num1 - num2;
        }

        function doubles(num1, num2) {
            return num1 * num2;
        }

        function fucks(num1, num2) {
            return num1 / num2;
        }
</script>

案例二:

案例图:(实现案例图上的功能)

<script>
        while (true) {
            var choose = parseInt(prompt('欢迎使用简易计算器:' + '\n' + '1.加法操作' + '\n' + '2.减法操作' + '\n' + '3.乘法操作' + '\n' + '4.除法操作' + '\n' + '5.退出'));
            if (choose > 5 || choose <= 0) {
                alert('请输入1-5之间的选项...');
                continue;
            } else {
                if (choose == 1) {
                    alert('欢迎使用加法计算器,请输入需要计算的两个数值');
                    var num1 = parseFloat(prompt('第一个数值:'));
                    var num2 = parseFloat(prompt('第二个数值:'));
                    alert('结果为:' + (num1 + num2));
                    continue;
                } else if (choose == 2) {
                    alert('欢迎使用减法计算器,请输入需要计算的两个数值');
                    var num1 = parseFloat(prompt('第一个数值:'));
                    var num2 = parseFloat(prompt('第二个数值:'));
                    alert('结果为:' + (num1 - num2));
                    continue;
                } else if (choose == 3) {
                    alert('欢迎使用乘法计算器,请输入需要计算的两个数值');
                    var num1 = parseFloat(prompt('第一个数值:'));
                    var num2 = parseFloat(prompt('第二个数值:'));
                    alert('结果为:' + (num1 * num2));
                    continue;
                } else if (choose == 4) {
                    alert('欢迎使用加法计算器,请输入需要计算的两个数值');
                    var num1 = parseFloat(prompt('第一个数值:'));
                    var num2 = parseFloat(prompt('第二个数值:'));
                    alert('结果为:' + (num1 / num2));
                    continue;
                } else {
                    alert('欢迎再次使用');
                    alert('再见');
                    break;
                }
            }

        }
</script>

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

相关文章

  • js面向对象之实现淘宝放大镜

    js面向对象之实现淘宝放大镜

    这篇文章主要为大家详细介绍了js面向对象之实现淘宝放大镜,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS使用贪心算法解决找零问题示例

    JS使用贪心算法解决找零问题示例

    这篇文章主要介绍了JS使用贪心算法解决找零问题,简单描述了找零问题,并结合具体实例分析了javascript使用贪心算法解决找零问题的相关实现技巧,需要的朋友可以参考下
    2017-11-11
  • Javascript控制div属性动态变化实例分析

    Javascript控制div属性动态变化实例分析

    这篇文章主要介绍了Javascript控制div属性动态变化,以实例形式较为详细的分析了JavaScript响应鼠标事件动态操作页面元素属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js拼接字符串时如何在中间加上空格

    js拼接字符串时如何在中间加上空格

    这篇文章主要介绍了js拼接字符串时如何在中间加上空格的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 如何利用JavaScript实现二叉搜索树

    如何利用JavaScript实现二叉搜索树

    这篇文章主要给大家介绍了关于如何利用JavaScript实现二叉搜索树的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 通过网页查看JS源码中汉字显示乱码的解决方法

    通过网页查看JS源码中汉字显示乱码的解决方法

    这篇文章给大家主要介绍了通过网页查看JS源码的时候,发现汉字显示是乱码的解决方法,文中通过图文详解的介绍了解决的步骤,详细会对大家很有帮助,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • js实现贪吃蛇小游戏

    js实现贪吃蛇小游戏

    这篇文章主要为大家详细介绍了js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 浅谈原型对象的常用开发模式

    浅谈原型对象的常用开发模式

    下面小编就为大家带来一篇浅谈原型对象的常用开发模式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 轻松实现javascript图片轮播特效

    轻松实现javascript图片轮播特效

    这篇文章主要帮助大家轻松实现javascript图片轮播特效,点击标签还可以实现图片切换,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS实现的简洁二级导航菜单雏形效果

    JS实现的简洁二级导航菜单雏形效果

    这篇文章主要介绍了JS实现的简洁二级导航菜单雏形效果,通过简单的JavaScript响应鼠标事件遍历页面元素实现二级导航菜单切换的效果,非常简单实用,需要的朋友可以参考下
    2015-10-10

最新评论