<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/html">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        function add(){

            var a=parseInt(document.getElementById("num1").value);/*获取a的值*/

            var b=parseInt(document.getElementById("num2").value);

            var c=parseInt(document.getElementById("num3").value=a+b);/*value=a+b 将a+b的值传给num3*/

           // alert(a+b);

        }

        function de(){

            var a=parseInt(document.getElementById("num1").value)/*获取a的值*/

            var b=parseInt(document.getElementById("num2").value);

            var c=parseInt(document.getElementById("num3").value=a-b);

           // alert(a-b);

        }

        function mul(){            /*放在方法里，点击才开始访问数据*/

            var a=parseInt(document.getElementById("num1").value);/*获取a的值*/

            var b=parseInt(document.getElementById("num2").value);

            var c=parseInt(document.getElementById("num3").value=a*b);

            //alert(a*b);

        }

        function chu(){

            var a=parseInt(document.getElementById("num1").value);/*获取a的值*/

            var b=parseInt(document.getElementById("num2").value);

            var c=parseInt(document.getElementById("num3").value=a/b);

           // alert(a/b);

        }

    </script>

</head>

<br>

    <label>简易计算器</label></br>

    <label>第一个数：</label><input type="=text" id="num1"></br>

    <label>第二个数：</label><input type="=text" id="num2"></br>

    <button onclick="add()">+</button>

    <button onclick="de()">-</button>

    <button onclick="mul()">*</button>

    <button onclick="chu()">/</button><br>

    <label>结果：</label><input type="text" id="num3">

</body>

</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function add(){
            var a=parseInt(document.getElementById("num1").value);/*获取a的值*/
var b=parseInt(document.getElementById("num2").value);
            var c=parseInt(document.getElementById("num3").value=a+b);/*value=a+b 将a+b的值传给num3*/
alert(a+b);
        }
        function de(){
            var a=parseInt(document.getElementById("num1").value)/*获取a的值*/
var b=parseInt(document.getElementById("num2").value);
            var c=parseInt(document.getElementById("num3").value=a-b);
            alert(a-b);
        }
        function mul(){            /*放在方法里，点击才开始访问数据*/
var a=parseInt(document.getElementById("num1").value);/*获取a的值*/
var b=parseInt(document.getElementById("num2").value);
            var c=parseInt(document.getElementById("num3").value=a*b);
            alert(a*b);
        }
        function chu(){
            var a=parseInt(document.getElementById("num1").value);/*获取a的值*/
var b=parseInt(document.getElementById("num2").value);
            var c=parseInt(document.getElementById("num3").value=a/b);
            alert(a/b);
        }
    </script>
</head>
<br>
    <label>简易计算器</label></br>
    <label>第一个数：</label><input type="=text" id="num1"></br>
    <label>第二个数：</label><input type="=text" id="num2"></br>
    <button onclick="add()">+</button>
    <button onclick="de()">-</button>
    <button onclick="mul()">*</button>
    <button onclick="chu()">/</button><br>
    <label>结果：</label><input type="text" id="num3">
</body>
</html>

JS编写简易计算器的更多相关文章

  1. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  2. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  3. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  4. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 用JS编写个人所得税计算器

    编写 “个人所得税计算器”函数 计算个税的方法: 3500 以下免征 3500 ~ 5000 部分 缴纳 3% 5000 ~ 9000 部分 缴纳 10% 9000 以上部分 缴纳 20% 代码如下: ...

  6. js之简易计算器

    <!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS实现简易计算器的7种方法

    先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

  8. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

  9. JS简易计算器的实现，以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. 【PyCharm编辑器】之引用selenium包提示错误：Unresolved reference 'selenium' less... (Ctrl+F1)

    一.现象还原: 当新建.py文件时,需要引用selenium中的方法时,报错,提示红波浪线: Unresolved reference 'selenium' less... (Ctrl+F1) Thi ...

  2. sqlite3常用操作命令 和mysql的区别及优缺点

    SQLite 的数据库权限只依赖于文件系统,没有用户帐户的概念. sqlite3 testdb.db .databases 命令查看数据库列表 create table tbl(name char(1 ...

  3. freopen - C/C++文件输入输出利器

    freopen以前经常使用,比较方便,可以当作模板,在中间替换为自己的代码即可使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #include <stdio.h&g ...

  4. IIS7.5 配置ASP+ACCESS使用环境(转)

    Win7默认不安装IIS7.5. 安装的步骤为:开始-控制面板-程序-打开或关闭Windows功能-Internet信息服务.IIS7.5安装时需要注意的是,如果需要ASP.ASP.NET等的支持,是 ...

  5. python 基础及资料汇总

    Python 包.模块.类以及代码文件和目录的一种管理方案     Numpy 小结   用 Python 3 的 async / await 做异步编程  K-means 在 Python 中的实现 ...

  6. gulp的使用方法

    ---恢复内容开始--- 什么是gulp? Gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. 使用步骤: 1.全局安装gulp:    npm install - ...

  7. Servlet单例模式（注意）

    package com.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax ...

  8. 我的Java开发学习之旅------>工具类：Java使用正则表达式分离出字符串中的中文和英文

    今天看到一个工具类使用正则表达式将一大段字符串中的中文和英文都分离出来了,在此记录一下,读者可以收藏! import java.util.ArrayList; import java.util.Col ...

  9. Windows 安装nginx

    http://nginx.org/en/docs/windows.html 在nginx.exe目录,打开命令行工具,用命令 启动/关闭/重启nginx    start nginx : 启动ngin ...

  10. 你不得不知的几款常用的在线API管理工具

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...