页面样式


<!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. mxonline实战11，课程详情页2，课程章节页

    对应github地址:第11天   一. 课程详情页2   1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码

  2. Servlet入门实践

    本文主要介绍servlet,包括入门到升入,基本上可以对servlet有一个很好的认识: 1servlet介绍:   Servlet(Server Applet),全称Java Servlet,未有中 ...

  3. Linux安装 jdk、tomcat、eclipse、mysql

    概述如果需要在Linux下进行JavaEE的开发,我们需要安装如下软件: 安装JDK 安装步骤 0) 先将软件通过xftp5 上传到/opt 下 1) 解压缩到/opt tar -zxvf  jdk. ...

  4. 对 ArrayList 进行分页.

    /** * 测试分页 */ @Test public void testPage() { int bulkSize = 2; List<Integer> dataList = new Ar ...

  5. CODEVS-新斯诺克

    原题地址:新斯诺克 题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄 ...

  6. C基础《一》

    puts("第一个C语言程序输出了") C语言的编译和链接过程 C语言写的代码必须经过编译生成可执行文件才可以用, 编译就是把C语言写的代码进行识别,转换成计算机能够识别的二进制形 ...

  7. macOS High Sierra 10.13正式版USB安装盘制作

    1.首先,准备一个 8GB 或更大容量的 U盘,并备份好里面的所有资料. 2.下载好 macOS High Sierra 正式版的安装程序:https://support.apple.com/zh-c ...

  8. TortoiseGit学习系列之TortoiseGit基本操作将提交到本地的项目推送到在线仓库（图文详解）

    前面博客 TortoiseGit学习系列之TortoiseGit基本操作克隆项目(图文详解) TortoiseGit学习系列之TortoiseGit基本操作修改提交项目(图文详解) TortoiseG ...

  9. java中，方法可以访问他的类对象的任何私有特性

    java中,方法可以访问他的类对象的任何私有特性 读一本书(Core Java for the Impatient)时,发现这个注意,以前的时候没有在意,今天仔细想想发现记忆不深刻.记录一下 下面代码 ...

  10. hadoop-0.20.2安装配置

    该环境在Vmware Workstation 12 上安装配置一共三台机器master,slave1,slave2. 操作系统:Cenos 7.0 hadoop 版本:hadoop-0.20.2,版本 ...