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. html初探

    HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...

  2. 汕头市队赛 SRM16 T2

    描述 猫和老鼠,看过吧?猫来了,老鼠要躲进洞里.在一条数轴上,一共有n个洞,位置分别在xi,能容纳vi只老鼠.一共有m只老鼠位置分别在Xi,要躲进洞里,问所有老鼠跑进洞里的距离总和最小是多少. 输入格 ...

  3. [bzoj1717][Usaco2006 Dec]Milk Patterns 产奶的模式——后缀数组

    Brief Description 给定一个字符串,求至少出现k次的最长重复子串. Algorithm Design 先二分答案,然后将后缀分成若干组.判断有没有一个组的后缀个数不小于k.如果有,那么 ...

  4. web前端 CSS基础

    简单的CSS文件 <style type="text/css"> a{ color:rebeccapurple; font-size: larger; font-wei ...

  5. 中断处理函数中不用disable_irq而用disable_irq_nosync原因【转】

    转自:http://blog.csdn.net/beyondioi/article/details/9201695 今天在写触摸屏驱动时在中断处理函数中使用disable_irq关中断发现在进入中断处 ...

  6. 别再滥用scrapy CrawlSpider中的follow=True

    对于刚接触scrapy的同学来说, crawlspider中的rule是比较难理解的, 很可能驾驭不住. 而且笔者在YouTube中看到许多公开的演讲都都错用了follow这一选项, 所以今天就来仔细 ...

  7. 远程编写+调试服务器上的Python程序

    原帖参见(需自备梯子):https://webcache.googleusercontent.com/search?q=cache:1htdR2EXj5wJ:https://www.digitaloc ...

  8. 1.docker镜像

    1.docker的安装 安装 wget -qO- https://get.docker.com/ | sh 启动docker后台服务 sudo service docker start 测试运行hel ...

  9. Solidity 文档--目录

    Solidity是一种语法类似JavaScript的高级语言.它被设计成以编译的方式生成以太坊虚拟机代码.在后续内容中你将会发现,使用它很容易创建用于投票.众筹.封闭拍卖.多重签名钱包等等的合约. 注 ...

  10. Java多态机制和继承中重写重载

    关于Java中多态机制 http://www.cnblogs.com/chenssy/p/3372798.html 这篇博文讲的很透彻 大体意思是 多态定义: 多态就是指程序中定义的引用变量所指向的具 ...