html中使用select option作为运算符的承接容器，输入值，选择不同运算符，计算结果。

文章地址 https://www.cnblogs.com/sandraryan/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <input type="number" id="num1">

    <input type="number" id="num2">

    <select name="" id="sel">

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

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

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

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

    </select>

    <span>=</span>

    <input type="number" id="num3" disabled>

    <button id="btn">click</button>
<!--num1, num2 用于接受用户的数字值，select放置运算符，num3禁止用户输入，用于放置返回值，button绑定点击事件 -->
方法一： if else判断 

<script>

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

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

    var num3 = document.getElementById("num3");

    var sel = document.getElementById("sel");
　　//获取需要的元素

    btn.onclick = function(){

        var val1 = parseInt(num1.value);

        var val2 = parseInt(num2.value);
　　　　//获取num1 num2的值，并从string转为number类型

        if(sel.value=="+"){

            num3.value = val1 + val2;

        }else if(sel.value=="-"){

            num3.value = val1 - val2;

        }else if(sel.value=="*"){

            // console.log("a");

            num3.value = val1 * val2;

        }else if(sel.value=="/"){

            num3.value = val1 / val2;

        }else{

            console.log("o");
　　　　　　　//else输出我为了测试玩的，可以不写

        } 
　　　　//当sleect的value分别为各个运算符时，进行不同的运算，并把value给第三个input框

    }  

    </script>

</body>

</html>

方法二：

switch语句

 <script>

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

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

    var num3 = document.getElementById("num3");

    var sel = document.getElementById("sel");

    btn.onclick = function(){

        var val1 = parseInt(num1.value);

        var val2 = parseInt(num2.value);

        switch(sel.value){

            case "+":

            num3.value = val1 + val2;

            break;

            case "-":

            num3.value = val1 - val2;

            break;

            case "*":

            num3.value = val1 * val2;

            break;

            case "/":

            num3.value = val1 / val2;

            break;

        }

    }

js利用select标签生成简易计算功能的更多相关文章

  1. 杂项一之js，<select>标签

    一.在aspx页面中实现 修改与删除页面的跳转 前台js部分: 在上部的js部分中写,根据传过来的id,来经行页面的跳转,并把id传过去 js部分就是实现了一个页面跳转的功能 (还有确认框confir ...

  2. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  3. js获取select标签选中的值[转]

    var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 va ...

  4. 【JS】<select>标签小结

    循环时通过<c:if>来判断是否为默认选中 <select name="select" id="month"> <c:forEac ...

  5. 使用JS对select标签进行联动选择

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. js获取select标签选中的值

    <p>        城市:         <select id="Select1" name="D1">            &l ...

  7. 利用select函数的定时返回功能在Windows上实现微秒级的cpu休眠

    说明:在调用该函数前要先调用WSAStartup初始化Winsock void uSleep(uint32_t usec) { struct timeval timeout; fd_set fds; ...

  8. js获取select标签选中的值及文本

    原生js方式: var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // ...

  9. cocos2d js 利用texture packer生成sprite

    cc.spriteFrameCache.addSpriteFrames(res.winLose_plist,res.winLose_png); var frame = cc.spriteFrameCa ...

随机推荐

  1. 杨柳絮-Info：对抗杨柳絮的7种方法和2种防治手段

    ylbtech-杨柳絮-Info:对抗杨柳絮的7种方法和2种防治手段 园林养护人员在对抗杨柳絮上 主要有以下两种方法↓↓ 1.化学方法 化学方法是通过激素等调节剂来抑制植物发芽分化,达到减少杨柳开花的 ...

  2. windows,linux,cmd查看公网/外网IP

    1.linux(centos)查看公网/外网ip: curl ifconfig.me #inconfig.me是一个网站来的#或者,如果上面的无法访问curl icanhazip.com   2.Wi ...

  3. VS2013下设置git同步，“出现了错误。详细消息: An error was raised by libgit2. Category = Net (Error).”。

    前言: 这个错误耽误了我数个小时,终于解决,不知道为何VS官方在与github同步上面做得如此麻烦.希望能帮到大家. 出现了错误.详细消息: An error was raised by libgit ...

  4. MySql实现Oracle的row_number()over(partition by ... order by ...)

    SELECT IF(t1.id = @id,@rownum := @rownum + 1,@rownum := 1)AS rownum, t1.*, @id := t1.id FROM (SELECT ...

  5. 【JZOJ3854】【NOIP2014八校联考第2场第2试9.28】分组(group)

    MEi Bsny所在的精灵社区有n个居民,每个居民有一定的地位和年龄,ri表示第i个人的地位,ai表示第i个人的年龄. 最近社区里要举行活动,要求几个人分成一个小组,小组中必须要有一个队长,要成为队长 ...

  6. 【JZOJ4901】【NOIP2016提高A组集训第18场11.17】矩阵

    题目描述 他是一名普通的农电工,他以一颗无私奉献的爱岗敬业之心,刻苦钻研业务,以娴熟的技术.热情周到的服务赢得了广大客户的尊敬和赞美.他就是老百姓称为"李电"的李春来. 众所周知, ...

  7. linux的简单操作

    查看当前用户who am i 创建用户:sudo adduser lilei然后输入密码 查看用户:ls /home 用新用户登陆:su -l lilei 查看所属用户组:groups 用户名 新建文 ...

  8. 跟我一起认识axure（三）

    交互设置,添加链接 点击预览

  9. 重磅！容器集群监控利器 阿里云Prometheus 正式免费公测

    Prometheus 作为容器生态下集群监控的首选方案,是一套开源的系统监控报警框架.它启发于 Google 的 borgmon 监控系统,并于 2015 年正式发布.2016 年,Prometheu ...

  10. LeetCode153 Find Minimum in Rotated Sorted Array. LeetCode162 Find Peak Element

    二分法相关 153. Find Minimum in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unkn ...