利用事件冒泡实现简单的网页计算器

效果:

代码:

<!DOCTYPE HTML>
<html><head><title>取消与利用冒泡</title><meta charset="utf-8"/></head><body><div id="keys"><button>1</button><button>2</button><button>3</button><button>4</button><br><button>C</button><button>+</button><button>-</button><button>=</button></div><textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea><script>var sc=document.getElementById("sc");document.getElementById("keys").addEventListener("click",function(e){if(e.target.nodeName=="BUTTON"){switch(e.target.innerHTML){case "C":sc.value="";break;case "=":sc.value=eval(sc.value);break;default:sc.value+=e.target.innerHTML;}}});</script></body>
</html>

转载于:https://www.cnblogs.com/web-fusheng/p/6745143.html

利用事件冒泡实现简单的网页计算器相关推荐

利用事件冒泡和阻止事件冒泡的例子
利用事件冒泡机制页面中的评分界面,大家一定都很熟悉,现在假如我开了一家饭店,我需要一个在我们的网页上能让顾客对我的饭店进行打分.首先,我们需要两张星星的图片,一张是灰的的星星,一张是黄色的星星,我们 ...
设计一个简单的网页计算器
设计一个简单的网页计算器一.代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"& ...
asp.net实现一个简单的网页计算器（能够实现加减乘除）
asp.net实现一个能够进行加减乘除)简单的网页计算器效果图实现代码: aspx文件代码: <%@ Page Language="C#" AutoEventWireup ...
java jsp网页计算器_使用JSP制作一个超简单的网页计算器的实例分享
实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp 简单的计算机进行计算 --%> cal.calculate(); ...
用JavaScript制作简单的网页计算器
一.题目利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 <!doctype html> <html> <head> ...
一个简单的网页计算器-php网站建设代码段分享
功能说明:接收用户输入数字并判断,实现加.减.乘.除.取余功能,能够保存输入的数值并验证输入的数值是否符合要求. <!doctype html> <html> <head ...
用PHP实现一个简单的网页计算器
<h3>实现一个网页计算器</h3> <form action="" method="get"> 第一个数:<inpu ...
利用HTML+JS+CSS实现简单的网页计算器，附html所有源代码，可直接黏贴运行
最终实现的效果图源码 <!doctype html> <html><head><meta charset="utf-8">< ...
利用DIV，实现简单的网页布局
<html lang="en"> <head> <meta charset="UTF-8"> <title>GI ...

利用事件冒泡实现简单的网页计算器

利用事件冒泡实现简单的网页计算器相关推荐

最新文章

热门文章