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的效果如下: 点击我 ...
随机推荐
- select 语句关键字优先级
1.select 语句优先级 select classid, userid, name, age from study where userid > 15 group by classid ha ...
- sh_03_程序计数
sh_03_程序计数 # 打印 5 遍 Hello Python # 1. 定义一个整数变量,记录循环次数 i = 0 # 2. 开始循环 while i < 3: # 1> 希望在循环内 ...
- [BZOJ5463][APIO2018]铁人两项：Tarjan+圆方树
分析 根据题目中的要求,从\(s\)出发前往\(f\)一定可以,并且只可能经过这两个结点所在的点双连通分量和它们之间的点双连通分量,因此切换点\(c\)只能从这些点中选取. 建出圆方树后,因为圆方树上 ...
- 装RAC跑脚本报错
在执行第二个脚本的时候报错 原因是在改服务器找不到该包 解决方法: 挂载iso镜像,安装这个包
- 大哥带的Orchel数据库的盲注入bool型
0X01判断闭合 ?username=SMITH' 错误 ?username=SMITH'' 正确 ?username=SMITH' and ascii(substr((select user fro ...
- 关于viewpager的滑动问题
今天碰到很诡异的问题,viewpager中放置至少三张图片的时候能够正常实现循环滑动,只放置一张或者两张的时候就不行. 后来发现问题症结:viewpager需要保证既可以向左滑动,又可以向右滑动,因此 ...
- spring cloud:HystrixDashboard
hystrix-dashboard-server 1. File-->new spring starter project 2.add dependency <parent> < ...
- postman抓包
三个问题: 如何安装? 基本了解? 如何使用? 一.安装方法: 包括离线端安装和chrome插件安装,我用chrome插件安装成功 postman安装及使用 打开Chrome,依次选择“选项”> ...
- hibernate UML图
- 把一个树莓派SD卡系统和文件迁移到空SD卡中
1.打开win32diskimager软件读出SD卡树莓派系统和文件到电脑的镜像文件中, 2.使用 SD card formatter 格式化SD卡 3.再用win32diskimager往空SD卡写 ...