jQuery实现简单计算器功能
本文实例为大家分享了jQuery实现简单计算器的具体代码，供大家参考，具体内容如下
要求：
代码：
<html>
<head>
<meta charset="utf-8">
<title>我的计算器</title>
<script src="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计算器实现了连续计算功能
一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
-
jQuery实现计算器功能
本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st
-
基于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实现计算器功能的具体代码,供大家参考,具体内容如下 用jquery实现计算器对于我来说有三个难点 1.单纯的html页面,怎么实现计算2.显示屏用什么标签,又怎么把他显示出来3.要想实现删除,怎么把字符串最后一个字母删除 解决 1.看了别人的计算器,我发现eval()可以实现这个目的eg: alert(eval(“3+5”));没错,会弹出 8.2.看了几个人的博客,都是用span元素节点当显示屏,通过jQuery的html()函数来实现把内容显示出来.3.有两个
-
jQuery实现可以计算进制转换的计算器
本文实例为大家分享了jQuery实现可以计算进制转换的计算器,供大家参考,具体内容如下 在案例8的基础上增加了进制转换功能 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js">&l
-
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实现简单计算器的具体代码,供大家参考,具体内容如下 要求: 代码: <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"> </script> <script>
-
jQuery实现简单计算器
本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下 基本功能: 1.计算器换肤,目前有白色(默认色).绿色.蓝色.灰色.橙色几种颜色可供选择. 2.简单的加.减.乘.除.取余计算,注意由于时间有限,没有深入研究功能,每次运算后需点击清屏功能才能进行下一次正确的运算. 3.历史运算数据记录,此功能需要点击记录按钮后打开浏览器控制台查看. 4.退出功能,点击退出按钮,可实现计算器退出. 功能截图: 1.换肤(当前肤色为灰色).计算. 2.历史运算记录. 3.退出. 代
-
jQuery实现简单倒计时功能的方法
本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"
-
基于javascript实现简单计算器功能
本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <script> function calc(event){ // test //window.alert(event.value); var val = new String(event.value); // clear space val = val.trim(); var res = document.getEl
-
Android开发实现的简单计算器功能【附完整demo源码下载】
本文实例讲述了Android开发实现的简单计算器功能.分享给大家供大家参考,具体如下: 这个Android计算器虽然还有点小bug,不过简单的计算功能还是没问题的哦: 先上图看效果 比较简单,所以我就没怎么写注释,应该一看就能明白的 有不明白的可以发信问我 先贴MainActivity.java代码 package com.example.calculator; import android.app.Activity; import android.os.Bundle; import andro
-
JavaScript实现的超简单计算器功能示例
本文实例讲述了JavaScript实现的超简单计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS计算器</title> <script type="text/javascript&qu
-
Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器 计算器效果图 首先搭建计算器的面板: 计算器面板结构 建造一个继承于wx.Frame的frame,在init属性函数中搭建面板 class CalcFrame(wx.Frame):#建造一个继承于wx.Frame的frame def __init__(self,title): wx.Frame.__init__ (self,None,-1,title, pos=(100,300
-
C语言实现简单计算器功能(1)
本文为大家分享了C语言实现简单计算器功能的具体方法,供大家参考,具体内容如下 这几天一直上控制语句,在学完if.switch和循环语句后,为了巩固所学知识点,想给学生出一道简单的计算器程序.题目如下: 通过所学的知识(选择语句.循环语句)完成一个简单的计算器编程,要求不许抄袭,只能用自己所学的知识点,不可引用网上自己的不懂的程序. 要求的格式如下图: 要求以这样的一种格式进行输出,并能通过选择完成不同的功能. 如:选择1,完成整数相加功能,算完后又能回到该页面. 经过分析,我简单的写了一段代码,
-
C语言实现简单计算器功能(2)
本文接着上一篇C语言实现简单计算器功能(1)继续学习. 之前用switch语句完成了一个简单计算器的功能,下面我给大家用if语句和while循环语句再实现一个简单计算器的编程. 要求: 实现简单的计算器,具体代码如下: #include <stdio.h> // 头文件 void main() { char a = 0; // 变量声明并初始化 int x, y; // 变量声明 int result = 0; char b = 37; while(1) // whiel循环实现反复在计算器系
-
Android Studio实现简单计算器功能
本文实例为大家分享了Android Studio实现简单计算器功能的具体代码,供大家参考,具体内容如下 程序步骤: (1)在布局文件定义一些计算器界面的文本框,按钮等组件. (2)在Activity中获取组件实例. (3)通过swtich函数,判断输入的内容,并进行相应操作,通过getText()获取文本内容,setText()显示. 程序代码设计: 一.界面布局 参考书本例2-9,应用网格布局设计计算器界面,在设计区域设置一个6行4列的网格布局,第一行为显示数据的文本标签,第二行为清除数据的按