<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
font-size: 14px;
font-family: "微软雅黑";
}
#box{
width: 260px;
margin: 100px auto;
}
#box #top{
height: 50px;
border: 1px solid #666666;
}
ul{
float: left;
}
ul li{
float: left;
list-style: none;
width: 50px;
height: 50px;
background: #CCCCCC;
color: #fff;
text-align: center;
line-height: 50px;
border: 1px solid #008000;
}
ul #li1{
width: 50px;
height: 102px;
}
ul #li2{
width: 102px;
height: 50px;
}
#list{
margin-top: -52px;
}
</style>
</head>
<body>
<div id="jisuanji">
<div id="box">
<div id="top">

</div>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>%</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li id="li3">C</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li id="li1">=</li>
</ul>
<div style="clear: both;"></div>
<ul id="list">
<li id="li2">0</li>
<li>.</li>
<li>+</li>
</ul>
</div>
<script type="text/javascript">
var otext = document.getElementById("top");
var oLi = document.getElementsByTagName('li');
var li1 = document.getElementById("li1");
var li3 = document.getElementById("li3");
for (var i=0;i<oLi.length;i++) {
oLi[i].onclick = function(){
otext.innerHTML += this.innerHTML;
}
}
li1.onclick = function(){
otext.innerHTML = eval(otext.innerHTML )
}
li3.onclick = function(){
otext.innerHTML ='';
}
</script>
</div>
</body>
</html>

js计算器的更多相关文章

  1. 早期练手：功能相对比较完善的 js 计算器

    第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...

  2. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  3. js计算器---转

    至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...

  4. 简易js计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. <!DOCTYPE html> <html> <head> ...

  5. JS计算器（自制）

    <!doctype html><html><header><meta charset="utf-8"><script src= ...

  6. js 计算器转摘

    转自:https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg <table> <tr> <td colspan="4 ...

  7. 基于js白色简洁样式计算器

    今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...

  8. 纯JS实现房贷利率报表对比

    最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的, ...

  9. windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码

    官网:www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...

随机推荐

  1. nodejs爬虫——汽车之家所有车型数据

    应用介绍 项目Github地址:https://github.com/iNuanfeng/node-spider/ nodejs爬虫,爬取汽车之家(http://www.autohome.com.cn ...

  2. 使用StyleCop.Analyzers进行代码审查

    为什么要进行代码审核? 提早发现代码中的BUG,避免将BUG带到生产环境 极大的提高软件质量,以及可维护性 统一代码规范.提高可读性,减少新加入成员的熟悉时间 加速个人和团队的成长,知识和经验的积累 ...

  3. Jquery中的重置

     提交表单是像下面这样的:代码 $('#myform').submit() $('#myform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽:代码 $('#myform ...

  4. 怎么用php语言来做文件缓存

    使用缓存能够让我们的程序访问起来更加快速,缓存可以减少对数据库的操作,体验起来更好一些,对服务器的压力也小一些,当然服务速度很快 php文件执行完之后产生的解析完的数据,保存成静态的网页,下次打开的这 ...

  5. 赵本山 教你如何在实战项目中使用WCF

    我们都知道调用WCF直接在Service References中引用可以远程调用的WCF Url就行了. 但是我们想过没,在Development环境中可以这样做,但是QA.UAT.Productio ...

  6. 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐

    1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 1010  Solv ...

  7. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  8. python + selenium <四>

    层级定位 swich_to_alert swich_to_frame swich_to_window 1. driver.switch_to_alert().accept()#最简单,直接点击确定关闭 ...

  9. C#(.Net)知识点记录

    一:批量插入"SqlBulkCopy"的应用 PS:"SqlBulkCopy"的官方释义:"Lets you efficiently bulk loa ...

  10. pageRank算法 python实现

    一.什么是pagerank PageRank的Page可是认为是网页,表示网页排名,也可以认为是Larry Page(google 产品经理),因为他是这个算法的发明者之一,还是google CEO( ...