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. JavaWeb中session创建与销毁的问题

    今天遇到一个奇怪的问题,自己添加了一个session的监听,用来监听在线的人数.但打开浏览器时一直没有走进这个监听中来.最后百度找到了原因: 我们一直存在一个误区,javaweb中的session什么 ...

  2. Chocolatey 使用

    最近空了下来不干点什么就感觉脑袋热,可是出过的问题挖过的坑还是要自己去解决. 一直网络不好安装choco一直都是报错,今天又建立了chocolatey 在windows上来用,网络问题解决了,类似于m ...

  3. 【洛谷 P1437】 [HNOI2004]敲砖块 （DP）

    题目链接 毒瘤DP题 因为\((i,j)\)能不能敲取决于\((i-1,j)\)和\((i-1,j+1)\),所以一行一行地转移显然是有后效性的. 于是考虑从列入手.我们把这个三角形"左对齐 ...

  4. [bzoj3884]上帝与集合的正确用法——欧拉函数

    题目大意 题解 出题人博客 代码 #include <bits/stdc++.h> using namespace std; const int M = 10001000; int phi ...

  5. [bzoj1015][JSOI2008]星球大战——并查集+离线处理

    题解 给定一张图,支持删点和询问连通块个数 按操作顺序处理的话要在删除点的同时维护图的形态(即图具体的连边情况),这是几乎不可做的 我们发现,这道题可以先读入操作,把没删的点的边先连上,然后再倒序处理 ...

  6. 【跑马灯】纯css3跑马灯demo

    我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一 ...

  7. swift c++ oc 混编

    http://www.tuicool.com/articles/QZNrErM iOS 里面 Swift与Objective-C混编,Swift与C++混编的一些比较 时间 2015-03-23 23 ...

  8. SSH的简单入门体验（Struts2.1+Spring3.1+Hibernate4.1）- 查询系统（上）

    所谓SSH,指的是struts+spring+hibernate的一个集成框架,它是目前较流行的一种Web应用程序的开源框架. 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域 ...

  9. Selenium2+python自动化-gird分布式（转载）

    本篇转自博客:上海-小T 原文地址:http://blog.csdn.net/real_tino/article/details/53467406 Selenium grid是用来分布式执行测试用例脚 ...

  10. 怎么将string list 转成有特殊字符分开字符串

    https://stackoverflow.com/questions/4021851/join-string-list-elements-with-a-delimiter-in-one-step Y ...