1.难点，怎么获取标签的值，注意点，获取到的值都是string类型，还要转换

var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);

2.怎么获取select下拉菜单下的值。。

//这里说我自己百度来的。。

var tag = document.getElementById("myselect");
// alert(tag);
// 获取标签的值
var opeartor = tag.options[tag.selectedIndex].value;

实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>计算器实现</title>

    <script type="text/javascript">

        function opera() {

            var num1 = parseInt(document.getElementById("num1").value);

            var num2 = parseInt(document.getElementById("num2").value);

            var tag = document.getElementById("myselect");

            // alert(tag);

            // 获取标签的值

            var opeartor = tag.options[tag.selectedIndex].value;

            // alert(opeartor);

         //     alert(num1);

            // alert(num2);

            // 声明变量存储值

            var result = 0;

            switch(opeartor) {

                case "+":

                    result = num1 + num2;

                    // alert('test');

                    break;

                case "-":

                    result = num1 - num2;

                    // alert('msg');

                    break;

                case "*":

                    result = num1 * num2;

                    break;

                case "/":

                    result = num1 / num2;

                    break;

            }

            // alert(result);

            // alert('msg');
　　　　　　　// 将值赋给id="result"的标签

            document.getElementById("result").value = result;

        }

    </script>

</head>

<body>

    <h1>计算器实现</h1>

    <input type="text" id="num1" />

    <select id="myselect">

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

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

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

        <option value="/" id="/">/</option>

    </select>

    <input type="text" id="num2" />

    =

    <input type="text" id="result" onclick="opera()">

</body>

</html>

9.JavaScript简单计算器的实现的更多相关文章

  1. javascript简单计算器实践

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...

  2. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  3. Ext实现简单计算器

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...

  4. JavaScript编写计算器的发展史

    JavaScript编写计算器的发展史: 编写一个普通的四则运算: <!DOCTYPE html> <html lang="en"> <head> ...

  5. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  6. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  7. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

  8. php大力力 [005节] php大力力简单计算器001

    2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...

  9. PHP实现简单计算器

    <!--简单的计算器--> <!DOCTYPE html> <html> <head> <title>PHP实现简单计算器</titl ...

随机推荐

  1. Mac 常用的手势

    可以在触屏版-更多手势查看 技巧:前期慢慢滑动练习.一定要慢慢滑动,这样可以清楚的看出有没有产生效果,尤其注意大拇指滑动的感觉. 回到桌面:四指向外 打开Lanuchpad:四指向内 查看所有任务:三 ...

  2. c#, extract number from string

    using System.Text.RegularExpressions; string numberStr = Regex.Match (str, "[0-9]").Value; ...

  3. TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签

    首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...

  4. centos7和scientific linux7里面调出中文输入法

    默认安装后,却没有中文输入,于是研究以下,原来是没有调出来. 1.应用程序->系统工具->设置 2.选择“区域和语言” 3.这里默认会有一个汉语,如果没有,那么你当初选择安装的是英语,需要 ...

  5. centos单机安装Hadoop2.6

    一,安装环境 硬件:虚拟机 操作系统:Centos 6.4 64位 IP:10.51.121.10 主机名:datanode-4 安装用户:root 二,安装JDK 安装JDK1.6或者以上版本.这里 ...

  6. 使用Data URL将图片嵌入到网页中

    早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...

  7. [转]OpenMP中的private/firstprivate/lastprivate/threadprivate之间的比较

    转自:http://blog.csdn.net/gengshenghong/article/details/6985431 private/firstprivate/lastprivate/threa ...

  8. jQuery中bind函数绑定多个事件

    名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleav ...

  9. Switch选择语句能否作用在String【字符串】上，也就是能否这么写：Switch(一个字符串变量)？

    Switch选择语句能否作用在String[字符串]上,也就是能否这么写:Switch(一个字符串变量)? 解答:不可以,只能处理int,byte,short,char,(其实是只能处理int,其它三 ...

  10. 可以输入也可以下拉选择的select

    网址:http://www.helloweba.com/view-blog-348.html 示例:http://www.helloweba.com/demo/2016/editable-select ...