jquery实现计算器小功能
更新时间：2022年07月21日 11:35:21 作者：lunaticCode1
这篇文章主要为大家详细介绍了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);
}
}效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇jQuery+CSS3文字跑马灯特效的简单实现。小编觉得挺不错的，现在就分享给大家看，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
今天在项目中，刚好用到给指定的table添加一行、删除一行。添加一行，支持在任意行添加一行且可配置的，删除一行支持动态删除一行。本文给大家介绍的非常详细，一起看看吧2016-10-10
开发人员利用jQuery代码不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段，大家可以直接拿来用。2015-09-09
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。2015-05-05
这篇文章主要介绍了jQuery实现不断闪烁文字的方法,涉及jQuery中fadeOut、fadeIn方法及递归调用的技巧,需要的朋友可以参考下2015-05-05
通过$.each，可以遍历对象、数组的属性值并进行处理，下面有个示例，需要的朋友可以参考下2014-07-07
截取指定长度字符串操作在新闻列表这种类型的操作中大量应用，下面有个示例，大家可以参考下2014-07-07
本篇文章主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了jQuery常见事件的监听方式，页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，下面关于监听事件的介绍，需要的小伙伴可以参考一下2022-03-03
这里所说的，用jquery去验证某一组多选至少要有一个选中，某一组单选至少有一个选中，，大家都知道单一的一个用js比较好验证，但是想要用jquery的验证并且用到jquery验证的提示信息，那么这就不好办了2013-08-08
最新评论