今天第一天学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. 宝塔面板安装的mysql5.5用命令行kill -9后启动不了

    1.查看mysql版本方法一:status;方法二:select version(); 2.Mysql启动.停止.重启常用命令a.启动方式1.使用 service 启动:[root@localhost ...

  2. java命令--jstack 工具

    一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...

  3. Java ActiveMQ 示例

    所需引入Jar包: jms-1.1.jar activemq-all-5.15.0.jar 生产者 package com.mousewheel.demo; import javax.jms.Conn ...

  4. Unity3d发布apk文件并在Android虚拟机中运行的操作流程

    总的流程分为以下6个步骤: 1.安装java_jdk 2.配置java环境变量 3.更新android的sdk 4.从Unity3d中发布出apk文件 5.创建android虚拟机并运行 6.将apk ...

  5. springboot使用过滤器和拦截器

    1.Filter过滤器 @Componentpublic class AuthFilter implements Filter { private static final Log log = Log ...

  6. 关于dataTable 生成JSON 树

    背景: POSTGRESL + C#  + DHTMLX SUIT 一个表生成一个JSON串,这个不是很麻烦: 1.在数据库(postges)中:  json_agg(row_to_json(t)) ...

  7. zTree使用随笔

    最近开发过程中,需要写一个公司人员组织架构的树状图,后来选用了依赖jQuery的zTree插件来实现,主要是该插件功能齐全,性能稳定,个性化编辑方便,遂选用了这个插件.我记录了一下根据自身需求定制化修 ...

  8. python3操作mysql数据库表01（封装查询单条、多条数据）

    #!/usr/bin/env python# -*- coding:UTF-8 -*- import pymysql# import os'''封装查询单条.多条数据'''# os.environ[' ...

  9. UWP开发：自动生成迷宫&自动寻路算法（1）

    (1)前端篇 首先,我们创建一个新的Universal Windows Platform程序.这些小方块是通过GridView来罗列的,这样可以避免MainPaga.xaml的<Rectangl ...

  10. SAP GUI里Screen Painter的工作原理

    我们在SAP GUI里双击一个screen编号: 单击Layout按钮可以打开Screen Painter: 这背后的工作原理是什么? 是这个RFC destination在起作用: Connecti ...