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"> < ...
随机推荐
- android将对象序列化到文件：直接写文件与用Serializable接口的对比
1.用文件读写1024个对象的日志 10-09 16:12:44.493 6385-6385/com.example.tt.downtest D/Serializable_TAG: write 102 ...
- CentOS安装GlassFish4.0 配置JDBC连接MySQL
转自:http://linux.it.net.cn/CentOS/course/2014/0724/3319.html 版本glassfish-4.0.zip 1.解压,拷贝到指定安装路径 unz ...
- ASP.NET URLRewriter重写
URLRewriter重写是微软官方出的第三方重写插件 下载地址:http://download.csdn.net/detail/ysn1314/5421587 下载后在项目中添加引用,然后再配置文件 ...
- thinkphp3.2.3连接sqlserver 2008 R2 数据库
环境: 操作系统——win7 64位旗舰版 PHP——thinkphp 3.23 数据库——Microsoft SQL Server 2008 R2 需要用到的软件: 步骤: 1.搜索SQLSRV30 ...
- 设置电脑IP
1.首先在Win7桌面上找到“网络”入口,如下图: 进入Win7网络 2.进入网络之后我们再点击顶部的“网络共享中心”,如下图: 进入Win7网络共享中心 3.进入Win7网络共享中心之后,我 ...
- LN : leetcode 123 Best Time to Buy and Sell Stock III
lc 123 Best Time to Buy and Sell Stock III 123 Best Time to Buy and Sell Stock III Say you have an a ...
- 安装JPype时出现的 Unable to find vcvarsall.bat
解决方案,在网上找到的,mark一下,亲测有效 C:/Python31/Lib/distutils目录下的msvc9compiler.py中 修改MSVCCompiler函数:vc_env = que ...
- 浏览器和ES5的介绍
浏览器的组成 : shell(浏览器的外壳).内核(渲染引擎.js引擎)主流浏览器及其内核: IE tritent(IE9及以下,IE10及以上用webkit) ...
- TabLayout+ViewPager实现标签卡效果
转载请注明原文地址:http://www.cnblogs.com/yanyojun/p/8082391.html 代码已经上传至Github:https://github.com/YanYoJun/V ...
- mysql 判断字符串是否为其他字符串的子集
1.mysql 提供单个用逗号隔开判断某个字符串是否包含在其他字符串的之内:FIND_IN_SET('需要匹配的字符串','源字符串'); demo: select FIND_IN_SET('111' ...