精华内容
下载资源
问答
  • 利用jquery写一个计算器
    2022-04-17 22:42:58

    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简易计算器

    2014-04-13 22:12:50
    jQuery简易计算器,需要的话,可以学习一下。不懂得地方请留言
  • JQuery加法计算器

    千次阅读 2018-06-13 15:40:41
    加法计算器的书写使用JQuery进行编辑加法计算器,具体步骤如下: &lt;script src="Scripts/jquery-1.11.3.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript"&...

    加法计算器的书写

    使用JQuery进行编辑加法计算器,具体步骤如下:

      <script src="Scripts/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function () {
                //btn_sign表示button按钮的点击事件
                $("#btn_sign").click(function () {
                    //NumOne第一个文本框
                    var NumOne = $("#txt_one").val();
                    //NumTwo第二个文本框
                    var NumTwo = $("#txt_two").val();
                    //result第三个文本框
                    var result = $("#txt_result").val();
                    //第一个文本框和第二个文本框的数相加
                    var sum = NumOne * 1 + NumTwo * 1;
                    //第三个文本框显示之和的结果
                    $("#txt_result").val(sum);
                    
                });
            });
        </script>
    </head>
    <body>
        <div style="text-align:center">
            <input id="txt_one" type="text" />+
            <input id="txt_two" type="text" />
            <input id="btn_sign" type="button" value="=" />
            <input id="txt_result" type="text" />
        </div>
    </body>
    

    其运行结果图:



    展开全文
  • JQuery实现简易计算器

    千次阅读 2019-10-05 21:02:23
    最近在学习jquery框架,了好多小demo,这案例讲的就是jquery简易版计算器。 本人目前承接各类小demo和作业,类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学,有意请私聊! 效果图片如下: 第...

    最近在学习jquery框架,写了好多小demo,这个案例讲的就是jquery简易版计算器。

    本人目前承接各类小demo和作业,类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学,有意请私聊!

    效果图片如下:

    第一张是刚运行在网页时的效果图。

    第二张是输入运算数和运算符时的效果图。

    第三张是错误输入的运算符。


    整体代码如下:

    <html>
    <head>
    <meta charset="utf-8" />
    <title>jquery计算器</title>
    <!-- window.eval() -->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
    .panel {
    	margin: 0 auto;
    	width: 275px;
    	height: 310px;
    	border: 2px solid #bbb;
    }
    
    #screen {
    	width: 200px;
    	height: 40px;
    	border: 1px solid #bbb;
    	margin: 7px 0px 0px 7px;
    	float: left;
    }
    
    input {
    	font-size: 20px;
    	width: 50px;
    	height: 50px;
    	margin: 6px;
    }
    </style>
    <script>
    	$(function() {
    		/*  
    			思路一:将点击了input的选项的值传到input上
    			
    			思路二:利用原生的eval()函数计算结果,并进行赋值操作
    			
    			思路三:清空按钮特别处理一下
    		 */
    
    		// 点击按钮
    		var clickBtn = "";
    		// count判断是否是第一次点击
    		var count = 0;
    		//假如报错
    		if (window.onerror) {
    			return $("#screen").text("您的操作有误哦!");
    		}
    		$(":button").click(function() {
    			// 选择了清零按钮
    			if ($(this).val() == 'C') {
    				count = 0;
    				return $("#screen").text("");
    			}
    			// 选择了相等按钮
    			if ($(this).val() == '=') {
    				try {
    					var inputText = $("#screen").text();
    					clickBtn = window.eval(inputText);
    					return $("#screen").text(window.eval(inputText));
    				} catch (err) {
    					count = 0;
    					return $("#screen").text("您的操作有误哦!");
    				}
    			}
    			if (count == 0) {
    				$("#screen").text("");
    				clickBtn = $(this).val();
    			} else {
    				clickBtn += $(this).val();
    			}
    			count++;
    			return $("#screen").text(clickBtn);
    		});
    
    	});
    </script>
    </head>
    <body>
    	<div class="panel">
    		<div>
    			<p id="screen"></p>
    			<input type="button" value="C" />
    		</div>
    		<div>
    			<input type="button" value="7" /> <input type="button" value="8" /> <input
    				type="button" value="9" /> <input type="button" value="/" /> <input
    				type="button" value="4" /> <input type="button" value="5" /> <input
    				type="button" value="6" /> <input type="button" value="*" /> <input
    				type="button" value="1" /> <input type="button" value="2" /> <input
    				type="button" value="3" /> <input type="button" value="-" /> <input
    				type="button" value="0" /> <input type="button" value="." /> <input
    				type="button" value="=" /> <input type="button" value="+" />
    		</div>
    	</div>
    </body>
    </html>

    重难点讲解如下:

    1.count在这里起的具体作用是什么?

      count是一个计数器。

      如果count为0,它的意思是要么我第一次打开这个页面,要么我点击了清零(C)按钮,即我下一步不管是点击了运算符还是运算数,都是一个全新的操作。

      它出现在三个地方,①第一次打开网页运行这个计算器,②点击了清零按钮,③运算报错出现“您的操作有误”字样。

     

    2.clickBtn如何取值?

      它主要是利用jquery的val()方法取input输入框的value值,它结合count这个计数器可以实现一个比较巧妙的结果。

      判断是否是第一个使用这个运算器,如果不是第一次的话。你执行完一步操作,按下等号后出现了一个值,只要没有报错,这个值就可以作为下一个运算的第一个运算数。


    最后如果你对这个代码有任何疑问,欢迎在下文给我评论留言,只要我看到了就一定会回复哒!~~

    展开全文
  • 采用jquery实现简单的计算器

    千次阅读 2017-06-18 12:54:45
    实现的原理只要是利用jquery eval(string)函数对字符串的计算。 string:必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。 返回值 通过计算 string 得到的值(如果有的话)。 ...

    实现的原理只要是利用jquery eval(string)函数对字符串的计算。

    string:必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。

    返回值

    通过计算 string 得到的值(如果有的话)。

    说明

    该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。

    如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。

    抛出

    如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。

    如果非法调用 eval(),则抛出 EvalError 异常。

    如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>计算器</title>
    		<link href="bootstrap-3.3.0/dist/css/bootstrap-theme.min.css" />
    		<style>
    			*{
    				padding: 0;margin: 0;
    			}
    			#maxbox{
    				width: 300px;
    				padding-top: 12px;
    				margin: 0 auto;
    			}
    			td{
    				border: 1px grey solid;
    				width: 54px;
    				height: 54px;
    				text-align: center;
    				background-color: #00FFFF;
    				color: #0074D9;
    				font-size: 24px;
    				font-weight: bold;
    			}
    			#input{
    				width: 286px;
    				height: 32px;
    				margin-left: 2px;
    				font-size: 14px;
    				font-weight: bold;
    			}
    		</style>
    	</head>
    	<body>
    		<table width="200" border="1" cellpadding="2">
    		  <tr>
    		    <td colspan="4"><input type="text" name="result" id="result" size="33"></td>
    		  </tr>
    		  <tr>
    		    <td><input type="button" value="  1   " οnclick="getNum(1)"></td>
    		    <td><input type="button" value="  2   " οnclick="getNum(2)"></td>
    		    <td><input type="button" value="  3   " οnclick="getNum(3)"></td>
    		    <td><input type="button" value="  +   " οnclick="getNum('+')"></td>
    		  </tr>
    		  <tr>
    		    <td><input type="button" value="  4   " οnclick="getNum(4)"></td>
    		    <td><input type="button" value="  5   " οnclick="getNum(5)"></td>
    		    <td><input type="button" value="  6   " οnclick="getNum(6)"></td>
    		    <td><input type="button" value="  -   " οnclick="getNum('-')"></td>
    		  </tr>
    		  <tr>
    		    <td><input type="button" value="  7   " οnclick="getNum(7)"></td>
    		    <td><input type="button" value="  8   " οnclick="getNum(8)"></td>
    		    <td><input type="button" value="  9   " οnclick="getNum(9)"></td>
    		    <td><input type="button" value="  *   " οnclick="getNum('*')"></td>
    		  </tr>
    		  <tr>
    		    <td><input type="button" value="  0   " οnclick="getNum(0)"></td>
    		    <td><input type="button" value="  00   " οnclick="getNum('00')"></td>
    		    <td><input type="button" value="  .   " οnclick="getNum('.')"></td>
    		    <td><input type="button" value="  /   " οnclick="getNum('/')"></td>
    		  </tr>
    		  <tr>
    		    <td><input type="button" value="  (   " οnclick="getNum('(')"></td>
    		    <td><input type="button" value="  )   " οnclick="getNum(')')"></td>
    		    <td><input type="button" value="  %   " οnclick="getNum('%')"></td>
    		    <td><input type="button" value="  =   " οnclick="getResult()"></td>
    		  </tr>
    		</table>
    		<script language="javascript" type="text/javascript">
    			 var cleartext=false;//设置标识值
    			 function getNum(num){
    			 //alert(num);
    			  var result=document.getElementById("result");
    			  if(cleartext){
    			   result.value="";
    			   cleartext=false;
    			  }
    			 result.value+=num;
    			 }
    			function getResult(){
    			 var result=document.getElementById("result");
    			 result.value=result.value+"="+eval(result.value);
    			 cleartext=true;//计算结果后改变标识
    			}
    		</script>
    	</body>
    </html>特别说明

    特别说明:在实现计算表达式的时候一定要注意计算表达式的为合法表达式,异常请参考上面的抛出部分

    界面展示以及结果展示


    展开全文
  • ="../jquery/jquery-3.3.1.min.js" > script > < script type ="text/javascript" > $( function () { function Calculator($dom) { this .$dom = $($dom); // 历史运算 this .$history = ...
  • 一个6行的表格。第一和第二行分别是两个type=“text”的<input>,宽度占据了四列的宽度,colspan="4",分别是输入和输出的显示行。第三行有两列,分别是清零和退位按键。给每个按键标记id和value. 2...
  • 利用HTML、CSS、JavaScript做一个计算器 整体步骤: 利用input标签设置两个数字读入行,再利用input设置四个按钮,利用onclick属性导入点击按钮时的事件。 二话不说,放代码!!!!!!!! <!DOCTYPE html> ...
  • 用纯JQuery的方式实现一个计算器

    千次阅读 2018-09-13 14:16:37
    用纯JQuery的方式实现一个计算器 &lt;/script&gt; &lt;script type="text/javascript"&gt; var str=""; $(function(){ $(":button").click(funct...
  • 计算器 利用jQuery库由HTML,CSS和JavaScript构建的基本计算器。 由Tom Tillistrand
  • day 1~day 27 总结了 Python 基础部分和进阶部分所有核心...今天我们将利用过往所学的知识,使用 Web 主流框架之一 Flask,进行项目实战,实现一个精美的 Web 版计算器。 Web 版计算器 使用 Flask 作为后端,前端使...
  • jquery实现计算器

    千次阅读 2019-06-24 19:09:18
    3.要想实现删除,怎么把字符串最后一个字母删除 解决 1.看了别人的计算器,我发现eval()可以实现这个目的 eg: alert(eval(“3+5”)); 没错,会弹出 8。 2.看了几个人的博客,都是用span元素节点当显示屏,通过...
  • jquery 计算器 这是我们5漂亮的jQuery Mobile Calculation / Calculators的集合。 一些仅使用jQuery和少量PHP,HTML和CSS3构建的非常出色的Web应用程序。 一些真的值得试! 玩得开心 :) 相关文章: ...
  • 前言BMI指数(英文为Body Mass Index),是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准,当我们需要比较及分析一个人的体重对于不同高度的人所带来的健康影响时,BMI值是一个中立而可靠的指标。...
  • <... <head> <meta charset="utf-8">...我的计算器</title> <script> function myck(type) { var inputNum1 = document.getElementById("num1"); var inputNum2 = document.getElementByI
  • 最近学习了jquery,那么能独立一个计算器来,我相信对你的基础会有很大的帮助。 那么,废话少说,开始了。 第一步:  利用div+css实现一个简单的计算器页面,这里比较简单,我就不多说了。 先看下效果图...
  • 利用刚学过的前端知识做一个简易的计算器里边使用到了HTML,CSS,JavaScript以及JQuery的知识代码如下:(1)利用CSS设计了计算器外形样式;(2)利用JavaScript实现了建议计算器的功能;代码: <!DOCTYPE html>...
  • jquery实现计算器功能

    2018-10-14 20:03:00
    判断小数点,最多只能有一个小数点 if ($( this ).text() == " . " ) { var n = Text.indexOf( " . " ); if (n > - 1 ) { // console.log("***"); return false ; } } $( " .input " )....
  • HTML 、JavaScript、jQuery、innerHTML、计算器演练、代码简化
  • 制作这样一个简单的计算机首先要先设计一个计算机的模型,下面是标签和css样式 <div class="ke"><!--外壳--> <!-- <h2>简易版计算器</h2> --> <div class="ke2"> <...
  •  <script src="js/jquery.min.js">  <script src="js/bootstrap.min.js"></script>  <script src="js/angular.min.js"></script>          <div class="col-sm-3"></div>       ...
  • 这是我们的5整齐漂亮的jQuery Mobile的计算/计算器的集合。 只能用jQuery和PHP,HTML和CSS3的一点点建一些真正真棒Web应用程序。...摇滚编码器 - jQuery Mobile的计算器 一个简单的让你的头部周围jQuery Mobil...
  • 本想把本篇取名:*从0开始前端UI框架:实现你人生中的第一个jQuery插件 *,但感觉标题太长,所以简单明了直接取后面主题为题目吧。 前一篇文章 已经对my-ui框架做了简单的介绍。谈到了我是如何想起做这个框架的,...
  • 首先,我说一下我的计算器的原理: 计算器原理:第一步,定义一个变量R初始化为0,用于存储数字,当输入一位数字时,R的值为R乘以10+数字;第二步,定义一个变量RE初始化为0,定义一个变量S用于存储运算符,当输入...
  • jQuery Mobile移动应用开发实战》学习笔记
  • 用JS做了一个简易的网页计算器计算器window.onload = function () {var oInput01 = document.getElementById('input01');var oInput02 = document.getElementById('input02');var oFuhao = document.getElementById...
  • Js与BootStrap实现简易计算器

    千次阅读 2017-09-12 16:24:36
    Js与BootStrap实现简易计算器 页面展示主要用到了Bootstrap的样式和布局 源码如下 <button class="col-xs-4" id='Show' ></button> <div clas
  • 验证输入值的格式,仅当格式符合时间类型时才能输出正确结果,否则显示警告;提供按钮获取当前时间并填充到输入框内,可以计算当前时间开始或结束的时差;...•技术: HTML + CSS + Bootstrap + jQuery

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 880
精华内容 352
热门标签
关键字:

利用jquery写一个计算器