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. 【Codeforces】849D. Rooter's Song

    [算法]模拟 [题意]http://codeforces.com/contest/849/problem/D 给定n个点从x轴或y轴的位置p时间t出发,相遇后按对方路径走,问每个数字撞到墙的位置.(还 ...

  2. SQLAlchemy中filter()和filter_by()有什么区别

    from:https://segmentfault.com/q/1010000000140472 filter: apply the given filtering criterion to a co ...

  3. Django基础之模板

    Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }} 和 {% %} 变量相关的用{{ }},逻辑相关的用{% %}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成 ...

  4. hdu 1507(二分图匹配)

    Uncle Tom's Inherited Land* Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  5. AC日记——[JSOI2008]火星人prefix bzoj 1014

    1014 思路: 平衡树+二分答案+hash: 好了懂了吧. 代码: #include <cstdio> #include <cstring> #include <ios ...

  6. Visual Studio Code更改语言

    参数地址:Visual Studio Code 设置Display Language介绍 在Visual Studio Code中使用快捷键Ctrl + Shift + P可以打开命令行 在local ...

  7. python 文件路径操作方法(转)

    Python编程语言在实际使用中可以帮助我们轻松的实现一些特殊的功能需求.在这里我们将会为大家详细介绍一下有关Python文件路径的相关操作技巧,从而方便我们在实际开发中获得一些帮助. Python文 ...

  8. HDU 1039.Easier Done Than Said?-条件判断字符串

    Easier Done Than Said? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  9. Codeforces 810 B. Summer sell-off

    B. Summer sell-off   time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. css-demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...