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实现的简单在线计算器功能
本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
jQuery实现简单计算器
本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下 基本功能: 1.计算器换肤,目前有白色(默认色).绿色.蓝色.灰色.橙色几种颜色可供选择. 2.简单的加.减.乘.除.取余计算,注意由于时间有限,没有深入研究功能,每次运算后需点击清屏功能才能进行下一次正确的运算. 3.历史运算数据记录,此功能需要点击记录按钮后打开浏览器控制台查看. 4.退出功能,点击退出按钮,可实现计算器退出. 功能截图: 1.换肤(当前肤色为灰色).计算. 2.历史运算记录. 3.退出. 代
-
jQuery实现简易计算器功能
jQuery制作一个简易计算器,供大家参考,具体内容如下 页面效果: 源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8&quo
-
基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(f
-
jQuery实现计算器功能
本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st
-
一个简单的jQuery计算器实现了连续计算功能
一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
-
jQuery实现简单计算器功能
本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下 要求: 代码: <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"> </script> <script>
-
jQuery实现简易的计算器
本文实例为大家分享了jQuery实现简易的计算器的具体代码,供大家参考,具体内容如下 布局如下: css代码 #d1{ width: 400px; height: 500px; /*background-color: #A9A9A9;*/ float: left; margin: 20px 0px 0px 500px; font-size: 30px; font-weight: bold; font-family: 宋体;
-
jQuery实现可以计算进制转换的计算器
本文实例为大家分享了jQuery实现可以计算进制转换的计算器,供大家参考,具体内容如下 在案例8的基础上增加了进制转换功能 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js">&l
-
jquery实现计算器小功能
本文实例为大家分享了jquery实现计算器功能的具体代码,供大家参考,具体内容如下 用jquery实现计算器对于我来说有三个难点 1.单纯的html页面,怎么实现计算2.显示屏用什么标签,又怎么把他显示出来3.要想实现删除,怎么把字符串最后一个字母删除 解决 1.看了别人的计算器,我发现eval()可以实现这个目的eg: alert(eval(“3+5”));没错,会弹出 8.2.看了几个人的博客,都是用span元素节点当显示屏,通过jQuery的html()函数来实现把内容显示出来.3.有两个
-
PHP实现计算器小功能
本文实例为大家分享了PHP实现计算器小功能的具体代码,供大家参考,具体内容如下 <?php if (isset($_POST['sub'])) { $f = true; $error = "有以上问题: <br>"; if ($_POST["num1"] == "") { $f = false; $error .= "第一个数不能为空.<br>"; } else { if(!is_numeric(
-
iOS实现计算器小功能
本文实例为大家分享了iOS实现计算器小功能,供大家参考,具体内容如下 本文利用ios实现计算器app,后期将用mvc结构重构 import UIKit class CalculViewController: UIViewController { @IBOutlet weak var display: UILabel! var userIsInTheMiddleOFTypingANumber:Bool=false @IBAction func appendDigit(sen
-
iOS实现简单计算器小功能
本文实例为大家分享了iOS实现简单计算器小功能的具体代码,供大家参考,具体内容如下 SimpleCaculatorViewController.h // // SimpleCaculatorViewController.h // SimpleCaculator // // Created by LI Junui on 14-2-12. // Copyright (c) 2014年 LEE JUNHUI. All rights reserved. // #import <UIKit/U
-
C#实现简单的计算器小功能
本文实例为大家分享了C#实现简单的计算器小功能的具体代码,供大家参考,具体内容如下 先来张效果图吧(5分钟写好,莫怪) 代码: 数字按钮绑定的是button_Clickd()方法 运算符按钮绑的是Button_Clickp()方法 思想:按下数字按钮,将数字按钮的值连接到textbox上,然后按下运算符判断是否为等于,并记录运算符的内容,以便后面做处理. using System; using System.Collections.Generic; using System.ComponentM
-
C#实现简易计算器小功能
本文实例为大家分享了C#实现简易计算器小功能的具体代码,供大家参考,具体内容如下 简易的登陆界面. 具有幻灯片效果.(picturebox time控件)计算器支持多位数,小数,括号的运算. 音乐是一个练习用的小控件(Listbox),可以选择指定的歌曲播放,直接忽略掉吧. 建立winform窗体 数字和运算符都为button,输入和输出的为textbox 基本代码 在所有button控件的click事件均为加上所对应的文本.例如:数字1所对应的button就为 textBox1.Text +=
-
python实现计算器小功能
本文实例为大家分享了python实现计算器功能的具体代码,供大家参考,具体内容如下 1. 案例介绍 本例利用 Python 开发一个可以进行简单的四则运算的图形化计算器,会用到 Tkinter 图形组件进行开发.主要知识点:Python Tkinter 界面编程:计算器逻辑运算实现.本例难度为初级,适合具有 Python 基础和 Tkinter 组件编程知识的用户学习. 2. 设计原理 要制作一个计算器,首先需要知道它由哪些部分组成.示意如下图所示. 从结构上来说,一个简单的图形界面,需要由界面
-
微信小程序实现计算器小功能
微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多人一样,遇到一些不懂的想问问别人,到贴吧去,一大堆广告,根本没人帮忙解决问题. 今天教一些刚入门的同学做一款计算器,如果C语言是编程的最佳入门语言,那计算器应该算得上是小程序的入门demo了,希望刚入门的同学们认真品味下面的代码,从wxml到js,再到wxss(页面的布局),每个代码都要弄懂他的意思 废话不多说,先上
-
JavaScript实现简易计算器小功能
本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> <!--页面布局--> <input type="text&
-
js实现简易计算器小功能
本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>