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

随机推荐

C语言——枚举类型用法
1.枚举的定义 enum 枚举名{ 枚举元素1,枚举元素2,枚举元素3...}: 2.使用枚举类型的好处增加程序的可读性,我们都知道在计算机中所有信息都是用二进制来表示的,如果你用二进制来表示某件 ...
Codeforces 975 前缀和二分算存活人数思维离直线速度相同判平行
A /* Huyyt */ #include <bits/stdc++.h> using namespace std; typedef long long ll; ]; ]; map< ...
netlink对中断的支持
http://blog.chinaunix.net/uid-24227137-id-3025783.html https://blog.csdn.net/tycoon1988/article/deta ...
关于sharekey 与Open system+wep
Open_system+wep与open_system的区别在于: 对于开放系统认证,在设置时启用WEP,此时,WEP用于在传输数据时加密,对于认证没有任何作用. 抓包open_system+wep: ...
洛谷P1412 经营与开发题解
题目链接QWQ这里就不阐述了: 题解部分: 从题面上来看,这是个dp(递推)的题目. 但是dp要满足无后效性,但这个题为了取最值,得考虑从当前开始一直持续到结束的p的影响. 这让我们怎么满足无后效性? ...
Java并发编程实战第8章线程池的使用
合理的控制线程池的大小: 下面内容来自网络.不过跟作者说的一致.不想自己敲了.留个记录. 要想合理的配置线程池的大小,首先得分析任务的特性,可以从以下几个角度分析: 任务的性质:CPU密集型任务.IO ...
为什么“或命题"真假的判断是有真则真？
我:为什么"或命题"真假的判断是有真则真? 长沙刘老师:难道不是吗? 我:是经验,约定,还是严格证明? L神:为什么不自己看书? 我:想严格推理证明 L神: L神:我学过的教材里是 ...
tensorflow 中 name_scope和variable_scope
import tensorflow as tf with tf.name_scope("hello") as name_scope: arr1 = tf.get_variable( ...
[luogu]P1800 software_NOI导刊2010提高（06）[DP][二分答案]
[luogu]P1800 software_NOI导刊2010提高(06) 题目描述一个软件开发公司同时要开发两个软件,并且要同时交付给用户,现在公司为了尽快完成这一任务,将每个软件划分成m个模块, ...
Python3学习笔记（四）：序列
一.序列概览 Python 包含6 种内建的序列:列表,元组,字符串,Unicode字符串,buffer对象和xrange对象.这里重点讨论最常用的两种类型:列表和元组. 列表与元组的主要区别在于: ...

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

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

随机推荐

热门专题

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

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