今天第一天学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. ruby 正则表达式 匹配所有符合规则的信息

    假设一个字符串当中有很多符合规则的信息,下面的例子可以把所有匹配到的结果打印出来: message="afhadhffkdf414j9tr3j43i3433094jwoert223jwew1 ...

  2. 客户端rsyslog配置文件详解

    客户端rsyslog配置文件详解 最近再开发一个rsyslog的接收服务端,支持udp,tcp和tls三种协议.所以去仔细研究了一下rsyslog.conf的配置文件,下面来详细说一下. 因为我这儿重 ...

  3. JSTORM中IRichBolt与IBasicBolt的区别

  4. gulp运行步骤

    一.运行→输入cmd→跳出命令窗口二.cd D: 敲回车进入D盘,cd www 进入项目路径 cd mygulp三.执行 cnpm install gulp --save-dev 命令 (初始化安装g ...

  5. Dictionary(支持 XML 序列化)，注意C#中原生的Dictionary类是无法进行Xml序列化的

    /// <summary> /// Dictionary(支持 XML 序列化) /// </summary> /// <typeparam name="TKe ...

  6. 系统有问题基本出在数据库上，web层无状态

    系统有问题基本出在数据库上,web层无状态.

  7. 重写strcpy函数，以实现strcpy的功能

    char * strcpyTest(char *dst,const char *src);Action(){ char *ptr=(char*)malloc(100); char a[]={" ...

  8. Autoit3 如何捕足控件

    以任务管理器为例,在命令行提示符下输入taskmgr.exe 接下来识别这个窗口上的控件 在AU3  中提供了一个捕捉控件的工具是Au3Info.exe 这里记录了控件的标题,控件的类型,控件的坐标和 ...

  9. [nmon]使用nmon工具监控系统资源

    1.下载nmon 下载正确的nmon版本, 查看linux服务器版本,命令:lsb_release -a,查看到当前系统为RedHat 6.4 然后我们根据我们的linux版本,下载相应nmon版本, ...

  10. Page_Load与sender -- PostBack是由哪个 ASP.NET控件引起 ?

    Page_Load与sender -- PostBack是由哪个 ASP.NET控件引起 ? 之前有讨论过ASP.NET Web Form "事件"里面的 "sender ...