啊因为懒得去找素材了,所以做了一个仿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#简单的在线计算器的更多相关文章

  1. js加减乘除在线计算器代码

    js加减乘除在线计算器代码 在线演示本地下载

  2. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  3. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  4. baguetteBox.js - 简单易用的 lightbox 插件

    baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示  ...

  5. 基于PHP实现一个简单的在线聊天功能(轮询ajax )

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  6. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  7. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  9. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

随机推荐

  1. Api 和 Spi

    目录 背景Java类库中的实例如何实现这种结构?备注 背景返回目录 Java 中区分 Api 和 Spi,通俗的讲:Api 和 Spi 都是相对的概念,他们的差别只在语义上,Api 直接被应用开发人员 ...

  2. Sparse Filtering

    Sparse Filtering 当前很多的特征学习(feature learning)算法需要很多的超参数(hyper-parameter)调节, Sparse Filtering则只需要一个超参数 ...

  3. 企业架构研究总结(30)——TOGAF架构内容框架之内容元模型(上)

    2. 内容元模型(Content Metamodel) 在TOGAF的眼中,企业架构是以一系列架构构建块为基础的,并将目录.矩阵和图形作为其具体展现方式.如果我们把这些表述方式看作为构建块的语法,那么 ...

  4. JavaScript怎么上传图片

    JavaScript怎么上传图片 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有 ...

  5. JavaScript 面向对象编程(三)如何写类和子类

    在JavaScript面向对象编程(一)原型与继承和JavaScript面向对象编程(二)构造函数和类中,我们分别讨论了JavaScript中面向对象的原型和类的概念.基于这两点理论,本篇文章用一个简 ...

  6. STM8S ADC初始化设置及应用

    //ADC通道号定义 #define ADC_Chanel0 (unsigned char)0x00 #define ADC_Chanel1 (unsigned char)0x01 #define A ...

  7. SharePoint 2013/2010 中的日历重合 (Calendars Overlay)

    本文介绍 SharePoint 2013/2010 中的日历重合 (Calendars Overlay). 日历重合 (Calendars Overlay)的用途就是将 不多于10个日历或日历视图聚集 ...

  8. php中的foreach函数

    Foreach 函数(PHP4/PHP5) foreach 语法结构提供了遍历数组的简单方式. foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信 ...

  9. hdu 1809 求SG函数

    A New Tetris Game(2) Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  10. C语言实现修改文本文件中的特定行

         最近由于项目需要实现修改文件的功能,所以,博主认真查阅了一些资料,但是,很遗憾,并没有太多的收获. 好的,首先我先叙述下功能要求: 其实很简单,就是Shell中sed命令的C语言实现,实现定 ...