啊因为懒得去找素材了，所以做了一个仿win10计算器的灰白色计算器。
参考：http://www.html5tricks.com/jquery-calculator.html
HTML源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Caluculator</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/script.js"></script> <meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="counter">
<h3>在线计算器</h3>
<input type="text" value="0" id="inputFrame"/>
<ul>
<li>7</li><li>8</li><li>9</li><li class="order">+</li>
<li>4</li><li>5</li><li>6</li><li class="order">-</li>
<li>1</li><li>2</li><li>3</li><li class="order">×</li>
<li>0</li><li>C</li><li>=</li><li class="order">÷</li>
</ul>
</div>
</body>
</html>
JS源码：
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmousedown=doInput;
lis[i].onmouseover=function(){
this.className="active";
}
lis[i].onmouseout=function(){
this.className="";
}
}
}
var refresh=false;
var sum='0';
var preOrder='';
function cal(a,b,order){
var res=0;
if(order=='+'){
res=a+b;
}
else if(order=='-'){
res=a-b;
}
else if(order=='×'){
res=a*b;
}
else if(order=='÷'){
res=a/b;
}
else{
res=b;
}
return res;
}
function doInput(){
var oInput=document.getElementById("inputFrame");
var iHTML=this.innerHTML;
if(iHTML=='='){
oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
refresh=true;
sum='0';
preOrder='';
}
else if(iHTML=='+'||iHTML=='-'||iHTML=='×'||iHTML=='÷'){
oInput.value=cal(parseInt(sum),parseInt(oInput.value),preOrder);
refresh=true;
sum=oInput.value;
preOrder=iHTML;
}
else if(iHTML=='C'){
oInput.value='0';
sum='0';
preOrder='';
}
else{
if(refresh){
oInput.value=parseInt(iHTML);
refresh=false;
}
else{
oInput.value=parseInt(oInput.value+iHTML);
}
}
}
CSS源码：
@charset "UTF-8"; /* reset.css */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
img{
border: none;
}
li{
list-style: none;
}
input,select,textarea{
outline: none;
border: none;
}
textarea{
resize: none;
}
a{
text-decoration: none;
color: #656565;
}
/* 清除浮动 */
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
/* 设置浮动 */
.fl{
float: left;
}
.fr{
float: right;
} /*************************************************************/ /* main.css */
#counter{
width: 500px;
height: 420px;
margin: 50px auto;
position: relative;
border: #cfcfcf solid 1px;
}
#counter h3{
margin:10px 0 0 10px;
width: 490px;
height: 30px;
font-size: 23px;
/* font-weight: bold; */
}
#counter input{
width: 490px;
height: 99px;
line-height: 99px;
padding-right: 10px;
font-size: 40px;
font-weight: bold;
text-align: right;
border-bottom: #cfcfcf solid 1px;
}
#counter ul{
width: 500px;
height: 280px;
}
#counter li{
float: left;
width: 125px;
height: 70px;
line-height: 70px;
background-color: #e6e6e6;
/* font-weight: bold; */
font-size: 30px;
text-align: center;
}
#counter .active{
background-color: #cfcfcf;
}
PS：以后这个博客应该不会写ACM的东西了，今年寒假和暑假撸了一下前端，算是入了门吧。也想告别过去一年的ACM生涯了，感觉自己的天赋真的不够，甚至努力程度也不够，兴趣过了之后只觉烦躁，而且不想以后的假期都耗在环境恶劣的学校宿舍，所以打算放弃了。打算开始体验一下后端开发！Kadima！