jquery实现计算器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<title>My JSP ‘JqueryTest.jsp‘ starting page</title>
<script src="JqueryTest/jquery-1.3.2.min.js"></script>
<style>
td{width:30;height:30;text-align:center;border:1;border-style:solid;border-color:#000;}
</style>
<script>
window.onload=function(){
var $tds=$(‘td:gt(0)[class!=equal][class!=clear]‘);
$tds.click(function(){
var display=$(‘.screen‘).html();
$(‘.screen‘).html(display+this.innerHTML);//$(‘this‘).html();//html()里面空则为读,不为空则为写入
});
$(‘.clear‘).click(function(){
$(‘.screen‘).html("");
});
$(‘.equal‘).click(function(){
var display=$(‘.screen‘).html();
var value=eval(display);//eval进行逻辑运算
$(‘.screen‘).html(display+"="+value);
});
}
</script>
</head>

<body>
<table>
<tr><td colspan=4 class="screen"></td></tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>*</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>+</td>
</tr>
<tr>
<td>.</td>
<td class="clear">c</td>
<td class="equal">=</td>
<td>-</td>
</tr>
</table>
</body>
</html>

时间: 2024-11-13 10:37:16

jquery实现计算器的相关文章

jQuery_计算器实例

知识点: fadeIn()---计算器界面载入淡入效果 hover()---鼠标移入移出某个元素时触发的事件 click()---鼠标单击事件 css()---对元素样式的操作 val()---获取表单元素的值 text()---对元素div内容的处理 substring(start,end)---从start到end截取字符串的子串 indexOf()--字符串索引函数(在字符串中查找指定字符串,返回值是目标字符串在字符串的开始位置,返回-1表示没找到) .length --- 获取字符串的长

jQuery/javascript实现简单网页计算器

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <script src="jquery.js"></script> 6 7 <style type="text/css"> 8 table{background-color:pink;width:300px;he

Java(随笔)——利用HTML,CSS,JavaScript,JQuery编写的简易计算器

一.利用刚学过的前端知识做一个简易的计算器里边使用到了HTML,CSS,JavaScript以及JQuery的知识代码如下:(1)利用CSS设计了计算器外形样式:(2)利用JavaScript实现了建议计算器的功能:代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <link rel="styl

使用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实现一个简单的计算器

现在是下午2点50分,眼睛和肩膀都有点酸,脑子有点木. 整理下做计算器的过程和结果: 1,表格布局按键和区域: 一个6行的表格.第一和第二行分别是两个type=“text”的<input>,宽度占据了四列的宽度,colspan="4",分别是输入和输出的显示行.第三行有两列,分别是清零和退位按键.给每个按键标记id和value. 2,脚本写的时候思路真的很重要,代码的逻辑块很凌乱,结构和可读性差,进入状态就得一会功夫啊. 2.1按照按键分类: 如果按下小数点,但输入中已经包

jQuery源代码学习之六——jQuery数据缓存Data

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解

JQuery 学习总结及实例 !! (转载)

出自 new:http://www.jianshu.com/users/1967b163cb61/latest_articles 1.JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQ

10款超实用的jQuery插件大合集

1.jQuery cxSlide实现的三款多功能大气焦点图轮播 jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码.该实例中的三款焦点图轮播代码都适合于任意网站,需要此款代码的朋友们可以前来下载使用. 在线演示 源码下载 2.jQuery多功能弹出层插

今天学习了在一般处理程序中写一个计算器

今天看了看前面的javascript以及学习的jquery,感觉刚开始学习时间就赶得比较紧,练习是做啦,基础的知识都是知道的,但是在写一些小小的程序时间还是陌生,感觉练习的还是很不够的,其实怎么说那,想好好的学习还是把他们使用到项目中练习就会学习的更快些吧,然后我又做啦一个增删改查的一般处理程序,但是还没有总结好,现在就简单的先总结一个小小的计算器使用html和ashx来实现一下其功能,如下所示: 一.html样式 <script> //@Script; </script> <