html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>javascript任务2-简易计算器</title>

    <link rel="stylesheet" href="style/demo.css">

</head>

<body>

    <div class="counter">

        <table width="100%" border="1">

            <tr>

                <td>

                    <input type="button" value="c" class="cancle" onclick="clearNote()">

                </td>

                <td colspan="3" align="right" class="screen">

                <!-- 计算器运算过程显示位置 -->

                    <div id="process"></div>

                    <!-- 计算器显示屏，显示结果和用户输入 -->

                    <input type="text" readonly="readonly" value="0" id="note">

                </td>

            </tr>

            <tr>

                <td>

                    <!-- 数字7 -->

                    <input type="button" value="7" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 数字8 -->

                    <input type="button" value="8" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 数字9 -->

                    <input type="button" value="9" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 除 -->

                    <input type="button" value="÷" onclick="operationShow(this)">

                </td>

            </tr>

            <tr>

                <td>

                    <!-- 数字4 -->

                    <input type="button" value="4" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 数字5 -->

                    <input type="button" value="5" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 数字6 -->

                    <input type="button" value="6" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 乘 -->

                    <input type="button" value="x" onclick="operationShow(this)">

                </td>

            </tr>

            <tr>

                <td>

                    <!-- 数字1 -->

                    <input type="button" value="1" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 数字2 -->

                    <input type="button" value="2" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 数字3 -->

                    <input type="button" value="3" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 加 -->

                    <input type="button" value="+" onclick="operationShow(this)">

                </td>

            </tr>

            <tr>

                <td>

                    <!-- 数字0 -->

                    <input type="button" value="0" onclick="countSHow(this)">

                </td>

                <td>

                    <!-- 小数点 -->

                    <input type="button" value="." onclick="dot()">

                </td>

                <td>

                    <!-- 等于 -->

                    <input type="button" value="=" onclick="result()">

                </td>

                <td>

                    <!-- 减 -->

                    <input type="button" value="-" onclick="operationShow(this)">

                </td>

            </tr>

        </table>

    </div>

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

</body>

</html>

javascript

/*

简易计算器：

可运算加、减、乘、除

*/

num1 = 0; //保存第一值

num2 = 0; //保存第二值

op = ""; //保存运算符

opresult = 0; //保存结果，用于连续计算

opScreen = document.getElementById("note");

/*

思路：第一次点击运算符时，记录第一值和运算符，按等号记录第二值并计算

*/

/*按数字的屏幕显示控制：如果屏幕显示是0，按n替换为n，显示不为0则追加字符 */

function countSHow(n) {

    if (opScreen.value == "0" || opScreen.value == num1 || opScreen.value == "除数不为0") {

        opScreen.value = n.value;

    } else {

        opScreen.value += n.value;

    };

}

/*按点时的屏幕显示控制：已存在'.'，则不加'.'，否则追加'.'*/

function dot() {

    var screenText = opScreen.value;

    if (screenText.indexOf(".") < 0) {

        opScreen.value += ".";

    }

}

//一按运算符，计算器顶部显示运算过程，并更新num1和运算符

function operationShow(o) {

    num1 = opScreen.value;

    op = o.value;

    document.getElementById("process").innerHTML = num1 + op;

}

/*等于，计算并在显示屏输出结果*/

function result() {

    num2 = opScreen.value;

    switch (op) {

        case "÷":

            opresult = divide(num1, num2);

            break;

        case "x":

            opresult = times(num1, num2);

            break;

        case "+":

            opresult = plus(num1, num2);

            break;

        case "-":

            opresult = minus(num1, num2);

            break;

    }

    opScreen.value = opresult;

}

/*加*/

function plus(x, y) {

    return parseFloat(x) + parseFloat(y);

}

/*减*/

function minus(x, y) {

    return x - y;

}

/*乘*/

function times(x, y) {

    return x * y;

}

/*除*/

function divide(x, y) {

    if (y == "0") {

        return "除数不为0";

    } else {

        return x / y;

    }

}

/*重置*/

function clearNote() {

    opScreen.value = "0";

    document.getElementById("process").innerHTML = "";

    num1 = 0;

    num2 = 0;

    op = "";

    opresult = 0;

}

style

.counter {

    width: 300px;

    margin: 100px auto;

    background: #9DD2E8;

    padding: 5px;

}

.counter table,

.counter td {

    border: none;

}

.counter td {

    width: 20%;

}

.counter input[type="button"] {

    width: 100%;

    height: 50px;

    font-size: 28px;

    font-weight:;

    cursor: pointer;

    padding:;

}

.cancle {

    background: #FCA0A8;

}

#process {

    height: 20px;

}

.screen {

    background: #79A6B9;

    color: #fff;

    padding-right: 10px;

}

.screen input {

    background: #79A6B9;

    border: none;

    text-align: right;

    color: #fff;

    font-size: 20px;

    width: 100%;

}

自己做的javascript简易计算器的更多相关文章

  1. JavaScript简易计算器

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  2. JavaScript之简易计算器

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  3. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  4. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  5. 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

    之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...

  6. JavaScript简易教程（转）

    原文:http://www.cnblogs.com/yanhaijing/p/3685304.html 这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScri ...

  7. Python之实现一个简易计算器

    自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...

  8. 使用HTML+CSS，jQuery编写的简易计算器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. C#Windows Form简易计算器实现（中）

    昨天花了一天的时间弄计算器.也算是做出来了,还是简易的(怀疑猿生!!).在此先感谢昨天被我骚扰的朋友. 先贴一张界面看看 其实健壮性还是挺差的,用户体验也是极差的.比如说用户输入了不合理运算式子,我就 ...

随机推荐

  1. loj6043 「雅礼集训 2017 Day7」蛐蛐国的修墙方案

    传送门:https://loj.ac/problem/6043 [题解] 我们考虑这是个置换,所以一定形成了很多不相交的环. 对于每个环,我们只能选一段.不选.选一段.不选这样交替下去. 显然只有偶环 ...

  2. Linux 工作站安全加固规范

    目标受众 这是一套 Linux 基金会为其系统管理员提供的推荐规范. 这个文档用于帮助那些使用 Linux 工作站来访问和管理项目的 IT 设施的系统管理员团队. 如果你的系统管理员是远程员工,你也许 ...

  3. TCP三次握手四次分手

    TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...

  4. python几个重要的函数（lambda，filter，reduce，map，zip）

    一.匿名函数lambda lambda argument1,argument2,...argumentN :expression using arguments 1.lambda是一个表达式,而不是一 ...

  5. HDU-3374

    String Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. MySQL 的七种 join

    建表 在这里呢我们先来建立两张有外键关联的张表. CREATE DATABASE db0206; USE db0206; CREATE TABLE `db0206`.`tbl_dept`( `id` ...

  7. window下golang包管理glide使用说明

    golang是一门简洁高效的开发 语言,但是包管理一直是一个痛点,如图 : 很多开源项目特别是github.com中的大量应用golang.org和google.golang.org中的源码,且由于被 ...

  8. maven基本知识

    maven的文件夹: projectName src -main -java -package -test -java     -package  -resource maven的命令: mvn - ...

  9. Python 进阶 之 socket模块

    Python Socket 编程详细介绍 转载地址:https://gist.github.com/kevinkindom/108ffd675cb9253f8f71?signup=true Pytho ...

  10. Mysql中大表添加索引的办法

    Hash索引与 Btree索引的区别http://database.51cto.com/art/201010/229525.htm Creating Indexes/Sorting on very l ...