js实现计算器效果
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/acurec/123/edit
-->
<head>
<meta charset=utf-8 />
<title>Calculator</title>
<style id="jsbin-css">
div,span{
margin:0;padding:0;
font-weight:bold;
font: bold 16px Arial, sans-serif;
/*禁止选中文本*/
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
user-select:none;
}
body{
background:radial-gradient(circle,#fff,#aaa);
background:-webkit-radial-gradient(circle,#fff,#aaa);
background:-o-radial-gradient(circle,#fff,#aaa);
background:-moz-radial-gradient(circle,#fff,#aaa);
background-size:cover;
}
#calculator{
width:325px;
height:auto;
margin:100px auto;
padding:20px;
background:linear-gradient(#9dd2ea, #8bceec);
background:-o-linear-gradient(#9dd2ea, #8bceec);
background:-webkit-linear-gradient(#9dd2ea, #8bceec);
background:-moz-linear-gradient(#9dd2ea, #8bceec);
border-radius:5px;
box-shadow:0 7px 8px #0000ff
}
.keys,.head{overflow:hidden;}
.keys span,.clear{
float:left;
width:66px;
height:40px;
margin:0 5px 10px 8px;
text-align:center;
line-height:40px;
border-radius:3px;
background:#eee;
box-shadow:0 5px 1px #999;
cursor:pointer;
transition:all 0.3s ease;
}
.keys span:hover{
background:#87cefa;
box-shadow:0 5px 1px #1e90ff;
color:#fff;
}
.keys .sign{
background:#fffacd;
}
.clear{
float:left;
background:#ffb6c1;
box-shadow:0 5px 1px #ff86c1;
}
.clear:hover{
background:#ff96a1;
box-shadow:0 5px 1px #ff4691;
color:#fff;
}
.show{
width:213px;
height:40px;
float:right;
margin:0 16px 5px 0;
border-radius:3px;
background:#999;
font-size:20px;
line-height:40px;
text-align:right;
padding-right:10px;
box-shadow:inset 0 4px 5px #333;
}
</style>
</head>
<body>
<div id="calculator">
<div class="head">
<span class="clear">c</span>
<div class="show"></div>
</div>
<div class="keys">
<span>7</span>
<span>8</span>
<span>9</span>
<span class="sign">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="sign">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="sign">*</span>
<span>0</span>
<span>.</span>
<span>=</span>
<span class="sign">/</span>
</div>
</div>
<script>
window.onload=function()
{
var oShow=getByClass("calculator","show")[0];
var aNum=document.getElementById("calculator").getElementsByTagName("span");
for(var i=0,iLen=aNum.length;i<iLen;i++)
{
aNum[i].onclick=function()
{
var oShowVal=oShow.innerHTML;
var oNumVal=this.innerHTML;
var num1,num2=null;
num1=oShowVal;
//判断按键
if(oNumVal=="c")
{
oShow.innerHTML="";
}
else if(oNumVal=="=")
{
var oResult=eval(oShowVal);
oShow.innerHTML=oResult;
}
else
{
oShow.innerHTML+=oNumVal;
}
}
}
}
function getByClass(root,sClass)
{
var obj=document.getElementById(root);
var arr=[];
var aItems=obj.getElementsByTagName("*");
for(var i=0;i<aItems.length;i++)
{
if(aItems[i].className==sClass)
{
arr.push(aItems[i]);
}
}
return arr;
}
</script>
效果图：
js实现计算器效果的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
随机推荐
- 把数据存储到 XML 文件
通常,我们在数据库中存储数据.不过,如果希望数据的可移植性更强,我们可以把数据存储 XML 文件中. 创建并保存 XML 文件 如果数据要被传送到非 Windows 平台上的应用程序,那么把数据保存在 ...
- BZOJ 2157: 旅游 （结构体存变量)
用结构体存变量好像确实能提高运行速度,以后就这么写数据结构了 Code: #include <cstdio> #include <algorithm> #include < ...
- nuget push 程序包到nuget服务器时报错 406 (Not Acceptable)
1.在window服务器上部署nuget服务器时,发布包时出现请求报错 406 (Not Acceptable) 验证用户名.密码正确的情况下,还是出现上面错误.后面跟踪服务器日志,发现window\ ...
- 苹果cms v10官网下载
苹果CMS程序是一套采用PHP+MYSQL环境下运行的完善而强大的快速建站系统.经过近多年的开发经验和技术积累,苹果CMS程序已逐步走向成熟,在易用性和功能上已经成为同行中的佼佼者.程序体积小-> ...
- Spring Boot教程（十一） springboot程序构建一个docker镜像
准备工作 环境: linux环境或mac,不要用windows jdk 8 maven 3.0 docker 对docker一无所知的看docker教程. 创建一个springboot工程 引入web ...
- mybatis批量插入并返回主键（序列）-oracle
需求:批量插入数据,并返回每条数据的主键(序列),因为这里是采用序列生成唯一的主键的, 其实oracle批量 插入操作有几种,网上百度都是有相关资源的.但是笔者现在的需求是,不仅批量插入数据后,并返回 ...
- MATLAB之图像分块处理
file_path = 'D:/MATLAB/bin/IMAGES/GreenChannels/_512_pixel/';% 图像文件夹路径 img_path_list = dir(strcat(fi ...
- node.js npm 操作 模块化开发 cnpm镜像安装
模块(包) 传统引入 js 的缺点 整个网页,我们写了一个 js 文件,所有的特效都在里面 耦合度太高,代码之间关联性太强,不便于后期维护 变量容易 全局污染 如果将 复杂的 js 文件,拆成多个功能 ...
- JS 替换所有的空格
在JS中替换掉输入框内的空格,是在处理表单需求的时候极为常用的一项操作,以防止用户的操作习惯引起数据异常,保证传参的安全性. NO.1 name.replace(" "," ...
- MVC、MVP 和 MVVM
MVC Model–View–Controller 模型:管理应用程序的数据.逻辑和规则 视图:展示数据(可以直接从模型中获取数据) 控制器:接收输入并将其转化成模型和视图的命令 MVP Model– ...