HTML CSS JavaScript计算器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36919342/article/details/80057838

HTML、CSS、JavaScript实现计算器

一、基本效果展示

计算器Demo

二、基本框架确定

整个页面由一个表单组成，分为三类输入框，一类输入框type为“button”类型，表示输入数字或者是运算符；一类输入框type为“text”类型，用于显示数字以及运算结果，最后一类输入框type为“button”类型，表示特殊功能即清零与“=”。

代码实现：

<body>
<!--
    分为两类，一类是数字btn number，一类是运算符btn operator，一类是显示框 display
-->
<div class="center">
        <h1>HTML CSS, JavaScript 计算器</h1>
        <a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a>
        <form name="calculator">
            <input type="button" id="clear" class="btn other" value="C" onclick="clear2();">
            <input type="text" id="display">
                <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);">
            <input type="button" class="btn operator" value="+" 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);">
            <input type="button" class="btn operator" value="*" onclick="get(this.value);">
                <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);">
            <input type="button" class="btn operator" value="-" 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);">         
            <input type="button" class="btn other" value="=" onclick="getres();">
        </form>
    </div>
</body>

三、基本功能实现

设定全局变量Value，用于储存输入数字以及运算符
get(value)函数，即得到相应的值并显示在文本框中(每得到相应的值就加到全局变量中，形成一个字符型等式)
getres()函数，函数使用eval(Value)计算结果，注意，在getres()函数中，分为两步，第一步为清楚原始文本框的内容，第二步为将计算结果显示到文本框
clear2()函数,完成清零功能，即清空文本框中内容，清空全局变量内容
代码实现：

    <script type="text/javascript">
            var value1="";
            function get(value){
                value1+=value;
                document.getElementById("display").value +=value;
            }
            function getres(){
                document.getElementById("display").value = "";
                document.getElementById("display").value +=eval(value1);
            }
            function clear2(){
                document.getElementById("display").value = "";
                value1=""; 
        }
    </script>

PS:关于eval()

定义和用法: eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法: eval(string) 参数描述 string 必需。要计算的字符串，其中含有要计算的 JavaScript表达式或要执行的语句。
返回值 :通过计算 string 得到的值（如果有的话）。
说明 :该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval()函数传递 String 对象来作为参数。如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。

抛出 :如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。如果非法调用 eval()，则抛出 EvalError 异常。如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。

四、总体代码实现（包括css样式）

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <style type="text/css">
    * {
    border: none;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}
body {

}
.center {
    background-color: #fff;
    border-radius: 50%;
    height: 600px;
    margin: auto;
    width: 600px;
}
h1 {
    color: #495678;
    font-size: 30px;    
    margin-top: 20px;
    padding-top: 50px;
    display: block;
    text-align: center;
    text-decoration: none;
}
a {
    color: #495678;
    font-size: 30px;    
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 20px;
}
form {
    background-color: #495678;
    box-shadow: 4px 4px #3d4a65;
    margin: 40px auto;
    padding: 40px 0 30px 40px;  
    width: 280px;
}
.btn {
    outline: none;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    margin: 5px 0 5px 10px;
    width: 45px;
}
.btn:first-child {
    margin: 5px 0 5px 10px;
}
.btn, #display, form {
    border-radius: 25px;
}
#display {
    outline: none;
    background-color: #98d1dc;
    box-shadow: inset 6px 6px 0px #3facc0;
    color: #dededc;
    font-size: 20px;
    height: 47px;
    text-align: right;
    width: 165px;
    padding-right: 10px;
    margin-left: 10px;
}
.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);
}
.operator {
    background-color: #dededc;
    box-shadow: 0 5px #bebebe;
    color: #72778b;
}
.operator:active {
    box-shadow: 0 2px #bebebe;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-tranform: translateY(2px);
    transform: translateY(2px);
}
.other {
    background-color: #e3844c;
    box-shadow: 0 5px #e76a3d;
    color: #dededc;
}
.other:active {
    box-shadow: 0 2px #e76a3d;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-tranform: translateY(2px);
    transform: translateY(2px);
}
    </style>
    <script type="text/javascript">
        alert("ssss");
        var value1="";
        function get(value){
            value1+=value;
            document.getElementById("display").value += value;
        }
        function getres(){
            document.getElementById("display").value = "";
            document.getElementById("display").value += eval(value1);
        }
        function clear2(){
            document.getElementById("display").value = "";
            value1=""; 
        }
    </script>
