jQuery网页计算器
HTML部分
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" / href="1.css">
</head>
<body>
<div id="box">
<input type="text" value="0" id="result" readonly="readonly" />
<button class="btn" οnclick="symbol('÷')">÷</button>
<button class="btn" οnclick="negation()">+/-</button>
<button class="btn" οnclick="symbol('x')">x</button>
<button class="btn" οnclick="clean()">C</button>
<button class="btn" οnclick="input('7')">7</button>
<button class="btn" οnclick="input('8')">8</button>
<button class="btn" οnclick="input('9')">9</button>
<button class="btn" οnclick="symbol('-')">-</button>
<button class="btn" οnclick="input('4')">4</button>
<button class="btn" οnclick="input('5')">5</button>
<button class="btn" οnclick="input('6')">6</button>
<button class="btn" οnclick="symbol('+')">+</button>
<button class="btn" οnclick="input('1')">1</button>
<button class="btn" οnclick="input('2')">2</button>
<button class="btn" οnclick="input('3')">3</button>
<button class="btn" οnclick="symbol('%')">%</button>
<button class="btn" οnclick="input('0')">0</button>
<button class="btn" οnclick="point()">.</button>
<button class="btn" οnclick="sum()">=</button>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="1.js" type="application/javascript"></script>
</body>
CSS部分
body {
margin: 50px;
}
#box {
border: 1px solid #ccc;
border-radius: 4px;
width: 175px;
height: 285px;
padding: 10px;
margin: 0 auto;
}
#result {
width: 161px;
margin-bottom: 10px;
height: 30px;
border: 1px solid #cccccc;
border-radius: 2px;
background-color: white;
color: #666666;
padding: 0 5px;
text-align: right;
}
#box>.btn {
width: 40px;
height: 40px;
border: 1px solid #cccccc;
border-radius: 2px;
cursor: pointer;
background-color: white;
font-weight: bold;
color: #666;
margin-bottom: 10px;
}
#box>.btn:hover {
color: white;
background-color: #666;
}
#box>.btn:last-of-type {
width: 85px;
}
js部分
//输入数值
function input(param) {
let inputVal = $("#result").val();
let lastNum = getlastNum(inputVal);
if (parseInt(lastNum) === 0 && !/0\./.test(lastNum)) { //第一个数是0，替代,但是要排除0.的情况
$("#result").val(inputVal.length > 1 ? (inputVal.substring(0, inputVal.length - 1) + param) : param);
} else { //第一个数不是0，拼接
$("#result").val(inputVal + param);
}
}
//输入运算符
function symbol(param) {
let inputVal = $("#result").val();
$("#result").val(inputVal + " " + param + " ");
}
//清空，返回为0
function clean() {
$("#result").val("0")
}
//取到输入的最后一个数
function getlastNum(str) {
return str.substring(str.lastIndexOf(" "));;
}
//输入.
function point() {
let inputVal = $("#result").val();
let lastNum = getlastNum(inputVal);
if (lastNum.indexOf('.') > -1) { //不允许存在多个点
return
} else {
$("#result").val(inputVal + '.');
}
}
//正负号
function negation() {
let inputVal = $("#result").val();
let lastNum = getlastNum(inputVal).trim();
let prevNum = inputVal.substring(0, inputVal.lastIndexOf(" "));
if (lastNum.indexOf('-') == -1) {
lastNum = " -" + lastNum;
} else {
lastNum = " " + lastNum.trim().substring(1);
}
$("#result").val(prevNum + lastNum);
}
//计算结果
function sum() {
try {
//将x÷运算符转换成*/
let inputVal = $("#result").val().replace("x", "*").replace("÷", "/");
let result = eval(inputVal);
$("#result").val(result);
} catch (e) {
alert("运算异常");
$("#result").val("0");
}
}
jQuery网页计算器相关推荐
- 使用jquery制作计算器_如何使用jQuery对计算器进行编程
使用jquery制作计算器 Previously, I showed you how to use CSS border-radius property to create the following ...
- 用HTML，CSS，JS制作一个网页计算器
今天分享一个自己做的网页计算器,我个人感觉,虽然不精简,但是应该涉及到的东西都有了,所以分享出来,那我直接上代码了. <html> <head><meta charset ...
- php与web网页计算器,php+html实现网页计算器
+ - * / % 设置第一行(输入行) function caculate($numb1,$numb2,$method) { switch($method) { case '+': return $ ...
- 基于JavaScript实现网页计算器
基于JavaScript的网页计算器 基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能 界面如下: 代码如下: 有兴趣的朋友欢迎 ...
- java jsp网页计算器_JSP实现计算器功能（网页版）
jsp实现网页计算器代码如下:只有两个jsp页面 myCal.jsp如下: String path = request.getContextPath(); String basePath = requ ...
- css广告跟随,jQuery网页右侧广告跟随滚动代码分享
jQuery广告跟随滚动的两种方法都分享给大家,希望对大家的学习有所启发. 方法一: 方法二: /*页面智能层浮动*/ jQuery(document).ready(function($){ var ...
- php 右下脚弹窗,多种样式jQuery网页右下角弹出提示信息代码
多种样式jQuery网页右下角弹出提示信息代码,extjs右下角消息提示框,Jquery Messager消息弹出插件. 查看演示 下载资源: 14 次 下载资源 下载积分: 20 积分 js代码 $ ...
- JavaScript实现网页计算器
Hbuilder X中实现网页计算器(+-*/) 文章目录 一.计算器代码 二.代码分析 一.计算器代码 <!DOCTYPE html> <html><head>& ...
- 用JavaScript制作简单的网页计算器
一.题目 利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 <!doctype html> <html> <head> ...
最新文章
- Ext JS Designer 1.0.5 发布
- 深入理解阿里分布式消息中间件
- Stucts应用引起的OutOfMemoryError
- 面向对象编程（第五篇）
- 学习笔记(26):Python网络编程并发编程-GIL与自定义互斥锁的区别
- [LUOGU] P2024 食物链
- Linux中配置文件复制粘贴格式错乱
- 如何判断一个大佬值不值得跟随
- python水仙花数的代码_Python水仙花数的编程代码如何写
- 联盟链之hyperledger-fabric
- 服务器排队系统怎么做,多服务器排队系统的平均排队时间的近似分析
- 快门光圈感光度口诀_光圈快门感光度口诀是什么？
- 饥荒控制台输入没用_《饥荒》控制台正确使用教程 如何使用控制台
- 一点点墨水滴在纸上写出来的字体
- mc杀人Linux指令,杀人雪球指令详解 教你怎么做杀人雪球
- 爬取百度 《一人之下》 贴吧
- 微信小程序 - 手持弹幕 | 全屏炫酷滚屏神器源代码模板，超详细代码和注释复制粘贴即可使用（全屏文字滚动，支持调节滚动速度、字体大小、字体颜色）文字内容横屏滚动，手机变身 LED 屏
- N1盒子op系统nps内网穿透对接腾讯云傻妞
- “范跑跑”被取消从教资格 拟起诉发文单位[转]
- python做一个考试系统_python考试系统 相关实例(示例源码)下载 - 好例子网