jQuery实现简单计算器功能

更新时间：2022年07月21日 10:49:18 作者：梦nine

这篇文章主要为大家详细介绍了jQuery实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现简单计算器的具体代码，供大家参考，具体内容如下

要求：

代码：

<html>
<head>
? ? <meta charset="utf-8">
? ? <title>我的计算器</title>
?? ?<script src="http://9i0i.com/pic.php?p=jquery-1.9.1.min.js"> </script>
? ? <script>
?? ? ? ?
? ? ? ? function myck(type) {
? ? ? ? ? ? var num1 = jQuery("#num1");
? ? ? ? ? ? var num2 = jQuery("#num2");
? ? ? ? ? ? var ?resultDiv=jQuery("#resultDiv");
? ? ? ? ? ? if(type==1) {
? ? ? ? ? ? ? ? // 1.非空判断
? ? ? ? ? ? ? ? if (num1.val() == "") {
? ? ? ? ? ? ? ? ? ? alert("请先输入数字1");
? ? ? ? ? ? ? ? ? ? num1.focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (num2.val() == "") {
? ? ? ? ? ? ? ? ? ? alert("请先输入数字2");
? ? ? ? ? ? ? ? ? ?num2.focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 2.加法操作
? ? ? ? ? ? ? ? var total = parseInt(num1.val()) + parseInt(num2.val());
? ? ? ? ? ? ? ? // 3.将结果展现在最下面 div 中
? ? ? ? ? ? ? ? resultDiv.html(
? ? ? ? ? ? ? ? ? ? "<h2>最终执行结果：<strong style='color: red;'>" + total + "</strong></h2>");

? ? ? ? ? ? }else if(type==2){
? ? ? ? ? ? ? ? // 1.非空判断
? ? ? ? ? ? ? if (num1.val() == "") {
? ? ? ? ? ? ? ? ? ? alert("请先输入数字1");
? ? ? ? ? ? ? ? ? ? num1.focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (num2.val() == "") {
? ? ? ? ? ? ? ? ? ? alert("请先输入数字2");
? ? ? ? ? ? ? ? ? ?num2.focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 2.减法操作
? ? ? ? ? ? ? ? var sub = parseInt(num1.val()) - parseInt(num2.val());
? ? ? ? ? ? ? ? // 3.将结果展现在最下面 div 中
? ? ? ? ? ? ? ? resultDiv.html(
? ? ? ? ? ? ? ? ? ? "<h2>最终执行结果：<strong style='color: #ff0000;'>" + sub + "</strong></h2>");
? ? ? ? ? ? }else if(type==3){
? ? ? ? ? ? ? ? ?if (num1.val() == "") {
? ? ? ? ? ? ? ? ? ? alert("请先输入数字1");
? ? ? ? ? ? ? ? ? ? num1.focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (num2.val() == "") {
? ? ? ? ? ? ? ? ? ? alert("请先输入数字2");
? ? ? ? ? ? ? ? ? ?num2.focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 2.乘法操作
? ? ? ? ? ? ? ? var mul = parseInt(num1.val()) * parseInt(num2.val());
? ? ? ? ? ? ? ? // 3.将结果展现在最下面 div 中
? ? ? ? ? ? ? ? resultDiv.html("<h2>最终执行结果：<strong style='color: red;'>" + mul+ "</strong></h2>");
? ? ? ? ? ? }
? ? ? ? ? ? else if(type==4){
?? ??? ??? ? ? ?
? ? ? ? ? ? ? ? num1.val("");
? ? ? ? ? ? ? ? num2.val("");
? ? ? ? ? ? ? ? resultDiv.html("");
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
? ? <h1>计算器</h1>
? ? 数字1：<input id="num1" type="number"> <p></p>
? ? 数字2：<input id="num2" type="number"> <p></p>
? ? <div>
? ? ? ? <input type="button" value=" 加 法 " onclick="myck(1)">
? ? ? ? <input type="button" value=" 减 法 " onclick="myck(2)">
? ? ? ? <input type="button" value=" 相 乘 " onclick="myck(3)">
? ? ? ? <input type="button" value=" 清 空 " onclick="myck(4)">
? ? </div>
? ? <div id="resultDiv" style="margin-top: 50px;">

? ? </div>
</div>
</body>
</html>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

JQuery中Bind()事件用法分析
这篇文章主要介绍了JQuery中Bind()事件用法,实例分析了Bind()事件的功能、特点与绑定事件时的使用技巧,需要的朋友可以参考下
2015-05-05
Jquery基础教程之DOM操作
大家都知道dom是一种与浏览器、平台、语言无关的接口，使用dom接口可以很轻松访问页面中所有的标准组件，本篇文章主要给大家讲解jquery基础教程之dom操作，有需要的朋友可以参考下
2015-08-08
Jquery 模拟用户点击超链接或者按钮的方法
在Jquery中可以通过选中a标签使用trigger方法定义事件即可模拟用户点击超链接或者按钮，感兴趣的朋友操作下
2013-10-10
lyhucSelect基于Jquery的Select数据联动插件
lyhucSelect基于Jquery的Select数据联动插件，需要的朋友可以参考下。
2011-03-03
学习从实践开始之jQuery插件开发菜单插件开发
从软件到网站，菜单可以说是无处不在。在传统应用软件开发中，一般都有现成的控件可以使用；但是在网页开发时，基本上要靠开发人员自己动手设计
2012-05-05
JQuery?AJAX操作代码
jQuery底层AJAX实现，其返回其创建的XMLHttpRequest对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性，这篇文章给大家介绍JQuery AJAX操作代码，感兴趣的朋友一起看看吧
2022-12-12
如何编写jquery插件
编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件
2017-03-03
当jQuery遭遇CoffeeScript的时候使用分享
虽然对ruby不太了解，但是看到CoffeeScript诗一般的代码确实被怔住了，和jQuery之前给我的感觉是如此的相似——都是一个字，美，当jQuery遭遇到CoffeeScript时，会蹦出什么样的火花呢？
2011-09-09
jQuery+json实现动态创建复杂表格table的方法
这篇文章主要介绍了jQuery+json实现动态创建复杂表格table的方法,涉及jQuery针对json数据的解析与表格动态创建操作相关技巧,需要的朋友可以参考下
2016-10-10
EasyUI为Numberbox添加blur事件的方法
这篇文章主要介绍了EasyUI为Numberbox添加blur事件的方法 ,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03