今天第一天学javascript，做了个简易的四则运算，提供参考，效果图：

html代码：

<!DOCTYPE html>

<html >

<head >

<meta charset="UTF-8">

<link rel="stylesheet" type = "text/css"  href = "css/1.css">

<title>index</title>

</head>

<body id="a1">

<script type="text/javascript" src = "js/3.js">

</script>

<form>

<p >

 <input id = "1" type="text" size="20px" name="a "  onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/>

 <select id = "c">

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

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

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

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

 </select>

 <input id = "2" type="text" size="20px" name="b"  onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/>

 =

 <input id = "3" type="text" size="20px" name="result "  onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/>

 <input name = "button" type = "button" value= "点击提交" onclick = "cal()">

 </p>

</form>

</body>

</html>

js代码：

function  cal(){

        var numa,numb,cc,sum;

        numa = Number(document.getElementById("1").value);

        numb = Number(document.getElementById("2").value);

        cc = document.getElementById("c").value;

        if(cc == "+"){

            sum = numa + numb;

        }else if(cc=="-"){

            sum = numa - numb;

        }else if(cc=="*"){

            sum = numa * numb;

        }else{

            sum = numa / numb;

        }

        document.getElementById("3").value= sum;

        //alert("计算结果："+sum);

        //document.write(sum);

    }

使用html+javascriptt实现的简易四则运算（初学JavaScript笔记）的更多相关文章

  1. 1st 结对编程：简易四则运算

    结对编程:简易四则运算 功能:进行简易的四则运算,并根据给出的结果判断正误. 实现:使用java的图形化界面实现. 导入包库 package six; import javax.swing.*; im ...

  2. 初学JavaScript七大注意事项

    知识说明: 初学JavaScript,注意以下七大细节,在实现同样功能的情况下,让我们的代码更易懂.效率更高. 一.简化代码 例如:创建对象 之前是这样的: Var car = new object( ...

  3. 任务02——安装 Intellj IDEA，编写一个简易四则运算小程序，并将代码提交到 GitHub

    github地址:https://github.com/ErhuoHome/First.git 安装jdk与intellij idea没有太大问题,以前安装过eclipse 在程序方面,由于对真分数的 ...

  4. 结对编程——paperOne基于java web的简易四则运算出题网站

    项目成员:张金生     张政 需求分析: 1.要进行四则运算: 2.运算题目随机: 3.进行对错判断: 4.整数运算. 程序概要: 1.用JSP实现: 2.用户可选择题目数量: 3.答题页用表格列出 ...

  5. paperOne基于java web的简易四则运算出题网站

    项目成员:张金生     张政 需求概要 1.运算数均为正整数 2.包含的运算符有+,-,*,/ 3.除法运算结果为整除运算 4.批量生成题目并判题 核心功能分析 1.题目生成——java后端 题目生 ...

  6. 简易四则运算生成程序——添加GUI支持

    项目成员:张金生     张政 工程地址: https://coding.net/u/jx8zjs/p/paperOne/git ssh://git@git.coding.net:jx8zjs/pap ...

  7. 初学Javascript，写一个简易的登陆框

    <!--下面是源代码--> <!DOCTYPE html> <html> <head> <meta charset = "utf-8&q ...

  8. 初学redux笔记，及一个最简单的redux实例

    categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...

  9. Code Kata:大整数比较大小&大整数四则运算---加减法 javascript实现

    大整数的四则运算已经是老生常谈的问题了.很多的库也已经包含了各种各样的解决方案. 作为练习,我们从最简单的加减法开始. 加减法的核心思路是用倒序数组来模拟一个大数,然后将两个大数的利用竖式进行运算. ...

随机推荐

  1. tyvj P4879骰子游戏-美国70分

    需要FFT优化... #include<iostream> #include<cstdio> #include<queue> #include<vector& ...

  2. Echarts的重点

    官网中,主要看文档的”教程“和”配置项手册“这两部分 1 下载 引入js 页面放一个容器,一定要设宽高 创建对象:var myChart = echarts.init(document.getElem ...

  3. JVM垃圾回收机制四

    GCRoots与可达性分析 Java中的四种引用 强引用.软引用.弱引用.虚引用.这四种引用的强度是逐渐减弱的,JVM垃圾回收的力度是逐渐增强的. 四种引用的作用 1.可以让程序员通过代码来控制对象的 ...

  4. 卡了很久的bug

    背景:在一个简单的项目中,通过循环前端传来的一个数组,使用mongodb条件查询数据,将满足条件的数据push进一个新数组,并返回至前端. 问题:每次调试到第五行,会自动跳过,直接执行12行,打印出来 ...

  5. qrcode length overflow (1632>1056)--qrcode.js使用过程中二维码长度溢出解决办法

    近日在开发过程中需要为页面动态生成一个二维码信息,由于这个二维码中包含了很多文字,字母以及符号,测试过程中发现有些二维码会报错,因为二维码内容太多了,没办法显示.后来在GitHub中找到了解决办法. ...

  6. 访问权限修饰符-static-final-this-super-匿名对象

    1.this关键字的作用     1)调用本类中的属性;     2)调用本类中的构造方法;且只能放首行,且必须留一个构造方法作为出口,即不能递归调用     3)表示当前对象; 2.匿名对象     ...

  7. Android开发学习——小细节注意

    Android中通过Intent调用其他应用的方法(转) Android中两种序列化方式的比较Serializable和Parcelable http://www.jcodecraeer.com/a/ ...

  8. IOS制作纯色背景

    // 生成纯色背景图- (UIImage *)createPureColorImageWithColor:(UIColor *)color alpha:(CGFloat)alpha size:(CGS ...

  9. 实现strcpy函数

    不使用库函数,实现strcpy函数: char *my_strcpy(char *t,char *s){ char *strDest=t; if(t==NULL && s==NULL) ...

  10. Android（java）学习笔记128：xml文件生成

    1.xml文件: 用元素描述数据,跨平台. 2.利用传统的方式创建xml文件,下面是一个案例: 设计思路:建立一个学生管理系统,创建xml文件保存学生信息: (1)首先是布局文件activity_ma ...