Home > Developer > JavaScript
Incomplete mini calculator, complete Calculator
Html code:
<! DOCTYPE html PUBspanC "-// W3C // dtd xhtml 1.0 Transitional //" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> mini calculator </title>
<Link href = "style.css" rel = "stylesheet" style = "text/css"/>
<Script src = "calculator. js" type = "text/javascript"> </script>
</Head>
<Body>
<! -- External big box -->
<Div id = "box">
<Div id = "top">
<Span class = "clear"> C </span>
<! -- Used to display user input results -->
<Div class = "show"> </div>
</Div>
<! -- Calculator buttons -->
<Div id = "keys">
<Span> 7 </span>
<Span> 8 </span>
<Span> 9 </span>
<Span class = "operator"> + </span>
<Span> 4 </span>
<Span> 5 </span>
<Span> 6 </span>
<Span class = "operator">-</span>
<Span> 1 </span>
<Span> 2 </span>
<Span> 3 </span>
<Span class = "operator"> × </span>
<Span> 0 </span>
<Span>. </span>
<Span class = "eval" >=</span>
<Span class = "operator"> operator </span>
</Div>
</Div>
</Body>
</Html>
Css code:
@ Charset "UTF-8 ";
/* CSS Document */
* {Margin: 0px;
Padding: 0px;
Box-sizing: border-box;
Font: bold 14px Arial;
}
/* Spread the entire document stream background */
Html {
Height: 100%;
Background: white;
Background: radial-gradient (circle, # fff 30%, # ccc );
Background-size: cover;
}
/* Define the width style of the entire package box */
# Box {
Width: 340px;
Margin: 120px auto;
Padding: 20px 20px 9px;
Background: # 9CF;
Background: linear-gradient (# 9CF, #8 bceec );
Border-radius: 4px;
Box-shadow: 0px 4px #009de4, 0px 10px 15px rgba (0, 0, 0, 0.5 );
}
# Top. show {
Width: 212px;
Height: 40px;
Float: right;
Margin-right: 15px;
Padding: 0 10px;
Background: rgba (0, 0, 0, 0.2 );
Border-radius: 3px;
Box-shadow: inset 0px 4px rgba (0, 0, 0, 0.2 );
Font-size: 17px;
Line-height: 40px;
Color: white;
Text-shadow: 1px 2px rgba (0, 0, 0, 0.2 );
Text-align: right;
Letter-spacing: 1px;
}
/* Clear parent floating */
# Keys, # top {overflow: hidden ;}
/* Define the style for clearing and other numeric keys and operator number keys */
# Keys span, # top span. clear {
Float: left;
Position: relative;
Top: 0;
Cursor: pointer;
Width: 66px;
Height: 36px;
Background: white;
Border-radius: 3px;
Box-shadow: 0px 4px rgba (0, 0, 0, 0.2 );
Margin: 0 7px 11px 0;
Color: #888;
Line-height: 36px;
Text-align: center;
}
/* Define the style of the symbol key */
# Keys span. operator {
Background: # FFF0F5;
Margin-right: 0;
}
/* Move the mouse over all span labels to display the effect */
# Keys span: hover {
Background: #9c89f6;
Box-shadow: 0px 4px #6b54d3;
Color: white;
}
# Top span. clear {
Background: # ff9fa8;
Box-shadow: 0px 4px # ff7c87;
Color: white;
}
/* The effect displayed by moving the mouse into the clear key */
# Top span. clear: hover {
Background: # f68991;
Box-shadow: 0px 4px # d3545d;
Color: # ffffff;
}
# Keys span. eval {
Background: # f1ff92;
Box-shadow: 0px 4px #9da853;
Color: # 888e5f;
}
/* Move the mouse over the calculated symbol key to display the effect */
# Keys span. eval: hover {
Background: # abb850;
Box-shadow: 0px 4px #717a33;
Color: # ffffff;
}
/* After you click the calculator key, make the shadow of all keys 0 with a sinking effect */
# Keys span: active {
Box-shadow: 0px 0px #6b54d3;
Top: 4px;
}
# Keys span. eval: active {
Box-shadow: 0px 0px #717a33;
Top: 4px;
}
# Top span. clear: active {
Top: 4px;
Box-shadow: 0px 0px # d3545d;
}
Js Code:
// JavaScript Document
Window. onload = function (){
// Obtain all keys
Var keys = document. querySelectorAll ('# box span ');
Var operators = ['+', '-', '*', 'hangzhou'];
Var decimalAdded = false;
// Add a click event to all keys
For (var I = 0; I <keys. length; I ++ ){
Keys [I]. onclick = function (e ){
Var input = document. querySelector ('. show ');
Var inputVal = input. innerHTML;
Var btnVal = this. innerHTML;
// Determine the operator and output result based on the key value clicked by the user
If (btnVal = 'C '){
Input. innerHTML = '';
DecimalAdded = false;
}
Else if (btnVal = '){
Var equation = inputVal;
Var lastChar = equation [equation. length-1];
Equation = equation. replace (/x/g, '*'). replace (/Second/g ,'/');
If (operators. indexOf (lastChar)>-1 | lastChar = '.')
Equation = equation. replace (/. $ /,'');
If (equation)
Input. innerHTML = eval (equation );
DecimalAdded = false;
}
// Display in IE9 +
Else if (operators. indexOf (btnVal)>-1 ){
Var lastChar = inputVal [inputVal. length-1];
If (inputVal! = ''& Operators. indexOf (lastChar) =-1)
Input. innerHTML + = btnVal;
Else if (inputVal = ''& btnVal = '-')
Input. innerHTML + = btnVal;
If (operators. indexOf (lastChar)>-1 & inputVal. length> 1 ){
Input. innerHTML = inputVal. replace (/. $/, btnVal );
}
DecimalAdded = false;
}
Else if (btnVal = '.'){
If (! DecimalAdded ){
Input. innerHTML + = btnVal;
DecimalAdded = true;
}
}
Else {
Input. innerHTML + = btnVal;
}
E. preventDefault ();
}
}
};
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
