用jquery编写简易计算器

一、jq选择器

1，基本选择器（#id ，.class ，element ）
2，层次选择器（祖先后代，父子）
（简易计算器主要了解基本选择器和层次选择器）

二、jq的html,val,css,attr

html：设置与获取内容

<span>dxxxx</span>
<div>aaaa</div>
<button>ok</button>

val：设置与获取值

<input type="text" value="123">

css：设置与获取样式

//1.css("样式名","样式值");
css("border","2px solid #ff0000");
//2.css({"样式名"："样式值",.....})
css({"border":"1px solid black","background":"#ff0000"})

attr：设置与获取元素的属性值

<input type="text" value="123" m=10>
<a href="#">sohu</a>

attr("href","http://www.sohu.com")

三、jq事件绑定

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

$("选择器").on("click",function(){$(this).html();//$(this)是个转换，将this表示的dom对象转为jquery对象
})

在写计算机前首先导入jq文件

下载地址：https://www.jq22.com/jquery-info122

以下为简易计算机代码：

1，html打出计算机的边框：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px" align="center"><tr><td colspan="4"><input type="text"  id="result" value="0" /></td></tr><tr><td><button class="op">+</button></td><td><button class="op">-</button></td><td><button class="op">*</button></td><td><button class="op">/</button></td></tr><tr><td><button class="num">1</button></td><td><button class="num">2</button></td><td><button class="num">3</button></td><td><button class="num">4</button></td></tr><tr><td><button class="num">5</button></td><td><button class="num">6</button></td><td><button class="num">7</button></td><td><button class="num">8</button></td></tr><tr><td><button class="num">9</button></td><td><button class="num">0</button></td><td><button id="clearbtn">清除</button></td><td><button id="computebtn">=</button></td></tr></table></body>
</html>

2，导入jq

<script type="text/javascript" src="js/jquery.min.js"></script>

3，编写CSS

<style type="text/css">button{width:100px;height:100px;font-size: 25px;text-align: center;line-height: 100px;}#result{width: 100%;height: 40px;line-height: 30px;background: #000;color:#fff ;text-align: right;font-size: 40px;;}</style>

4，添加事件绑定

<script type="text/javascript">var a=0;//运算第一个数var op=0;//存放运算符var b;$(".num").on("click",function(){ //0-9绑定事件x=$("#result").val();if(x=="0"){ //判断计算机上的第一个数是否为0，如果为0，就替换为点击的数字。不为0，往后面添加点击的数字。t=$(this).html();$("#result").val(t);}else{t=$(this).html();$("#result").val(x+t);}})$(".op").on("click",function(){x=$("#result").val();t=$(this).html();a=x;op=t;$("#result").val(0);//将第一次输入的值清空})$("#computebtn").on("click",function(){b=$("#result").val();c=0;switch (op){//判断操作符case "+":c=parseInt(a)+parseInt(b);//parseInt() 函数可解析一个字符串，并返回一个整数。break;case "-":c=parseInt(a)-parseInt(b);break;case "*":c=parseInt(a)*parseInt(b);break;case "/":c=parseInt(a)/parseInt(b);break;default:c=0;}$("#result").val(c);})$("#clearbtn").on("click",function(){c=0;$("#result").val(c);})</script>

5，效果呈现

用jquery编写简易计算器相关推荐

用Android Studio 编写简易计算器
用Android Studio 编写简易计算器界面设计功能的實現其他配置 1.頂部標題 2.修改測試这是用Android Studio编写的简易计算器 .功能主要是实现简单的加减操作,以及比 ...
基于VC6.0用MFC编写简易计算器
功能介绍: 1> 标准型:能进行加.减.乘.除四则运算,具有清空.回退功能,还附加了添加小数点.化为百分数的功能. 2> 科学型:新增了求三角函数(sin.cos.tan).反三角函数(a ...
java编写简易计算器_java实现简易计算器功能
本文为大家分享了java实现简易计算器功能,具体内容如下题目: 编写一个模拟计算器的程序.在面板中添加一个文本框(显示按键及运算结果). 10个数字按钮(0~9).4个运算按钮(加.减.乘.除).一 ...
用C语言编写简易计算器
用C语言中的switch语句实现简易的四则运算计算器 #include<stdio.h> int main() {double number1=0.0;double number2=0.0 ...
Java Web中用Servlet编写简易计算器
运行效果: 运行结果: 文件目录: CalculateServlet.java中的代码 package com.lyq.servlet;import java.io.IOException; impo ...
如何用python做计算_如何运用Python编写简易计算器？
分3步吧使用Qt-Designer 设计UI 将UI文件转换成py文件实现加减乘除的业务逻辑效果如下: 附代码: CalculatorUI.py # -*- coding: utf-8 -*- # ...
Java编写简易计算器
目录 1.功能: 2.结果: 3.代码: 1.功能: (1)"C":将之前输入的数字,计算结果等功能全部归零: (2)"CE":清除键,清除当前输入的数据或符号 ...
用JAVA编写简易计算器界面
import javax.swing.*; public class Demo {/*** 计算器界面* @author M4ndy*/public static void main(String[] ...
vfp制作简单计算机,VF编写简易计算器 -电脑资料
(1)建立应用程序用户界面, 选择"新建"表单,进入表单设计器,增加一个文本框控件Textl.一个标签控件Label1和一个命令按钮组CommandGroup1,并将命令按钮组的B ...
c语言switch设计计算器,求助。。关于用switch编写简易计算器
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 case'1': printf("请输入要计算的数字\n"); scanf("%lf",&a); scan ...