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

随机推荐

CentOS7+ 普通用户使用密钥登陆服务器（同时禁用root登陆）
创建普通用户: # useradd user01 # tail -n2 /etc/passwd chrony:x:998:996::/var/lib/chrony:/sbin/nologin user ...
(转) ESB 企业服务总线基本内容概述
ESB全称为Enterprise Service Bus,即企业服务总线. 它是传统中间件技术与XML.Web服务等技术结合的产物(SOAP协议= HTTP协议+ XML数据格式). ESB提供了网络 ...
Codeforces 980 并查集/模拟贪心最小字典序找规律/数去除完全平方因子逆思维倍增预处理祖先标记点
A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...
Codeforces 902 树同型构造多项式长除法构造(辗转相除法)
A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...
Markdown小结
Markdown标题以# (#号加空格)开头的行会被视为标题,根据#的数量分为一到六级标题 # 一级标题 ## 二级标题 … ###### 六级标题 Markdown 水平线一行由三个以上连续的减 ...
美国的电信巨头T-Mobile今天披露了另一起数据遭黑客泄露事件
您是T-Mobile预付费客户吗?如果是,您应该立即创建或更新您关联的帐户PIN /密码,以提供额外的保护.总部位于美国的电信巨头T-Mobile今天披露了另一起数据泄露事件,该事件最近暴露了一些使用 ...
上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒.) 七牛云官方文档如下 https://developer.qiniu.com/kodo/k ...
mysql分批导出数据和分批导入数据库
mysql分批导出数据和分批导入数据库由于某些原因,比如说测试环境有很多库,需要迁移到新的环境中,不需要导出系统库的数据.而数据库又有好多,如何才能将每个库导出到独立的文件中呢?导入到一个文件的话, ...
Linux基本命令+Makefile
1.linux下查看进程占用cpu的情况(top): 格式 top [-] [d delay] [q] [c] [S] [s] [i] [n] 主要参数 d:指定更新的间隔,以秒计算. q:没有任何延 ...
xgboost调参过程
from http://blog.csdn.net/han_xiaoyang/article/details/52665396

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

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

随机推荐

热门专题

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

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