jQuery_计算器实例
知识点：
fadeIn（）---计算器界面载入淡入效果
hover（）---鼠标移入移出某个元素时触发的事件
click（）---鼠标单击事件
css（）---对元素样式的操作
val（）---获取表单元素的值
text（）---对元素div内容的处理
substring（start,end）---从start到end截取字符串的子串
indexOf（）--字符串索引函数（在字符串中查找指定字符串，返回值是目标字符串在字符串的开始位置，返回-1表示没找到）
.length --- 获取字符串的长度
var $temp1 = parseFloat(str);---字符类型的转换
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>soulsjie jQuery制作计算器</title>
<script src="libs/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="css/soulsjie.css" type="text/css" />
</head>
<body>
<div class="content">
<div class="write_diban">
<input type="text" value="0" class="view"/>
<div class="opp">
<div class="bk">bk</div>
<div class="cl">C</div>
</div>
<div class="key">
<div class="bt7">7</div>
<div class="bt8">8</div>
<div class="bt9">9</div>
<div class="chu">/</div>
<div class="bt4">4</div>
<div class="bt5">5</div>
<div class="bt6">6</div>
<div class="chen">*</div>
<div class="bt1">1</div>
<div class="bt2">2</div>
<div class="bt3">3</div>
<div class="chen">-</div>
<div class="bt0">0</div>
<div class="dian">.</div>
<div class="jia">+</div>
<div class="deng">=</div>
</div>
<div class="massage"></div>
</div>
</div>
<!--soulsjie 2017.11.10-->
</body>
<script src="js/soulsjie.js"></script>
</html>
css:
.content{
margin:100px auto;
background:#2b3037;
height:500px;
width:300px;
box-shadow: 10px 10px 5px #888888;
padding:5px;
display:none;
}
.write_diban{
height:100%;
width:100%;
margin:0 auto;
background:#d9e4f1;
border:1px solid #f00;
border-radius:10px;
text-align:center;
}
.write_diban > input{
margin-top:10px;
height:50px;
width:285px;
background:#d9e4f1;
border:1px solid #8898ab;
border-radius:5px;
font-size:20px;
font-weight:bold;
text-align:right;
}
.key div ,.opp div{
float:left;
background:#f00;
margin-left:8px;
margin-top:8px;
cursor:pointer;
clolr:#1e395b;
font-size:16px;
background:#d9e4f1;
border:1px solid #8898ab;
border-radius:10px;
line-height: 45px;
}
.opp div{
width:45%;
height:45px;
}
.key div {
width:63px;
height:45px;
}
js:
$(document).ready(function(){
$(".content").fadeIn(2000);
});
$(".key div,.opp div").hover(function(){
$(this).css({"background":"#f00","color":"#fff","fontSize":"26px"});
},function(){
$(this).css({"background":"#d9e4f1","color":"#000","fontSize":"16px"});
});
var $num="";
var $app_num=0;//运算符操作标记0表示无运算1加法。2减法。3乘法。4除法
//数字键被按下时向显示框中添加内容
$(".key div").click(function(){
$num+=$(this).text();
//将输入追加到显示框
$(".view").val($num);
});
//退格键处理
$(".bk").click(function(){
var $aa=$(".view").val().substring(0, $(".view").val().length-1)
$(".view").val($aa);
});
//清空显示框
$(".cl").click(function(){
$num="";
$(".view").val($num);
});
//等号被按下时
$(".deng").click(function(){
//错误
//用户的操作执行响应的计算
if($num.indexOf("+")!=-1){ //用户的操作是计算加法
$app_num=1;
}
if($num.indexOf("-")!=-1){ //用户的操作是计算加法
$app_num=2;
}
if($num.indexOf("*")!=-1){ //用户的操作是计算加法
$app_num=3;
}
if($num.indexOf("/")!=-1){ //用户的操作是计算加法
$app_num=4;
}
switch($app_num)
{
case 0:
$num="";
$(".view").val($num);
alert("输入有误");
break;
case 1: //执行加法操作
//在字符串中将多余的=号截取
var $aa=$(".view").val().substring(0, $(".view").val().length-1)
num_arr=$aa.split("+");
//将分割后的两个字符串进行类型转换
var $temp1 = parseFloat(num_arr[0]);
var $temp2 = parseFloat(num_arr[1]);
//计算结果
var $resout=$temp1+$temp2;
$num+=$resout;
//输出结果
$(".massage").html($num);
$num="";
$(".view").val($num);
break;
case 2: //执行减法操作
//在字符串中将多余的=号截取
var $aa=$(".view").val().substring(0, $(".view").val().length-1)
num_arr=$aa.split("-");
//将分割后的两个字符串进行类型转换
var $temp1 = parseFloat(num_arr[0]);
var $temp2 = parseFloat(num_arr[1]);
//计算结果
var $resout=$temp1-$temp2;
$num+=$resout;
//输出结果
$(".massage").html($num);
$num="";
$(".view").val($num);
break;
case 3: //执行乘法操作
//在字符串中将多余的=号截取
var $aa=$(".view").val().substring(0, $(".view").val().length-1)
num_arr=$aa.split("*");
//将分割后的两个字符串进行类型转换
var $temp1 = parseFloat(num_arr[0]);
var $temp2 = parseFloat(num_arr[1]);
//计算结果
var $resout=$temp1*$temp2;
$num+=$resout;
//输出结果
$(".massage").html($num);
$num="";
$(".view").val($num);
break;
case 4: //执行除法操作
//在字符串中将多余的=号截取
var $aa=$(".view").val().substring(0, $(".view").val().length-1)
num_arr=$aa.split("/");
//将分割后的两个字符串进行类型转换
var $temp1 = parseFloat(num_arr[0]);
var $temp2 = parseFloat(num_arr[1]);
//计算结果
var $resout=$temp1/$temp2;
$num+=$resout;
//输出结果
$(".massage").html($num);
$num="";
$(".view").val($num);
break;
}
});
jQuery_计算器实例的更多相关文章
- JavaScript实例技巧精选(10)—计算器实例2
>>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的另一个计算器实例,核心代码如下: <script language=" ...
- JavaScript实例技巧精选(9)—计算器实例1
>>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的一个计算器实例,核心代码如下: <script language="J ...
- Python全栈--6.1-match-search-findall-group(s)的区别以及计算器实例
match.search.findall.group(s) 区别 import re # match findall经常用 # re.match() #从开头匹配,没有匹配到对象就返回NONE # r ...
- 原生javascript开发计算器实例
计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力. 本实例详细分析一个js计算器的开发步骤,学习本教程时最好先具备一些基础的js知识. 计算器包括 ...
- php简易计算器实例
<html> <head> <title>PHP实现简单计算器</title> <meta http-equiv="Content-Ty ...
- Java实例---计算器实例
1.计算器上的键的显示名字 1.0 继承JFrame类 public class Calculate extends JFrame { } 1.1定义常量 /** 计算器上的键的显示名字 */ pub ...
- jsp+javaBean 计算器实例
package com.wzh.test.domain; import java.math.BigDecimal; public class CalculatorBean { private Stri ...
- JavaScript实例技巧精选(11)—计算器实例3
>>点击这里下载完整html源码<< 界面如下 将以下代码插入<body></body>中 <FORM NAME="Calc" ...
- vue实现网页简单计算器实例代码
效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- 解题报告：hdu 2073 无限的路
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2073 Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接 ...
- Java中的流(1)流简介
简介 1.在java中stream代表一种数据流(源),java.io的底层数据元.(比作成水管)2.InputStream 比作进水管,水从里面流向你,你要接收,read3.OutputStream ...
- 【图片匹配】--- SIFT_Opencv3.1.0_C++_ubuntu
最近在捣鼓图片相似性匹配算法.这里先说一点必要的题外话: 如果是在同一个object不同角度拍摄的多张图片中,使用SIFT可以有不错的效果: 如果是寻找类别相同的图片(可能不是同一object),SI ...
- 417 Pacific Atlantic Water Flow 太平洋大西洋水流
详见:https://leetcode.com/problems/pacific-atlantic-water-flow/description/ C++: class Solution { publ ...
- 萌新--关于vue.js入门及环境搭建
十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...
- 对象输入输出流ObjectInputStream、ObjectOutputStream（对象序列化与反序列化）
对象的输入输出流 : 主要的作用是用于写入对象信息与读取对象信息. 对象信息一旦写到文件上那么对象的信息就可以做到持久化了 对象的输出流: ObjectOutputStream 对象的输入流: Ob ...
- Ubuntu14.04环境下java web运行环境搭建
1.jdk安装 将下载好的安装包上传至/home目录解压 tar -zxvf jdk-8u71-linux-x64.tar.gz 执行 vim /etc/profile 在末尾添加java环境变量(J ...
- 整合Activiti Modeler到业务系统（或BPM平台）
http://www.kafeitu.me/activiti/2013/03/10/integrate-activiti-modeler.html 1. 为什么要整合 Activiti 5.10版本把 ...
- 【东软实训】SQL多表链接
如果一个查询同时涉及两个以上的表,则称之为链接查询,链接查询是关系数据库中最主要的查询,主要包括等值链接查询.非等值链接查询.自身链接查询.外链接查询和复合条件链接查询. 这篇博文我们来对多表链接进行 ...
- url编码函数encodeURI和encodeURIComponent
var url = "http://www.wrox.com/illegal value.html#start";encodeURIComponent(url) //" ...