今天第一天学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. Enable-Migrations 迁移错误，提示找不到连接字符串

    把迁移项目设为启动项目即可,若是MVC Web项目可能就没有这个问题.

  2. Linux下软件安装的四种方式

    一.源码安装 步骤: 下载,解压源码(常见的源码打包格式:.tar.gz/.tar.bz2); 可以直接下载源码再上传至linux服务器,或者在联网状态下,直接通过wget等命令获取源码安装包;源码解 ...

  3. Ubuntu 12.04源

    deb http://ubuntu.uestc.edu.cn/ubuntu/ precise main restricted universe multiverse deb http://ubuntu ...

  4. 打开某exe提示"应用程序无法启动，因为应用程序的并行配置不正确……"的解决方案

    本人在新安装好了的windows server 2008 r2 (64位)上运行“RefilesName V2.0(文件批量改名).exe”,结果提示: 应用程序无法启动,因为应用程序的并行配置不正确 ...

  5. Problem T: 结构体--学生信息排序

    Problem T: 结构体--学生信息排序 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 2219  Solved: 1305[Submit][Sta ...

  6. WINDOWS-API：关于线程 GetCurrentThread、GetCurrentThreadId、GetCurrentProcess、GetCurrentProcessId

    {返回当前线程的虚拟句柄} GetCurrentThread: THandle; {返回当前线程 ID} GetCurrentThreadId: DWORD; {返回当前进程的虚拟句柄} GetCur ...

  7. C++容器类-list

    C++ 表(List容器类) 一.概念 头文件:#include <list> 又叫链表,是一种双线性链表,只能顺序访问(从前往后或从后往前) 他不支持随机访问. 二.方法 #includ ...

  8. js类型判别大合集

    1.typeof number,string,boolean,undefined,symbol,object,function 对象中除了函数为function,其他对象都判别为object, 缺陷: ...

  9. JavaScript -- 操作符和逻辑运算

    算数操作符 + : 加 - : 减 * : 乘 / : 除 %:取余 递增和递减 1.递增 ++a与a++都是对a进行递增的操作 区别 ++a先返回递增之后的a的值 a++先返回a的原值,再返回递增之 ...

  10. Makefile 编写实例

    make命令常用的三个选项: 1．-k:它的作用是让make命令在发现错误的时候仍然继续执行．我们可以利用这个选项在一次操作中发现未编译成功的源文件． 2．-n:它的作用是让make命令输出将要执行的 ...