jquery实现计算器小功能
本文实例为大家分享了jquery实现计算器功能的具体代码,供大家参考,具体内容如下
用jquery实现计算器对于我来说有三个难点
1.单纯的html页面,怎么实现计算
2.显示屏用什么标签,又怎么把他显示出来
3.要想实现删除,怎么把字符串最后一个字母删除
解决
1.看了别人的计算器,我发现eval()可以实现这个目的
eg: alert(eval(“3+5”));
没错,会弹出 8。
2.看了几个人的博客,都是用span元素节点当显示屏,通过jQuery的html()函数来实现把内容显示出来。
3.有两个思路,
一个是利用正则表达式,不过很多像我这样的小白可能不会,我虽然学过,不过也差不多忘记了很多。
小姐姐告诉我,js文件中也可以用subString();
需要注意的地方
1.在html代码中“<div id=“cal” οnclick=“f(event)>”
也就是说只要点击这个div,它就会响应f(event)这个函数,这个函数定义在 js 代码中。
2. 在js代码function f(event){}中,this!= event.target;this表示的是id为cal的那个div的对象,event.target表示的是这个div的子级对象,比如点击这个div的子级标签,eg:value="D"的input元素标签,那么event.target就为这个子级标签的对象
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="css/cal.css" />
<script type="text/javascript" src="jquery-1.7.2.js">
</script>
<script type="text/javascript" src="js/cal.js" ></script>
</head>
<body>
<div id="cal" onclick="f(event)">
<span id="screen"></span>
<input type="button" value="D" />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="+" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="-" />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="*" />
<input type="button" value="0" />
<input type="button" value="." />
<input type="button" value="=" />
<input type="button" value="/" />
</div>
</body>
</html>
css代码
*{
margin: 0px;
padding: 0px;
}
#cal{
width: 300px;
border: 4px solid black;
margin: 50px auto;
}
#screen{
line-height:46px;
text-indent: 10px;
float: left;
margin: 10px 10px;
width: 196px;
height: 46px;
border: 2px solid;
}
input{
margin: 10px;
height: 50px;
width: 50px;
background-color: honeydew;
}
input:active{
background: red;
}
js代码
var clear=false;
function f(event){
var btn=event.target;
var $screen=$("#screen");
var temp=$screen.html();
var value=$(btn).val();
//将除INPUT对象全部返回
if($(btn).prop("nodeName")!="INPUT"){
return;
}
//判断是否需要清除屏幕
if(clear==true){
temp="";
clear=false;
}
//删除操作
if(value=="D"){
temp=temp.substring(0,temp.length-1);
$screen.html(temp);
}
//点击等于号时
else if(value=="="){
var result="="+eval(temp);
$screen.html(temp+result);
clear=true;
}
//点击其他按钮时
else{
temp=temp+value;
$screen.html(temp);
}
}
效果展示
相关内容
-
js设置input不可编辑|jquery设置input不可编辑
js设置input不可编辑|jquery设置input不可编辑,,1. jquery设置...
-
JQuery Ajax 回调函数为全局变量赋值|jquery的a
JQuery Ajax 回调函数为全局变量赋值|jquery的ajax怎么发送...
-
jquery中什么是事件冒泡
jquery中什么是事件冒泡,事件,冒泡,元素,触发,点击,文档,冒泡事件就...
-
js和jquery的区别
js和jquery的区别,对象,事件,元素,数组,获取,注册, 学过计算机语...
-
jquery设置高度|jquery获取元素高度宽度
jquery设置高度|jquery获取元素高度宽度,,jquery获取元素高度...
-
jQuery中文社区-打造国内最大的前端社区
jQuery中文社区-打造国内最大的前端社区,中文,教程, jQ...
-
jquery bootstrap下拉列表设置最大高度|bootstr
jquery bootstrap下拉列表设置最大高度|bootstrap下拉菜单按...
-
jquery设置css样式|jquery的css样式
jquery设置css样式|jquery的css样式,,1. jquery的css样式1、响...
-
jquery设置焦点|jquery焦点事件有哪些
jquery设置焦点|jquery焦点事件有哪些,,1. jquery焦点事件有哪...
-
jQuery学习笔记|1
jQuery学习笔记|1,函数,对象,1.jQuery的简介(Write less,do mo...
-
用jquery validate插件实现强密码验证
用jquery validate插件实现强密码验证,密码,新密码,用户修改密...
-
jq页面加载事件(jquery页面加载前执行事件)
jq页面加载事件(jquery页面加载前执行事件),查询,处理事件,开源...
-
jquery标签点击事件(web前端三大主流框架对比)
jquery标签点击事件(web前端三大主流框架对比),框架,封装,异步,...
-
jq获取自定义属性的方法(jquery获取元素属性的值
jq获取自定义属性的方法(jquery获取元素属性的值),操作,属性,方...
-
jquery获取input的value值(jquery获取input的val
jquery获取input的value值(jquery获取input的value值的方法),操...