JavaScript简单计算器效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单计算器效果</title>
</head>
<body>
  <form name="myForm">
    数字1:<input type="text" name="num1" />
    <br>
    数字2:<input type="text" name="num2" />
    <br>
    结 果:<input type="text" name="res"/>
  </form>
  <br>
  <button onclick="Calculation(‘+‘)">+</button>
  <button onclick="Calculation(‘-‘)">-</button>
  <button onclick="Calculation(‘*‘)">*</button>
  <button onclick="Calculation(‘/‘)">/</button>
  <script type="text/javascript">
      function Calculation(e){
        var num1 = document.myForm.num1.value;
        var num2 = document.myForm.num2.value;
        var res = null;
        // 转换为数字,并验证合法性
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        if(isNaN(num1)){
          alert(‘数字1不合法,请填写为数字‘);
          return false;
        }
        if(isNaN(num2)){
          alert(‘数字2不合法,请填写为数字‘);
          return false;
        }

        // 计算结果
        switch(e){
          case ‘+‘:
            res = num1 + ‘+‘ + num2 + "=" + (num1 + num2);
            break;
          case ‘-‘:
            res = num1 + ‘-‘ + num2 + "=" + (num1 - num2);
            break;
          case ‘*‘:
            res = num1 + ‘*‘ + num2 + "=" + (num1 * num2);
            break;
          case ‘/‘:
            if(num2 == 0){
              alert(‘数字2不能为零‘);
              return false;
            }
            res = num1 + ‘/‘ + num2 + "=" + (num1 / num2);
            break;
        }

        // 将结果写入结果框内
        document.myForm.res.value = res;
      }
  </script>
</body>
</html>
时间: 2024-08-04 00:55:12

JavaScript简单计算器效果的相关文章

javascript简单计算器代码分析

javascript简单计算器代码分析:也许网页中需要一个简单的计算器功能,这个时候就要掌握如何编写,起码应该会修改,下面就通过一个简单的实例介绍一下如何实现简单的计算器效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

javascript简单计算器实践

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如”0123“,由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成”ד这个符号的,待后续完善. 附图片一张: html部分: 1 <!DOCTYPE

9.JavaScript简单计算器的实现

1.难点,怎么获取标签的值,注意点,获取到的值都是string类型,还要转换 var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); 2.怎么获取select下拉菜单下的值.. //这里说我自己百度来的.. var tag = document.getElementById("

Javascript 简单切换效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> * {padding:0; margin:0;} button { background-color: #ccc; width:80px; height: 3

Javascript 实现简单计算器实例代码

Javascript 实现简单计算器实例代码 这篇文章主要介绍了Javascript 实现简单计算器实例代码的相关资料,需要的朋友可以参考下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

j2ee-JSP之简单计算器

来源韩顺平.j2ee视频实战教程jsp第1讲(下集) -------------------------------------------------------------------------------------------------------- 简单计算器,可以控制输入的数(仅第一个数)不能为空且不能为字符串 myCal.jsp代码 1 <!--这是计算器的界面 --> 2 <!-- 可以控制输入的数不能为空且不能为字符串 --> 3 <%@ page co

HTML实现简单计算器

1 <!DOCTYPE html> 2 <html> 3 <meta name="content-type" content="text/html; charset=UTF-8"> 4 <head> 5 <title>Calculator</title> 6 7 <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时,调用eval方法计算结果然后将结果输出文字框中--> 8 9

Struts1应用、实现简单计算器、使用DispatchAction、显示友好的报错信息、使用动态Form简化开发

实现简单的支持加.减.乘.除的计算器 复制一份Struts1Demo修改:Struts1Calc 方案1: Struts1Calc 创建ActionForm: CalcForm extends ActionForm, num1 num2,生成getter setter: 创建4个Action,在页面中,通过JavaScript控制提交到不同的Action Bean. AddAction: public class AddAction extends Action { @Override publ

Javascript 简单实现鼠标拖动DIV

http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/article/10578.htm <html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { font-size:12px; color:#333333; border : 0px