JS做一个四则运算计算器

用JS做一个简单的网页计算器如上图所示,只进行简单的加减乘除运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
    <input type="text" name="text" id="pre" onblur="validate(this.value);">
    <select  id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" name="text" id="next" onblur="validate(this.value);">
    <span>=</span>
    <input type="text" id="result" readonly="true">
    <input type="button" id="btn" value="提交" onclick="calculator();">
    <script>
    function validate(str){
        var reg = /^\d+$/;              
               if (!reg.test(str)) {                  
                   alert("请输入数字");
               }
    }
    function calculator(){
        var pre=document.getElementById("pre").value;
        var next=document.getElementById("next").value;
        var opra=document.getElementById("operator").value;
 
        var result=0;
        switch(opra) {
            case "+":
                result=parseInt(pre)+parseInt(next);
                break;
            case "-":
                result=parseInt(pre)-parseInt(next);
                break;
            case "*":
                result=parseInt(pre)*parseInt(next);
                break;
            case "/":
                if(parseInt(next)!=0){
                    result=parseInt(pre)/parseInt(next);
                }
                else{
                    alert("除数不能为0");
                    return;
                }
                break;
            default:
                break;
        }
        document.getElementById("result").value=result;
    }
    </script>
</body>
</html>

时间: 2024-08-18 22:22:06

JS做一个四则运算计算器的相关文章

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

原生js做一个简单的进度条

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素. 主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止 效果如下: 一 css如下: *{ margin: 0; padding: 0; } #box{ width: 500px; height: 30px; margin: 50px auto; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 15px;

使用node.js做一个自用的天气插件

var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cookie = '你登录百度后的cookie' var options = { method: "GET", url: url, qs: { "type": "weather", "asyn": 1, "t": new

css3加js做一个简单的3D行星运转效果

前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处理的不是很好,如果有好的建议万望留言告知,不胜感谢.源代码已上传到github上,点这里获取.好了不说废话了,下面附上代码. HTML部分 <div class="path-Saturn"> <div id="Saturn" title="土

用js做一个简单的留言板效果

html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>js实现简单留言板</title> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <link rel="stylesheet&quo

JS制作一个简易计算器

//javascript简易计算器 <!DOCTYPE html> <html>  <head>   <title> 事件</title>     <script type="text/javascript">    function count(){             //获取第一个输入框的值     var node1=document.getElementById('txt1').value;     

D3.js 做一个简单的图表!

柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成.本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML 的文字,没有涉及图形的制作. 要绘图,首要需要的是一块绘图的“画布”. HTML 5 提供两种强有力的“画布”:SVG 和 Canvas. 1.1. SVG 是什么 SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定

逆波兰算法,实现一个四则运算计算器

计算器分两步实现: 1.将常规表达式(中缀表达式)处理成后缀表达式. 2.计算后缀表达式. 第一步:  中缀如:1+(2*3)-4/2,转化为后缀123*+42/- . 规则:从左往右遍历中缀表达式,如果是数字,就直接拿出来,如果是符号,那么判断优先级,如果当前符号(包括右括号)的优先级不大于栈顶符号的优先级,那么依次出栈,直到优先级不满足(如果是右括号,那么直到出栈到左括号,后缀表达式里不需要左右括号),然后把该符号入栈.优先级高的直接入栈.如此直到搞定. 第二步: 计算后缀表达式. 规则:从