精华内容
下载资源
问答
  • js计算器代码加减乘除
    2022-07-18 22:53:09

    需求:使用js制作简版计算器,提供加减乘除功能
    在这里插入图片描述
    代码如下:

    //1.获取用户的操作项(加减乘除、退出)
    function getOpe(){
    	var usrOpt = prompt('欢迎使用简易计算器:\r 1.加法运算;\r 2.减法运算;\r 3.乘法运算;\r 4.除法运算;\r 5.退出;\r 请输入您的选项:');
    	usrOpt = parseInt(usrOpt);
    	return usrOpt;
    }
    //2.获取一个用户输入的数值
    function getANum(){
    	var usrNum = prompt('请输入一个数值:');
    	usrNum = Number(usrNum);
    	return usrNum;
    }
    //3.执行算数运算,并返回结果
    function doOperate(oprator,num1,num2){
    	var res = 0;
    	switch(oprator){
    		case 1://加法运算
    			res = num1 + num2;
    			break;
    		case 2://减法运算
    			res = num1 - num2;
    			break;
    		case 3://乘法运算
    			res = num1 * num2;
    			break;
    		case 4://除法运算
    			res = num1 / num2;
    			break;
    	}
    	return res;//返回计算结果
    }
    //4.启动功能
    function startOpe(){
    	while(true){
            //1.显示操作项目 获取用户选项
            var usrOpt = getOpe();
            if(usrOpt>=5){
                alert('计算器退出运行,感谢使用!');
                break;//退出循环
            }
            //2.获取 用户输入的两个 数值
            var usrNum1 = getANum();
            var usrNum2 = getANum();
            //3.根据用户选项进行 两个数的运算
            var res = doOperate(usrOpt,usrNum1,usrNum2);
            //4.显示执行结果
            alert(res);
    	}
    }
    //5.启动计算器
    startOpe();
    
    更多相关内容
  • js加减乘除计算器代码是一款基于gsap制作的网页计算器加减乘除运算,支持多个数字串计算运算代码。
  • 下面小编就为大家带来一篇html+js实现简单的计算器代码(加减乘除)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js加减乘除在线计算器代码是一款支持键盘输入和兼容IE8的计算器特效。
  • js制作加减乘除计算器代码是一款简易的计算器,可完成基本的计算功能。
  • --js代码--> <script type="text/javascript"> //通过创建元素将表格写出来 function drawTab(ary){ var table = document.getElementById("tab"); for(var i = 0;i;i++){ //调用init函数里面...

    在这里插入图片描述

    <head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--css样式-->
    		<style type="text/css">
    			table,tr,td{
    				width: 300px;
    				height: 30px;
    				border: 1px solid blue;
    				border-collapse: collapse;
    				text-align: center;
    			}
    			body{
    				width: 300px;
    				margin: 20px auto;
    			}
    			td{
    				background: #7FFF00;
    			}
    			td:hover{
    				background: #993399;
    			}
    		</style>
    		<!--js代码-->
    		<script type="text/javascript">
    			//通过创建元素将表格写出来
    			function drawTab(ary){
    				var table = document.getElementById("tab");
    				for(var i = 0;i<ary.length;i++){
    					//调用init函数里面的ary数组并对数组进行遍历
    					var temp = ary[i]
    					var tr = document.createElement("tr");
    					table.appendChild(tr);
    					for(var j = 0;j<temp.length;j++){
    						var td = document.createElement("td")
    						td.innerText = temp[j];
    						//给每一个td添加一个点击事件
    						td.setAttribute("onclick","calc(this)");
    						tr.appendChild(td);
    					}
    				}
    			}
    			//设置一个真值
    			var flag = true;
    			function calc(num){
    				var result = document.getElementById("result");
    				//使用switch语句进行判断
    				switch(num.innerText){
    					//判断如果为等号的时候使用eval()函数进行计算,并将真值赋值为false
    					case "=":
    						if(result.innerText==""){
    							return;
    						}
    						//通过replace替换字符串
    						result.innerText = result.innerText.replace("×","*");
    						result.innerText = result.innerText.replace("÷","/");
    						result.innerText = eval(result.innerText);
    						flag = false;
    						break;
    					//通过使用substr对字符串进行截取,删除最后一个字符
    					case "←":
    						result.innerText = result.innerText.substr(0,result.innerText.length-1);
    						break;
    					//如果点击+-×÷%时不再进行叠加,将前面的给替换掉
    					case "+":
    					case "-":
    					case "×":
    					case "÷":
    					case "%":
    					case ".":
    						if(result.innerText==""){
    							return;
    						}
    						if(result.innerText.substr(result.innerText.length-1,result.innerText.length)=="+"||
    						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="-"||
    						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="×"||
    						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="÷"||
    						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="%"||
    						result.innerText.substr(result.innerText.length-1,result.innerText.length)=="."){
    							result.innerText = result.innerText.substr(0,result.innerText.length-1);
    						}
    						result.innerText += num.innerText;
    						flag = true;
    						break;
    					//清除操作
    					case "c":
    						result.innerText = "";
    						break;
    					//点击0-9是进行输入,并在点击等号之后再点击0-9时将输出清空,进行下一次计算
    					default:
    						if(flag){
    							
    						}else{
    							result.innerText = "";
    							flag = true;
    						}
    						result.innerText += num.innerText;
    						break;
    				}
    			}
    			//函数调用
    			function init(){
    				//计算器上面要显示的数字
    				var ary = [
    				["%", "c", "←", "÷"],
    				["7", "8", "9", "×"],
    				["4", "5", "6", "-"],
    				["1", "2", "3", "+"],
    				["", "0", ".", "="]
    			];
    				drawTab(ary)
    			}
    		</script>
    	</head>
    	<body onload="init()">
    		<!--table表格-->
    		<table id="tab">
    			<tr>
    				<td colspan="4">简易计算器</td>
    			</tr>
    			<tr>
    				<td colspan="4" id="result"></td>
    			</tr>
    		</table>
    	</body>
    
    展开全文
  • 下面小编就为大家带来一篇超级简易的JS计算器实例讲解(实现加减乘除)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 设计一个简易计算器,具有能对两个操作数进行、乘、除运算的简易计算器。需要正确的设计Web前端页面,能正确进行数据类型的转换,能正确使用选择结构,在JavaScript中定义函数,通过按钮事件调用定义好的...

    JS实现简易计算器

    背景

    设计一个简易计算器,具有能对两个操作数进行加、减、乘、除运算的简易计算器。需要正确的设计Web前端页面,能正确进行数据类型的转换,能正确使用选择结构,在JavaScript中定义函数,通过按钮事件调用定义好的JavaScript函数。
    设计页面
    使用合适的开发工具,设计计算器的页面
    小脆筒
    先把 01.jpg 和 02.jpg 图片下载下来放在同一层目录下

    01.jpg
    在这里插入图片描述
    02.jpg

    代码实现

    1. index.html页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>计算器</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>
    <body onload="onLoad()">
    <script type="text/javascript" src="script.js"></script>
    <div id="calculator">
      <div class="LOGO">
        <span class="name">简单的计算器</span>
        <span class="verson">@LSZ v1.0</span>
      </div>
      <div id="shuRu">
        <!--screen输入栏-->
        <div class="screen">
          <input type="text" id="screenName" name="screenName" class="screen" value="" onfocus="jsq(this)">
        </div>
      </div>
      <div id="keys">
        <!-- operators and other keys -->
        <!--第一排-->
        <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
        <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
        <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
        <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
        <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
        <!--第二排-->
        <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
        <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
        <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
        <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons">
        <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
        <!--第三排-->
        <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
        <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
        <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
        <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">
        <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
        <!--第四排-->
        <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
        <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">
        <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
        <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
        <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
      </div>
      <div class="footer">
        <span class="aside">欢迎使用JavaScript计算器</span>
          <span class="link">
            <a href="#" title="声明" target="_blank">反馈</a>
          </span>
      </div>
    </div>
    
    </body>
    </html>
    
    
    

    2. script.js页面

    //实现JS输入功能
    var num = 0; // 定义第一个输入的数据
    function jsq(num) {
      //获取当前输入
      document.getElementById('screenName').value += document.getElementById(num).value;
    }
    function eva() {
      //计算输入结果
      document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
    }
    function clearNum() {
      //清0
      document.getElementById("screenName").value = null;
      document.getElementById("screenName").focus();
    }
    function tuiGe() {
      //退格
      var arr = document.getElementById("screenName");
      arr.value = arr.value.substring(0, arr.value.length - 1);
    }
    function onLoad(){
      //加载完毕后光标自动对应到输入框
      document.getElementById("screenName").focus();
    }
    
    
    

    3.style.css页面

    /*Basic reset*/
    *{
      margin:0;
      padding:0;
      box-sizing: border-box;
      font: 14px Arial,sans-serif;
    }
    html{
      height:100%;
      background-image:url(02.jpg);
    }
    
    #calculator{
      margin: 180px auto;
      width:330px;
      height:400px;
      border: 1px solid lightgray;
      // background-color:darkgrey;
      background-image:url(01.jpg);
      padding:15px;
    
    }
    
    /*LOGO*/
    .LOGO{
      height:20px;
    
    }
    .LOGO .name{
      float:left;
      line-height:30px;
    }
    .LOGO .verson{
      float:right;
      line-height:30px;
    }
    /*screen*/
    #shuRu{
      margin-top:15px;
    }
    .screen{
      margin-top:5px;
      width:300px;
      height:40px;
      text-align: right;
      padding-right:10px;
      font-size:20px;
    }
    #keys{
      border:1px solid lightgray;
      height:223px;
      margin-top:25px;
      padding:8px;
    }
    #keys .last{
      margin-right:0px;
    }
    .footer{
      margin-top:20px;
      height:20px;
    }
    .footer .link{
      float:right;
    }
    
    #keys .buttons{
      float:left;
      width: 42px;
      height: 36px;
      text-align:center;
      background-color:lightgray;
      margin: 0 17px 20px 0;
    }
    
    

    实现效果

    小脆筒

    如果觉得本文写得不错,顺手点个赞,感谢老铁!

    展开全文
  • js 计算器加减乘除

    万次阅读 多人点赞 2017-11-25 13:10:51
    js写了个网页计算器的小程序,代码如下,程序员新人,有可以改进的地方还望指点。(不支持/和百分号) 首先是CSS和HTML部分 *{ margin:0 auto; padding:0; } .box1{ width:25%;...

    拿js写了个网页计算器的小程序,代码如下,程序员新人,有可以改进的地方还望指点。(不支持/和百分号)


    首先是CSS和HTML部分

    <!DOCUMENT html>
    <html>
    	<head>
    		<style>
    			*{
    				margin:0 auto;
    				padding:0;				
    			}
    			.box1{
    				width:25%;
    				height:16%;
    			}			
    			input{
    				width:100%;
    				height:106%;
    				font-size:150%;			
    			}
    		</style>
    	</head>
    	<body>
    		<table align="center" height="500px"  width="400px" border="solid 1px" cellspacing="0"> 
    			<tr>
    				<td colspan="4">
    					<input type="text" id="window" 
    					style="width:100%;height:100%;text-align:left;font-size:200%;" readonly="readonly"/>
    				</td>
    			</tr>
    			<tr>
    				<td class="box1"><input type="button" value="AC" οnclick="bbb(this.value)"></td>
    				<td class="box1"><input type="button" value="/"></td>
    				<td class="box1"><input type="button" value="%"></td>
    				<td class="box1"><input type="button" value="÷" οnclick="bbb(this.value)"></td>
    			</tr>
    			<tr>
    				<td class="box1"><input type="button" value="7" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="8" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="9" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="*" οnclick="bbb(this.value)"></td>
    			</tr>
    			<tr>
    				<td class="box1"><input type="button" value="4" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="5" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="6" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="—" οnclick="bbb(this.value)"></td>
    			</tr>
    			<tr>
    				<td class="box1"><input type="button" value="1" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="2" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="3" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="+" οnclick="bbb(this.value)"></td>
    			</tr>
    			<tr>
    				<td class="box1" colspan="2"><input type="button" value="0" οnclick="aaa(this.value)"></td>
    				<td class="box1"><input type="button" value="." οnclick="bbb(this.value)"></td>
    				<td class="box1"><input type="button" value="=" οnclick="bbb(this.value)"></td>
    			</tr>
    		</table>
    	<body>

    以下是js逻辑,用了4个变量实现加减乘除包括浮点数运算。

    <script>
    	var b=""				<!--用于记录小数点-->
    	var c="";				<!--用于记录表单提交的数字-->
    	var d="";				<!--用于记录表单提交的符号-->
    	var e="";				<!--用于记录计算结果-->
    		
    		<!--记录数字的方法,点击的数字提交到aaa()-->
    		function aaa(num){					
    		<!--上一次操作是=号时,先重置所有数据再输入数字-->
    			if(d=="="){							
    					hehe();
    				}
    			if(c.length>=16){
    					alert("输入的数太大了");return;
    				}
    			c=c+String(num);
    			<!--第一个数直接被记录为计算结果-->
    			if(d==""){							
    					e=c;
    				}					
    			document.getElementById("window").value=c;				
    		}
    		<!--记录符号的方法,点击的符号提交到bbb()-->
    		function bbb(lol){						
    			if(lol=="AC"){						
    					hehe();return;
    				}
    			<!--小数点被记录为数字,并不再向下执行-->
    			if(lol=="."){						
    					c=c+String(lol);b=lol;
    					document.getElementById("window").value=c;return;
    			}							
    			<!--根据输入的符号计算,先调用计算方法而后给变量d赋值防止第一次点击错误计算-->
    			duang();							
    			d=lol;				
    			document.getElementById("window").value=d;
    			if(d=="="){
    					result();
    			}
    			c="";								
    		}
    		<!--输出计算结果的方法-->
    		function result(){				
    			document.getElementById("window").value=e;		
    		}		
    		<!--计算方法,根据上一次数据的符号计算出前两次的结果-->
    		function duang(){									
    			if(d=="+"){e=Number(e)+Number(c);} 
    			if(d=="—"){e=Number(e)-Number(c);}
    			if(d=="*"){e=Number(e)*Number(c);}
    			if(d=="÷"){e=Number(e)/Number(c);}
    		}
    		<!--重置方法-->
    		function hehe(){									
    			b="";c="";d="";e="";f=0;document.getElementById("window").value="";
    		}			
    </script>
    </html>

    展开全文
  • 扁平风格加减乘除网页计算器js代码是一款简洁的兼容手机移动端的加减乘除运算计算器网页特效。
  • 卜面小编就为大家带来一篇 html+js实现简单的计算器代码加减乘除小编觉得挺不 错的现在就分享给大家也给大家做个参考 html+js实现简单的计算器代码加减乘除 <!DOCTYPE html> <html> <head> <...
  • JS黑白样式加减乘除计算器代码是一款简单实用的加减乘除网页计算器。
  • 原生js简单的加减乘除计算器样式代码 原生js简单的加减乘除计算器样式代码
  • js加减乘除计算器

    千次阅读 2020-10-19 17:09:27
    1.首先我们需要规划好计算器的结构 计算器的结构可以用好几种方法写:表格、button、列表…这篇博文我是用表格写的 body里先构建4*6的表格并调整好宽、高、边框等属性,需要使用table、tr、td标签以及td标签的...
  • 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子。 <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr&...
  • 简易计算机效果图工作之余,想写个计算器玩玩,搜了一下网上的,发现都很复杂,一个简单的功能引入好多插件,本人不才,自己整了一个,纯js写的。先上一个写好的代码,看的话,直接新建一个txt文本,后缀改成html就...
  • js简洁实用的网页计算器代码是款非常简洁的网页计算器特效
  • 代码片段: <button class="num" data-num="7">7  <button class="num" data-num="8">8  <button class="num" data-num="9">9  加上" class="ops">  <button class="num" data-num="4">4  ...
  • 原生JS简易计算器运算代码是一款加减乘除公式计算器,输入数字和公式计算结果。
  • js制作加减乘除计算器代码是一款简易的计算器,可完成基本的计算功能。
  • 算法效果图: 具体要求如下: (1)单击“计算”按钮后,判断l两个输入框中是否都输入了内容,只要其中一个文本框没有输入,...") } } script> html> 这样就简单实现一个计算器加减乘除算法啦,有问题评论区私聊我呀!
  • 通过js实现计算器加减乘除的功能

    千次阅读 2018-07-13 09:52:49
      x <button type="button" id="ba">= var x1=document.getElementById("a");//将指定的dom节点赋值给x1;...同理:加减和除法只需要将乘号改为“+” 、“-” 、“/”即可。
  • js加减乘除计算器代码是一款扁平风格的计算器应用代码。
  • 初学js,跟着视频写了一个简易计算器,能实现简单的加减乘数,效果如图: 源代码HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 展开全部 应该相同吧,发个我写的,里面的图片没有,运行就不行了,看看e68a... }} } public class Js{ public static void main(String args[]){ new Jst().we(); } } 已赞过 已踩过你对这个回答的评价是?...
  • js计算器, 自适应手机pc, 可以连加减乘除
  • 本文实例讲述了JS实现超级简易的加减乘除四则运算计算器。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,414
精华内容 965
关键字:

js计算器代码加减乘除

友情链接: 冲击波.rar