简易计算机在线使用方法,jQuery实现简单在线计算器方法

喜欢ヅ旅行 2022-10-12 05:39 160阅读 0赞

本文主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

先来看看运行效果图：

![8bd9e50ca9d9b182afce9e653efba23f.gif][]

完整代码如下：/p>

"http://www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery计算器

.p\{

border:green 1px;

border-style:solid;

width:300px;

text-align:center;

\}

span\{

background-color:\#CCCCCC;

font-size:32px;

font-family:"微软雅黑";

\}

.input\{

border: 1px solid \#6666FF;

\}

\-->

border:green 1px;

border-style:solid;

width:300px;

text-align:center;

\}

span\{

background-color:\#CCCCCC;

font-size:32px;

font-family:"微软雅黑";

\}

.input\{

border: 1px solid \#6666FF;

\}

$(document).ready(function() \{//传说中的ready

$("form p input:text").addClass("input");//找到form里面p包含的input标签类型为text的元素 jQuery强悍

var num1,num2;

$("\#jia").click(function() \{

num1=parseFloat($("\#num1").val());

num2=parseFloat($("\#num2").val());

$("\#reset").val(num1+num2);

\});

$("\#jian").click(function() \{

num1=parseFloat($("\#num1").val());

num2=parseFloat($("\#num2").val());

$("\#reset").val(num1-num2);

\});

$("\#cheng").click(function() \{

num1=parseFloat($("\#num1").val());

num2=parseFloat($("\#num2").val());

$("\#reset").val(num1\*num2);

\});

$("\#chu").click(function() \{

num1=parseFloat($("\#num1").val());

num2=parseFloat($("\#num2").val());

$("\#reset").val(num1/num2);

\});

\});

// -->

jQuery简单计算器

第一个数:

第二个数:

结果:

相关推荐：

[8bd9e50ca9d9b182afce9e653efba23f.gif]: /images/20221005/2c5a94b81664474abfd6b1c6adee475e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关使用JSP实现简易计算器

文章目录题目方法一方法二方法三方法四题目编写JSP程序实现简易计算器。要求：输入“第一个参数”，选择运算类型（+，-，

系统管理员/ 2023年09月23日 14:14/ 0 赞/ 66 阅读

相关使用JavaScript实现简易计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

蔚落/ 2022年12月13日 04:54/ 0 赞/ 277 阅读

相关 java实现简易计算器使用方法

简易计算器 import java.util.Scanner; //简易计算器用方法 public class JiSuanQ

布满荆棘的人生/ 2022年11月03日 04:28/ 0 赞/ 205 阅读

相关 Vue实现简易计算器

文章目录简易计算器案例 1. HTML 代码结构 2. Vue实例代码： 3. 全部代码简易计算器案例 ![在这

刺骨的言语ヽ痛彻心扉/ 2022年10月23日 08:16/ 0 赞/ 234 阅读

相关简易计算机在线使用方法,jQuery实现简单在线计算器方法

本文主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。先来看看运行效

喜欢ヅ旅行/ 2022年10月12日 05:39/ 0 赞/ 161 阅读

相关怀孕计算机在线,【孕期计算器在线查询_孕期计算器在线查询专题】- 天鹅到家...

许多要想小宝宝的夫妇都是想办法去测算女士的排卵期，本文对你说该如何计算排卵期。如何计算排卵期？针对月经规律的人，排卵的時间基础固定不动。一般状况下患者的经期下半叶，也

た入场券/ 2022年10月09日 02:32/ 0 赞/ 155 阅读

相关简易计算器_两种方法

一、一般的方法 include<stdio.h> include<windows.h> pragma waring (disable:4996)/

红太狼/ 2022年06月05日 04:43/ 0 赞/ 201 阅读

相关 JavaScript实现简易计算器

![70][] <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2022年05月21日 02:56/ 0 赞/ 294 阅读

相关 javascript实现简易计算器

javascript实现简易计算器，只有两个input输入框，简单实现加减乘除： <!DOCTYPE html> <html> <head>

小灰灰/ 2022年05月17日 07:34/ 0 赞/ 367 阅读

相关 Java实现简易计算器

一，Calculator -- 表达式解析及计算 package com.test; / @author yangpan @

淡淡的烟草味﹌/ 2022年04月06日 03:40/ 0 赞/ 324 阅读