#js#简单的在线计算器
生活随笔
收集整理的這篇文章主要介紹了
#js#简单的在线计算器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
啊因為懶得去找素材了，所以做了一個仿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.οnlοad=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！
轉載于:https://www.cnblogs.com/atmacmer/p/5823147.html
總結
以上是生活随笔為你收集整理的#js#简单的在线计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle extract函数笔记
- 下一篇： 数据挖掘-回归分析