JavaScript —— 实现简单计算器【带有开/关机清零退格功能】

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="keywords" content="Calculator">

    <meta name="description" content="Calculator">

    <meta name="author" content="LIEGE">

    <title>Calculator</title>

<style>

* {

    border: none;

    margin: 0;

    padding: 0;

}

body {

}

.center {

    background-color: #fff;

    border-radius: 50%;

    height: 800px;

    margin: auto;

    width: 800px;

}

h1 {

    color: #495678

    font-size: 30px;

    margin-top: 20px;

    padding-top: 50px;

    display: block;

    text-align: center;

    text-decoration: none;

}

form {

    background-color: #495678;

    box-shadow: 10px 10px #3d4a65;

    margin: 40px auto;

    padding: 40px 0px 30px 30px;

    width: 200px;

}

.btn {

    outline: none;

    font-size: 20px;

    height: 45px;

    margin: 5px 0 5px 10px;

    width: 45px;

}

.btn:first-child {

    margin: 5px 0 5px 10px;

}

#display {

    outline: none;

    background-color: white;

    color: black;

    font-size: 20px;

    height: 47px;

    text-align: right;

    width: 165px;

    padding-right: 10px;

    margin-left: 0px;

}

.btn, #display, form {

    border-radius: 25px;

}

.number {

    background-color: #72778b;

    box-shadow: 0 5px #5f6680;

    color: #dededc;

}

.number:active {

    box-shadow: 0 2px #5f6680;

      -webkit-transform: translateY(2px);

      -ms-transform: translateY(2px);

      -moz-tranform: translateY(2px);

      transform: translateY(2px);

}

.number:hover {

    background-color: rgb(114,119,139,0.4);

    box-shadow: 0 5px #5f6680;

    color: #dededc;

}

.operator {

    background-color: #dededc;

    color: #72778b;

}

.operator:hover {

    background-color:rgb(222,222,220,0.6);

    color: #72778b;

}

.other {

    background-color:rgb(255,0,0,0.7);

    color:#dededc ;

}

.other:hover {

    background-color:rgb(255,0,0,0.4);

    color:#dededc ;

}

.button_clear{

    outline: none;

    border-radius: 25px;

    background-color:#FF4500;

    color:#FFFF00;

    font-size:16px;

    font-style:strong;

    width:40px;

    height:28px;

}

.button_clear:active {

  background-color: red;

  box-shadow: 0 5px #666;

  transform: translateY(2px);

}

.off_on{

    outline: none;

    border-radius: 25px;

    background-color:#FF4500;

    color:#FFFF00;

    font-size:16px;

    font-style:strong;

    width:40px;

    height:28px;

}

.off_on:active{

    background-color: red;

    box-shadow: 0 5px #666;

    transform: translateY(2px);

}

.tishi{

    font-size:10px;

    text-decoration:none;

}

</style>

<script>

var power = 1;

// 1 是开机   -1是关机

function off(){//一开始就运行---》 关机

    power = -power;

    if(power == -1){

        document.getElementById("display").value = "";

    }else{

        welcome();

    }

};

function clearout(){

    if(power == -1){

            document.getElementById("display").value = "";

        }else{

            document.getElementById("display").value = "";

            document.getElementById("display").focus();

        }

};

function welcome(){

    document.getElementById("display").value = "Welcome ☺";

    setTimeout(welcome_end, 2000);

};

function welcome_end(){

    document.getElementById("display").value = "";

    document.getElementById("display").focus();

};

function get(value) {

    if(power == 1){

        document.getElementById("display").value += value;

    }else{

        document.getElementById("display").value = "";

    }

} ;

function back(){

    if(power == 1){

        var now_result = document.getElementById("display"); //*****************************

        document.getElementById("display").value = now_result.value.substring(0, now_result.value.length - 1);

    }else{

        document.getElementById("display").value = "";

    }

};

function calculates() {

    if(power == 1){

        var result = 0;

        result = document.getElementById("display").value;

        document.getElementById("display").value = "";

        document.getElementById("display").value = eval(result);

    }else{

        document.getElementById("display").value = "";

    }

};

function tishi(){

confirm("按钮 C 清零  \n按钮 OFF 开/关机\n按钮 B 退格");

};

</script>

</head>

