学习之初，写过许多小demo，但是一直没有整理。现在也整理一下，供初学的朋友参考参考。先用js写一个简单的计算器，外观如下图：
计算器外观
这个计算器可以最简单的加减乘除取余运算以及退格、清零等。
分为三部分：html、css、js。
html布局如下：
<div class="calculater">
<div class="header">
<a href="#" target:_blank>CLICK</a>
<h1>CALCULATER</h1>
</div>
<form name="calculater" action method="get">
<p class="screen" id="screen">
</p>
<div class="calcu_btns">
<ul>
<li onclick="typeInput('7')">7</li>
<li onclick="typeInput('8')">8</li>
<li onclick="typeInput('9')">9</li>
<li onclick="del()">←</li>
<li onclick="typeInput('c')">c</li>
<li onclick="typeInput('4')">4</li>
<li onclick="typeInput('5')">5</li>
<li onclick="typeInput('6')">6</li>
<li onclick="typeInput('*')">*</li>
<li onclick="typeInput('/')">/</li>
<li onclick="typeInput('1')">1</li>
<li onclick="typeInput('2')">2</li>
<li onclick="typeInput('3')">3</li>
<li onclick="typeInput('+')">+</li>
<li onclick="typeInput('-')">-</li>
<li onclick="typeInput('0')" >0</li>
<li onclick="typeInput('00')">00</li>
<li onclick="typeInput('.')">.</li>
<li onclick="typeInput('%')">%</li>
<li onclick="typeInput('=')">=</li>
</ul>
</div>
</form>
<div class="footer">
<span>HELLO WORLD</span>
<a href="#">反馈</a>
</div>
</div>
css外部样式
body{
background-color:#f3f3f3;
text-align:center;
}
.calculater{
width:300px;
height:400px;
margin:auto;
margin-top:50px;
background-color:#e1e1e1;
border:1px solid #fefefe;
font-size:12px;
font-family:Arial,times;
padding:0 20px;
box-shadow:5px 5px 10px #000 ;
}
.header{
width:300px;
height:20px;
text-align:left;
margin-bottom:10px;
}
a{
float:right;
color:#aaa;
text-decoration:none;
}
h1{
font-size:15px;
color:#555;
}
.screen{
width:300px;
height:40px;
line-height:40px;
border:1px solid #aaa;
font-size:20px;
text-align:right;
box-shadow: 5px 0 5px #aaa inset;
}
.calcu_btns{
width:300px;
height:245px;
}
.calcu_btns ul{
padding:0;
margin-top:20px;
width:300px;
height:245px;
border:1px solid #fff;
}
.calcu_btns li{
list-style:none;
float:left;
width:50px;
height:50px;
margin:5px;
display:inline;
line-height:50px;
font-size:17px;
background-color:#eaeaea;
box-shadow: 5px 5px 5px #aaa;
}
.calcu_btns li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
.footer{
width:280px;
height:30px;
background-color:#e1e1e1;
margin-top:10px;
text-align:left;
line-height:30px;
padding:0 10px;
}
.footer span {
text-align:left;
color:#a1a1a1;
}
js部分：要给每个按键加一个加一个click事件，并传入一个对应的参数，然后根据参数做相应的算法。
<script>
var screen=document.getElementById("screen");
//获取id为screen的元素，并保存到当前变量；
function typeInput(y) //方法typeInput输入参数为y，并且y为字符串；
{
if(y=="c"){ //当输入的c为等号时，清空screen；
screen.innerHTML="";
}else if(y=='=') //当输入的y为等号时，计算结果，并赋值给它；
{
screen.innerHTML=eval(screen.innerHTML);
//eval是原生自带的计算方法；可自动计算eval("3+5")=8;
}else{ //如果是其他的计算符号，就直接加在后面；
screen.innerHTML=screen.innerHTML+y;
}
}
function del() //输入退格；
{
var str=screen.innerHTML.substring(0,screen.innerHTML.length-1)
screen.innerHTML=str;
// 截取第一个到倒数第二的字符串，substring(0,screen.innerHTML.length-1)
}
</script>
方法讲解已经注释，仅供参考。
<head>
<style>
body{
background-color:#f3f3f3;
text-align:center;
}
.calculater{
width:300px;
height:400px;
margin:auto;
margin-top:50px;
background-color:#e1e1e1;
border:1px solid #fefefe;
font-size:12px;
font-family:Arial,times;
padding:0 20px;
box-shadow:5px 5px 10px #000 ;
}
.header{
width:300px;
height:20px;
text-align:left;
margin-bottom:10px;
}
a{
float:right;
color:#aaa;
text-decoration:none;
}
h1{
font-size:15px;
color:#555;
}
.screen{
width:300px;
height:40px;
line-height:40px;
border:1px solid #aaa;
font-size:20px;
text-align:right;
box-shadow: 5px 0 5px #aaa inset;
}
.calcu_btns{
width:300px;
height:245px;
}
.calcu_btns ul{
padding:0;
margin-top:20px;
width:300px;
height:245px;
border:1px solid #fff;
}
.calcu_btns li{
list-style:none;
float:left;
width:50px;
height:50px;
margin:5px;
display:inline;
line-height:50px;
font-size:17px;
background-color:#eaeaea;
box-shadow: 5px 5px 5px #aaa;
}
.calcu_btns li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
.footer{
width:280px;
height:30px;
background-color:#e1e1e1;
margin-top:10px;
text-align:left;
line-height:30px;
padding:0 10px;
}
.footer span {
text-align:left;
color:#a1a1a1;
}
</style>
</head>
<div class="calculater">
<div class="header">
<a href="#" target:_blank>CLICK</a>
<h1>CALCULATER</h1>
</div>
<form name="calculater" action method="get">
<p class="screen" id="screen">
</p>
<div class="calcu_btns">
<ul>
<li onclick="typeInput('7')">7</li>
<li onclick="typeInput('8')">8</li>
<li onclick="typeInput('9')">9</li>
<li onclick="del()">←</li>
<li onclick="typeInput('c')">c</li>
<li onclick="typeInput('4')">4</li>
<li onclick="typeInput('5')">5</li>
<li onclick="typeInput('6')">6</li>
<li onclick="typeInput('*')">*</li>
<li onclick="typeInput('/')">/</li>
<li onclick="typeInput('1')">1</li>
<li onclick="typeInput('2')">2</li>
<li onclick="typeInput('3')">3</li>
<li onclick="typeInput('+')">+</li>
<li onclick="typeInput('-')">-</li>
<li onclick="typeInput('0')" >0</li>
<li onclick="typeInput('00')">00</li>
<li onclick="typeInput('.')">.</li>
<li onclick="typeInput('%')">%</li>
<li onclick="typeInput('=')">=</li>
</ul>
</div>
</form>
<div class="footer">
<span>HELLO WORLD</span>
<a href="#">反馈</a>
</div>
<script>
var screen=document.getElementById("screen");
//获取id为screen的元素，并保存到当前变量；
function typeInput(y) //方法typeInput输入参数为y，并且y为字符串；
{
if(y=="c"){ //当输入的c为等号时，清空screen；
screen.innerHTML="";
}else if(y=='=') //当输入的y为等号时，计算结果，并赋值给它；
{
screen.innerHTML=eval(screen.innerHTML);
//eval是原生自带的计算方法；可自动计算eval("3+5")=8;
}else{ //如果是其他的计算符号，就直接加在后面；
screen.innerHTML=screen.innerHTML+y;
}
}
function del() //输入退格；
{
var str=screen.innerHTML.substring(0,screen.innerHTML.length-1)
screen.innerHTML=str;
// 截取第一个到倒数第二的字符串，substring(0,screen.innerHTML.length-1)
}
</script>
网友评论