欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

#js#简单的在线计算器

发布时间：2025/3/15 编程问答 0 豆豆
生活随笔 收集整理的这篇文章主要介绍了 #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#简单的在线计算器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。