文档章节

javascript之计算器

神的棍
 神的棍
发布于 2016/05/12 20:05
字数 241
阅读 23
收藏 0

 

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf8" />
		<style>
			*{margin:0;padding:0;border:0;outline:0;box-sizing:border-box;}
			ul{list-style:none;}
			div{position:relative;width:320px;height:175px;margin:100px auto;border:1px solid #0a8;}
			li{height:35px;border-bottom:1px solid #eee;}
			li:first-child{text-align:center;}
			span{display:inline-block;width:25%;height:35px;line-height:35px;text-align:center;cursor:pointer;}
			span:hover{background-color:#0a8;color:#eee;}
			input{position:relative;display:inline-block;width:90%;height:30px;border:1px solid #eee;margin-top:2px;padding:0 10px;}
		</style>
	</head>
	<body>
		<div id="calc">
			<ul id="ul">
				<li><input type="text" id="res"></li>
				<li><span id="1">1</span><span id="2">2</span><span id="3">3</span><span id="+">+</span></li>
				<li><span id="4">4</span><span id="5">5</span><span id="6">6</span><span id="-">-</span></li>
				<li><span id="7">7</span><span id="8">8</span><span id="9">9</span><span id="*">*</span></li>
				<li><span id=".">.</span><span id="c">c</span><span id="=">=</span><span id="/">/</span></li>
			</ul>
		</div>
		<script>
			var ID = function(o){return document.getElementById(o);},i = 0;
			ul.addEventListener("click",function (e) {
				var id = e.srcElement.id,r = ID('res');
				if(id != 'c' && id != '='){
					i == 1 && (i = 0,r.value = '');
					r.value += e.srcElement.id;
				}else{
					id == 'c' && (r.value = '');
					id == '=' && (r.value = eval(r.value),i = 1);
				}
				return true;
			},false);
		</script>
	</body>
</html>

 

© 著作权归作者所有

神的棍
粉丝 1
博文 8
码字总数 2193
作品 0
长沙
程序员
私信 提问
使用 Google V8 引擎开发可定制的应用程序

V8 引擎概览 Google V8 引擎使用 C++ 代码编写,实现了 ECMAScript 规范的第五版,可以运行在所有的主流 操作系统中,甚至可以运行在移动终端 ( 基于 ARM 的处理器,如 HTC G7 等 )。V8 最早...

IBMdW
2012/04/13
3.2K
5
JavaScript自学手册文档教程

教程链接:JavaScript自学手册文档教程 javascript只需知道其能处理哪些东西: 1:操作控件 2:子窗口,父窗口,模式窗口 3:内置函数和对象,String相关的处理函数,Math对象(包括常用数学...

mcy0425
2018/06/07
16
0
坚实的 React 基础:初学者指南

在过去的几个月里,我一直在使用 React 和 React-Native。我已经发布了两个作为产品的应用, Kiven Aa(React)和 Pollen Chat(React Native)。当我开始学习 React 时,我找了一些不仅仅是...

作者: Rajat Saxena
2018/10/28
0
0
来试试纯汉语中文的计算器~

计算器程序相信很多人都写过。不过通常都是基于阿拉伯数字的,比如输入 1+2+3,返回 6。 我刚刚实现了一个纯汉语中文的计算器,即输入 一加二加三,返回“六”。 程序是用 JS 实现的,大家可...

redraiment
2012/10/20
675
15
常见的JavaScript“陷阱”

随着ES6标准的普及,JavaScript已经拥有许多新的语法糖,这让我们编写可读的,高质量的代码变得更加方便,但即使这样仍然会遇到一些潜在的”陷阱”。 箭头函数与对象字面量 箭头函数提供了更...

大灰狼的小绵羊哥哥
04/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
56分钟前
121
7
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部