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编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

随机推荐

oracle数据库应用总结
1------->>>>>>>>>>>>>>>>>>>>>>> ...
【原】iptables 交叉编译
防火墙在做数据包过滤决定时,有一套遵循和组成的规则,这些规则存储在专用的数据包过滤表中,而这些表集成在 Linux 内核中.在数据包过滤表中,规则被分组放在我们所谓的链(chain)中.而netfil ...
caffe py3 docker
https://hub.docker.com/r/mapler/caffe-py3/ docker pull mapler/caffe-py3 docker run -it mapler/caff ...
安装BCG界面库会导致vs2013qt库配置消失
安装BCG界面库会导致vs2013qt库配置消失安装BCG界面库会导致vs2013qt库配置消失安装BCG界面库会导致vs2013qt库配置消失
利用zookeeper部署kafka集群
1.准备工作: iptables -F #关闭防火墙 systemctl stop firewalld.service #关闭防火墙准备三台虚拟机并放入/etc/hosts下 192.16 ...
js前台页面显示中文，后台存对应的value值实现
field: 'rightType', title: '权益类型', //width: 100, align: 'left', valign: 'top', sortable: true, forma ...
HDU-2389-Rain on your Parade (最大匹配,kopcroft-karp)
链接: https://vjudge.net/problem/HDU-2389 题意: You're giving a party in the garden of your villa by the ...
python接口自动化七（重定向-禁止重定向Location）
前言某屌丝男A鼓起勇气向女神B打电话表白,女神B是个心机婊觉得屌丝男A是好人,不想直接拒绝于是设置呼叫转移给闺蜜C了,最终屌丝男A和女神闺蜜C表白成功了,这种场景其实就是重定向了. 一.重定向 1. ...
electron 系统托盘单击双击事件冲突解决方法
部分代码 // 任务栏点击事件 let timeCount = 0 tray.on('click', function (Event) { setTimeout(() => { if (time ...
12.24TG1
1,线段树中把pushup写出去是因为有点线段树维护的值比较多,写出去方便美观. 2,洛谷有的质量高有的质量不高,没办法.

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

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

随机推荐

热门专题

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

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