页面样式


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

      // window.onload 获取元素getElementById

        window.onload = function(){

            var oTxt1 = document.getElementById('val01');

            var oTxt2 = document.getElementById('val02');

            var oFuhao = document.getElementById('fuhao');

            // 这三个要放在button函数里面，因为s1.value是获取input里面的输入，但是这个时候还没有输入了

            // var iNum1 = oTxt1.value;

            // var iNum2 = oTxt2.value;

            // var iNum3 = oFuhao.value;

            oBtn = document.getElementById('btn');

　　　　　　　// 计算按钮点击事件

            oBtn.onclick = function(){

                var iNum1 = oTxt1.value;

                var iNum2 = oTxt2.value;

                var iNum3 = oFuhao.value;

                var iResult;

　　　　　　　　　　//如果两个输入有一个是空的话
　　　　　　　　　　//return是让if里面执行结束

                if (iNum1=='' || iNum2=='') {

                    alert('不能为空');

                    return;

                }
　　　　　　　　　　//isNaN() 如果是true，说明是非数字，所以如果两个输入中有非数字，就提示alert

                if (isNaN(iNum1) || isNaN(iNum2)) {

                    alert('不能有字母');

                    return;

                }
　　　　　　　　　　//对+-*/四个操作对应的value进行判断
　　　　　　　　　　//如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数

                if (iNum3 == 0) {

                    iResult = parseInt(iNum1) + parseInt(iNum2)

                }

                else if (iNum3 == 1) {

                    iResult = parseInt(iNum1) - parseInt(iNum2)

                }

                else if (iNum3 == 2) {

                    iResult = parseInt(iNum1) * parseInt(iNum2)

                }

                else if (iNum3 == 3) {

                    iResult = parseInt(iNum1)/parseInt(iNum2)

                }

                alert(iResult);

            }

        }

    </script>

</head>

<body>

    <h3>计算器</h3>

    <input type="text" id="val01">

    <select id="fuhao">

        <option value="0">+</option>

        <option value="1">-</option>

        <option value="2">*</option>

        <option value="3">/</option>

    </select>

    <input type="text" id="val02">

    <input type="button" id="btn" value="计算">

</body>

</html>

javascrip 实现简单的计算器功能的更多相关文章

  1. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  2. python实现简单的计算器功能

    如想实现一个计算器的功能,输入格式为字符串,不能运用python里面的内置方法,出去简单的加减乘除,设计一个相对高级的计算器: a = '1 - 2 * ( ( 6 0 -3 0 +(-40/5) * ...

  3. 用python的正则表达式实现简单的计算器功能

    #!/usr/bin/env python # -*- coding:utf-8 -*- import sys import re def welcome_func(): ""&q ...

  4. python模块——re模块（简单的计算器功能实现_eval版）

    #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = "loki" # Usage: Make a Diy Calcu ...

  5. js小功能3：一个简单的计算器功能

    html: <input type='text' id='txt1' /> <select id='select'> <option value='+'>+< ...

  6. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  7. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

  8. javaWeb 使用 jsp 和 javaBean 实现计算器功能

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. 从0到1：使用Caliburn.Micro(WPF和MVVM)开发简单的计算器

    从0到1:使用Caliburn.Micro(WPF和MVVM)开发简单的计算器 之前时间一直在使用Caliburn.Micro这种应用了MVVM模式的WPF框架做开发,是时候总结一下了. Calibu ...

随机推荐

  1. MyEclipse生成Javadoc帮助文档

    Javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代码配套的API帮助文档.也就是说,只要在编写程序时以一套特定的标签作注释,在程序编写完成后,通过Java ...

  2. 从一个bug谈谈psqlodbc游标的一点认识

    本文源于最近修正的一个关于psqlodbc的bug,该bug在近期的psqlodbc的git上也有人提交了修正. 关于该bug的修正代码可以看这里: https://git.postgresql.or ...

  3. day5:python学习之集合

    0. 集合的作用及特点 集合具有去重和关系测试两大作用,它具有无序的特点. list1 = [1,2,3,4,5,7,6,8,6,4] list1 = set(list1) print(list1) ...

  4. Machine learning第6周编程作业

    1.linearRegCostFunction: function [J, grad] = linearRegCostFunction(X, y, theta, lambda) %LINEARREGC ...

  5. 说说MySQL权限

    前言 今天继续MySQL系列文章,讲讲MySQL权限相关的内容.我们都知道,在写系统的时候,都会有权限相关的服务,以达到权限控制的目的.以最简单的权限菜单为例: 管理员拥有最大权限,可以查看系统下所有 ...

  6. linux下启动tomcat服务的命令是什么

    Linux下tomcat服务的启动.关闭与错误跟踪,使用PuTTy远程连接到服务器以后,通常通过以下几种方式启动关闭tomcat服务:切换到tomcat主目录下的bin目录(cd usr/local/ ...

  7. GoLand 调试 Go

    Goland 调试 Go 从百度得知 VS Code 不能很好的支持 Go 的调试真让人肝儿疼 -- 引言 准备 Win 10 Pro Go(Version 1.10) GoLand(2018.3) ...

  8. 【算法笔记】A1047 Student List for Course

    https://pintia.cn/problem-sets/994805342720868352/problems/994805433955368960 题意 给出每个学生的选课情况,输出每节课选课 ...

  9. (转)Heartbeat+DRBD+MySQL高可用方案

    原文:http://www.cnblogs.com/gomysql/p/3674030.html 1.方案简介 本方案采用Heartbeat双机热备软件来保证数据库的高稳定性和连续性,数据的一致性由D ...

  10. Cassandra概念学习系列之Cassandra是什么？

    不多说,直接上干货! http://cassandra.apache.org/ Apache Cassandra是一套开源分布式NoSQL数据库系统.它最初由Facebook开发,用于储存收件箱等简单 ...