JavaScript实现简单计算器小功能

2024-09-27 13:59:48

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

此例为简单的计算器：

代码示例：

<!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">
    <title>简易计算器</title>
    <script>
        var choice = prompt('欢迎使用简易计算器：\n1.加法运算；\n2.减法运算；\n3.乘法运算；\n4.除法运算；\n5.退出；\n请输入您的选项：');
        switch (choice) {
            case '1':
                add();
                break;
            case '2':
                sub();
                break;
            case '3':
                multiplication();
                break;
            case '4':
                division();
                break;
            case '5':
                alert('已退出')
                break;
        }

        // 加
        function add() {
            var num = prompt('请输入要进行加法运算的数字个数：');
            var sum = 0;
            var arr = [];
            for (var i = 0; i < num; i++) {
                arr[i] = prompt('请输入第' + (i + 1) + '个数字的值：');
                console.log(arr[i]);
                sum += parseFloat(arr[i]);

                /*
                注意：这种写法可以给arr数组赋值，但是不能调用arr[arr.length]，调用得到undefined
                arr[arr.length] = prompt('请输入第' + (i + 1) + '个数字的值：');
                console.log(arr[arr.length]);
                sum += parseFloat(arr[arr.length]);
                */
            }
            alert(arr + '这些数字的和为：' + sum);
        }

        // 减
        function sub() {
            var number1 = prompt('请输入第一个值：');
            var number2 = prompt('请输入第二个值：');
            var result = parseFloat(number1) - parseFloat(number2);
            alert(number1 + '减去' + number2 + '的值为：' + result);
        }

        // 乘
        function multiplication() {
            var number1 = prompt('请输入第一个值：');
            var number2 = prompt('请输入第二个值：');
            var result = parseFloat(number1) * parseFloat(number2);
            alert(number1 + '乘以' + number2 + '的值为：' + result);
        }

        // 除
        function division() {
            var number1 = prompt('请输入第一个值：');
            var number2 = prompt('请输入第二个值：');
            var result = parseFloat(number1) / parseFloat(number2);
            alert(number1 + '除' + number2 + '的值为：' + result);
        }
    </script>
</head>

<body>

</body>

</html>

注意：尝试用arr[arr.length]赋值和计算，但是只能赋值，不能调用，调用显示arr[arr.length]值为undefined

页面效果：

加：

减：

乘：

除：

退出：

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

利用JavaScript写一个简单计算器

效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
原生js实现简易计算器

本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>
原生JavaScript实现网页版计算器

本文实例为大家分享了JavaScript实现网页版计算器的具体代码,供大家参考,具体内容如下由于无聊看电脑上的系统软件翻到了计算器这个功能,就简单写一下这个计算器的功能吧,这个网页版计算器基本功能都有吧,但是不是很完全,仅供参考. 首先是网页计算器的样式部分不想手写直接复制即可 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <
javascript实现编写网页版计算器

本篇主要纪录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下话不多说,代码如下: 首先是html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用js实现网页版计算器</title> <link rel="stylesheet" href
js制作简易计算器

本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子. <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr> <td>第一个数</td> <td&g
js版实现计算器功能

本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下在老师的带领下完成了这个简单的计算器,这是一个神奇的过程,计算器的基本功能都是有的.虽然是个简单的计算器,但对初学者来说,还是需要强大的逻辑判断能力,里面有很多的条件,作为开发者要不断的寻找设计里的bug,不断地完善用户的需求,而这些都需要清晰的逻辑推理和判断,我有点头大了. <!DOCTYPE html> <html> <head lang="en"> <meta c
javascript实现计算器功能详解流程

目录 1.计算器功能介绍 2.计算器页面设计 1.导航栏部分 2.数据部分 3.index.wxml布局页面 4.index.css样式页面 5.运行结果 3.功能实现部分 1.删除功能 2.清空功能 3.其他功能实现 1.计算器功能介绍可以实现数据的加(+),减(-),乘(*),除(/),取余运算(%),以及实现数据的删除(Del)和清空功能(C). 2.计算器页面设计 1.导航栏部分 { "navigationBarBackgroundColor": "#fff&quo
用javascript实现简单计算器

本文实例为大家分享了javascript实现简单计算器的具体代码,供大家参考,具体内容如下设计一个简单的计算器代码 <body> <a>第一个数</a> <input type="test" id="inputId1" value="" /><br/> <a>第二个数</a> <input type="test" id="i
JavaScript实现简单计算器小功能

本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下此例为简单的计算器: 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
iOS实现简单计算器小功能

本文实例为大家分享了iOS实现简单计算器小功能的具体代码,供大家参考,具体内容如下 SimpleCaculatorViewController.h // // SimpleCaculatorViewController.h // SimpleCaculator // // Created by LI Junui on 14-2-12. // Copyright (c) 2014年 LEE JUNHUI. All rights reserved. // #import <UIKit/U
JavaScript实现简单计算器小程序

本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
JavaScript实现简易计算器小功能

本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body>  <input type="text&
基于javascript实现简单计算器功能

本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下效果图: 实现代码: <html> <head> <script> function calc(event){ // test //window.alert(event.value); var val = new String(event.value); // clear space val = val.trim(); var res = document.getEl
JavaScript实现简单计算器功能

本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下 1.实现基本计算器功能,如图 2.逻辑代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title>  <style> .showdiv{ text-align: center; margin:
C#实现简单的计算器小功能

本文实例为大家分享了C#实现简单的计算器小功能的具体代码,供大家参考,具体内容如下先来张效果图吧(5分钟写好,莫怪) 代码: 数字按钮绑定的是button_Clickd()方法运算符按钮绑的是Button_Clickp()方法思想:按下数字按钮,将数字按钮的值连接到textbox上,然后按下运算符判断是否为等于,并记录运算符的内容,以便后面做处理. using System; using System.Collections.Generic; using System.ComponentM
javascript实现简单计算器效果【推荐】

最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span
Java实现简单计算器小程序

本文实例为大家分享了Java实现简单计算器小程序的具体代码,供大家参考,具体内容如下这学期没事学了一点点Java,想写个程序练手,因为只学了一点点,所以暂时只能先写个实现简单功能的计算器练练. 由于期末来了,没太多时间,所以暂时就实现最简单的功能. 个人不喜欢用大量文字记叙程序,而且该程序也相对简单,所以直接画了张程序框架图,再配合代码的注释,就明白程序的原理了. 图计算器程序框架代码如下: package tst.jframe; import java.awt.EventQueue; i
PHP实现计算器小功能

本文实例为大家分享了PHP实现计算器小功能的具体代码,供大家参考,具体内容如下 <?php if (isset($_POST['sub'])) { $f = true; $error = "有以上问题: <br>"; if ($_POST["num1"] == "") { $f = false; $error .= "第一个数不能为空.<br>"; } else { if(!is_numeric(

JavaScript实现简单计算器小功能

相关推荐

随机推荐