</head>
<body>
<div id="center">
<form>
<input type="button" id="clear" class="btn other" value="C" onclick="clear2();">
            <input type="text" id="display">
                <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);">
            <input type="button" class="btn operator" value="+" 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);">
            <input type="button" class="btn operator" value="*" onclick="get(this.value);">
                <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);">
            <input type="button" class="btn operator" value="-" 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);">         
            <input type="button" class="btn other" value="=" onclick="getres();">

</form>
</div>
</body>
</html>

JavaScript补充内容

一、正则表达式

1.1 基本概念

正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符，或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。

1.2 基本语法

语法： /正则表达式主体/修饰符(可选)

实例：var patt = /runoob/i

runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (表示搜索不区分大小写)。

1.3 几个实例

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

1.3.1 search()

将/World/i换为“World”会是一样的结果。字符串参数会转换为正则表达式

1.3.2 replace()

将/World/i换为“World”也会是一样的结果。
这里写图片描述
正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

1.4 正则表达式修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

1.5 正则表达式模式

1.5.1 方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以\|分隔的选项。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

1.5.2 元字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

举例：
var str=”Hello World！”;
var patt1=/h.l/g;
对字符串的“h.l”进行搜索，匹配的是：Hello World！

var str="Hello World！";
var patt1=/\w/g;

对字符串中的单词字符进行全局搜索：Hello World！

var str="Hello World！";
var patt1=/\W/g;

对字符串中的非单词字符进行全局搜索：Hello World！

1.5.3 量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，”caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

二、RegExp对象

2.1 基本概念

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

2.2 基本语法

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配，如：/i、/g等

2.3 基本方法

2.3.1 exec()

exec() 方法用于检索字符串中的正则表达式的匹配。

如果字符串中有匹配的值返回该匹配值，否则返回 null。

语法：RegExpObject.exec(string)

举例：
这里写图片描述

2.3.2 test()

test()方法用于检测一个字符串是否匹配某个模式.

如果字符串中有匹配的值返回 true ，否则返回 false。

语法：RegExpObject.test(string)

举例：
这里写图片描述

2.4支持正则表达式的String对象方法

2.4.1 search()

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

如果找到返回子字符串位置
如果没有找到任何匹配的子串，则返回 -1。
举例：
这里写图片描述

2.4.2 match()

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

注意： match() 方法将检索字符串 String Object，以找到一个或多个与 regexp
匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match()
方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回
null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

举例：
这里写图片描述

2.4.3 replace()

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
语法
string.replace(searchvalue,newvalue)
参数值
searchvalue：规定子字符串或要替换的模式的 RegExp 对象。
newvalue：一个字符串值。规定了替换文本或生成替换文本的函数。
返回值：一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
举例：
这里写图片描述

2.4.4 split()

split() 方法用于把一个字符串分割成字符串数组。

提示：如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注意： split() 方法不改变原始字符串。

用正则表达式实现表单验证

JS Demo

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^([a-zA-Z0-9_-])+@([a -zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$/;
    return reg.test(str);
}


function  fun1(){
    // if(!isStudentNo(document.getElementById("sno").value)){
    //  alert("学生编号是8位数字");
    //  document.getElementById("sno").focus();
    //  return false;
    // }

    // if(!ischina(document.getElementById("username").value)){
    //  alert("学生姓名必须填写中文");
    //  document.getElementById("username").focus();
    //  return false;  
    // }

    if(!IsEmail(document.getElementById("email").value)){
        alert("邮箱地址错误");
        document.getElementById("email").focus();
        return false;  
    }

    // if(!isTelCode(document.getElementById("tel").value)){
    //  alert("电话号码不对");
    //  document.getElementById("tel").focus();
    //  return false;  
    // }

    /*运行到这里说明验证通过返回true    submit提交按钮起作用提交表单*/
    alert("提交成功")
    return true;
}