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. BZOJ 1598 牛跑步

    牛跑步 [问题描述] BESSIE准备用从牛棚跑到池塘的方法来锻炼. 但是因为她懒,她只准备沿着下坡的路跑到池塘, 然后走回牛棚. BESSIE也不想跑得太远,所以她想走最短的路经. 农场上一共有M ...

  2. 01-UIDynamic简单演练demo源代码

    源代码下载: 01-简单演练.zip72.0 KB // //  ViewController.m //  01.简单演练 // //  Created by apple on 13-12-24. / ...

  3. TensorFlow_曲线拟合

    # coding:utf-8 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt import os ...

  4. linux system函数分析

    system函数是在应用编程里面想调用外部命令时最方便的方式了,除非想要获取命令行执行的输出信息, 那system就不行了,需要用popen.但是system内部具体怎么实现及怎么处理它的返回值经常被 ...

  5. react native windows 搭建（完整版）

    声明:用windows 搭建的react native只能开发安卓应用 1.准备安装java jdk,以及Android SDK 传送门: java   JDK   Android SDK(自行寻找) ...

  6. windows使用celery遇到的错误

    https://www.jianshu.com/p/e5539d96641c 按照这个教程一步步执行到最后报错了. 运行task_dispatcher.py的时候 ValueError: not en ...

  7. TCP的三次握手和四次挥手+TCP和UDP的区别

    TCP的三次握手: LISTEN:表示服务器端的某个socket处于监听状态,可以接收连接了. SYN_SENT:当客户端SOCKET执行connect连接时,它首先发送syn报文,随即会进入到此状态 ...

  8. 带你入门代理模式/SpringAop的运行机制

    SpringAop 是spring框架中最重要的一项功能之一,同时也是企业级开发记录事物日志等不可或缺的一部分,如果说你的系统需要记录用户访问接口的操作,那SpringAop是很完美的了,当然,拦截器 ...

  9. SVN被锁定解决办法

    转自:https://blog.csdn.net/strwangfan/article/details/78748393: 今天用SVN的时候出现被锁定的情况,既不能更新代码也不能提交. 解决方法如下 ...

  10. sudo cd为什么不能够执行

    问题描述 我想要cd到/etc/docker,但是它给我一个权限不够的错误,然后,我想到使用sudo cd /etc/docker时,它告诉我sudo: cd:找不到命令. 于是,郁闷的我就去上网找了 ...