#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.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！
#js#简单的在线计算器的更多相关文章
- js加减乘除在线计算器代码
js加减乘除在线计算器代码 在线演示本地下载
- Tourist.js – 简单灵活的操作指南和导航插件
Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...
- 原生js简单调用百度翻译API实现的翻译工具
先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...
- baguetteBox.js - 简单易用的 lightbox 插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示 ...
- 基于PHP实现一个简单的在线聊天功能（轮询ajax ）
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- js简单 图片版时钟，带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js简单操作Cookie
贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
随机推荐
- TOGAF架构能力框架之架构合同、成熟度模型和架构技能框架
TOGAF架构能力框架之架构合同.成熟度模型和架构技能框架 5. 架构合同 架构合同是在开发团体和赞助者之间关于架构的交付物.质量以及适用目标的联合协议,并且通过有效的架构治理将会促使这些协议的成功施 ...
- Python远程视频监控
Python远程视频监控程序 老板由于事务繁忙无法经常亲临教研室,于是让我搞个监控系统,让他在办公室就能看到教研室来了多少人.o(>﹏<)o||| 最初我的想法是直接去网上下个软件,可 ...
- RTB撕开黑盒子 Part 2: Algorithm Meets World
Part 0介绍了RTB的胜出价格会在凌晨陡升.我们还介绍了一个Pace系统,如果这个系统所有的DSPs都用,那陡升的问题就会消失.Part 0中的系统中含有一个隐式的假设:任何两个请求都认为是相同的 ...
- web form中自定义HttpHandler仿mvc
web form中自定义HttpHandler仿mvc 前言 在mvc大行其道的今天,仍然有不少公司的项目还是使用web form来实现的(其实mvc也是基于web form的),如果要在项目中引入m ...
- 三.redis 排序
本篇文章介绍下redis排序命令.redis支持对list,set和sorted set元素的排序.排序命令是sort 完整的命令格式如下: SORT key [BY pattern] [LIMIT ...
- iOS 开发之Target-action模式
Target-action:目标-动作模式,它贯穿于iOS开发始终.但是对于初学者来说,还是被这种模式搞得一头雾水. 其实Target-action模式很简单,就是当某个事件发生时,调用那个对象中的那 ...
- 下载centos6.4
下载centos6.4 (原创)LAMP教程3-下载centos6.4 今天我要给大家讲的是安装CentOS-6.4-x86_64,是的没有错,就是64位的,因为我的机子是4G的内存,安装64位的ce ...
- Windows应用商店API
Windows应用商店API 动手实验 实验 8: Windows应用商店API 2012年9月 简介 编写Windows应用商店应用最令人瞩目的理由之一是您可以方便地将它们发布到Windows应用商 ...
- asp.net MVC 路由机制
1:ASP.NET的路由机制主要有两种用途: -->1:匹配请求的Url,将这些请求映射到控制器 -->2:选择一个匹配的路由,构造出一个Url 2:ASP.NET路由机制与URL重写的区 ...
- Kendo UI开发教程(6): Kendo DataSource 概述
Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...