啊因为懒得去找素材了，所以做了一个仿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{ 500px; height: 420px; margin: 50px auto; position: relative; border: #cfcfcf solid 1px; } #counter h3{ margin:10px 0 0 10px; 490px; height: 30px; font-size: 23px; /* font-weight: bold; */ } #counter input{ 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{ 500px; height: 280px; } #counter li{ float: left; 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！