<body  link="grey" vlink="grey" alink="grey" Onload="off()">

    <div class="center">

        <h1 >Unbrealla™ Calculator <a href="#" onclick="tishi()" class="tishi">HELP</a></h1>

        <form name="calculator">

            <input type="text" id="display" width="300px" value="">

                <br>

                    <br><input type="button" class="button_clear" value="C" onclick="clearout();">

                        <input type="button" class="off_on" value="OFF" onclick="off();">

                        <input type="button" class="off_on" value="B" onclick="back();">

                <br>

            <input type="button" class="btn number" value="1" onclick="get(this.value);">

            <input type="button" class="btn number" value="2" onclick="get(this.value);">

            <input type="button" class="btn number" value="3" onclick="get(this.value);">

            <br />

            <input type="button" class="btn number" value="4" onclick="get(this.value);">

            <input type="button" class="btn number" value="5" onclick="get(this.value);">

            <input type="button" class="btn number" value="6" onclick="get(this.value);">

            <br />

            <input type="button" class="btn number" value="7" onclick="get(this.value);">

            <input type="button" class="btn number" value="8" onclick="get(this.value);">

            <input type="button" class="btn number" value="9" onclick="get(this.value);">

            <br />

            <input type="button" class="btn number" value="0" onclick="get(this.value);">

            <input type="button" class="btn operator" value="-" onclick="get(this.value);">

            <input type="button" class="btn operator" value="+" onclick="get(this.value);">

            <br />

            <input type="button" class="btn operator" value="*" onclick="get(this.value);">

            <input type="button" class="btn operator" value="/" onclick="get(this.value);">

            <input type="button" class="btn other" value="=" onclick="calculates();">

        </form>

    </div>

</body>

</html>

JavaScript —— 实现简单计算器【带有开/关机清零退格功能】的更多相关文章

JAVASCRIPT实现简单计算器
最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...
学习笔记之javascript编写简单计算器
感觉自己的的实力真的是有待提高,在编写计算器的过程中,出现了各种各样的问题,暴露了自己的基础不扎实,逻辑思维能力不够,学得知识不能运用到自己的demo中区.先介绍一些这个这个计算器的整体思路.大致 ...
用javascript编写的简单计算器
老师布置的任务,弄了一天,总算把代码搞出来了,作为菜鸟给自己一点小掌声,传说中JS是很简单的,但是要写出一个程序真的很需要锻炼,我的锻炼实在是太少了,天天DOTA中.呵呵(做了些小注释)大家应该能看懂 ...
javascript简单计算器实践
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...
JavaScript+HTML,简单的计算器实现
成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...
用JavaScript制作简单的计算器
<html > <head> <title>简单计算器</title> <style type="text/css"> ...
Linux——系统开关机指令简单学习笔记
关机: 命令名称:shutdown 命令所在路径:/usr/sbin/shutdown 执行权限:root 语法:shutdown 功能描述:关机范例:# shutdown -h now 重启: 命 ...
利用css和javascript实现简单的计算器
<!doctype html> <html> <head>  <meta http-equiv="Co ...
菜鸟学Android编程——简单计算器《一》
菜鸟瞎搞,高手莫进本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

随机推荐

PAT Advanced 1050 String Subtraction (20 分)
Given two strings S1 and S2, S=S1−S2 is defined to be the remaining string after taking ...
Jsoup抓取网页数据完成一个简易的Android新闻APP
前言:作为一个篮球迷,每天必刷NBA新闻.用了那么多新闻APP,就想自己能不能也做个简易的新闻APP.于是便使用Jsoup抓取了虎扑NBA新闻的数据,完成了一个简易的新闻APP.虽然没什么技术含量,但 ...
CentOS 7安装MySQL 8——萌新超详细教程
1.配置MySQL 8.0的安装源: sudo rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-1.n ...
AI应该享有与动物一样的权利吗？
全世界的大学都在进行人工智能(AI)的重大研究,艾伦研究所(Allen Institute)等组织以及Google和Facebook等高科技公司.可能的结果是,我们很快将拥有与小鼠或狗一样高的认知能力 ...
CF1263F
题目描述给出一个类似这样的图,求删掉最多的黑边使得每个特殊点和至少一个节点1连通保证上下两棵树都存在一种dfs序使得访问特殊点的顺序为1~n 题解设f[i][j]表示上面的树最后一个特殊点为i ...
windows如何禁用惹人烦的开机启动广告
本地组策略编辑器建立新的路径规则重启电脑本地组策略编辑器你现在还在为那些烦人的互联网开机广告而发愁嘛,比如一下几种广告:这样的还是这样的: 又或者是这样的: 修改了dns也并没有什么卵用,所 ...
C#之扩展方法 default(T)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
JPA学习（四、JPA_映射关联关系）
框架学习之JPA(四) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...
D2. Equalizing by Division (hard version)
D2. Equalizing by Division (hard version) 涉及下标运算一定要注意下标是否越界!!! 思路,暴力判断以每个数字为到达态最小花费 #include<bits ...
navicat_premium_x64最新版安装说明
先到官网下载最新的navicat http://www.navicat.com.cn/ 下载破解文件链接: https://pan.baidu.com/s/1hhsh5Tfe4c_lQeyX8D-C ...

JavaScript —— 实现简单计算器【带有 开/关机 清零 退格 功能】

JavaScript —— 实现简单计算器【带有 开/关机 清零 退格 功能】的更多相关文章

随机推荐

热门专题

JavaScript —— 实现简单计算器【带有开/关机清零退格功能】

JavaScript —— 实现简单计算器【带有开/关机清零退格功能】的更多相关文章