JS案例---计算器1.0

该博客围绕JS计算器案例展开,介绍了实现思路,包括设置三个输入框、一个选择框和一个按钮,获取输入框和选择框的值,点击按钮得出结果。还分享了学到的知识点,如select.value的值及Number()函数的使用,最后给出了HTML代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

案例实现结果

在这里插入图片描述

实现思路

设置三个输入框
一个选择框
一个按钮
获取输入框1和选择框还有输入框2的值
点击按钮然后得出结果

学到的知识点
  1. select.value的值是option标签里面的内容
  2. Number()函数把对象的值转换为数字
    例如 result=Number(“999”);
    那么 result=999; //数字
代码实现
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS案例---计算器1.0</title>
		<style type="text/css">
		     *{
		      		margin:0;
		      		padding:0;
		      }
		      #select option{
		      		height:16px;
		      		width:22px;
		      }	
			  .dv{
					height: 40px;
					width: 535px;
					margin: 100px auto;
					border: 1px solid gray;
					line-height: 40px;
					text-align: center;
			  }
		</style>
	</head>
  <body>
        <div class="dv"> 
             <input type="text"  value=""  id="text1" />
             <select id="select">
             		<option>+</option>
             		<option>-</option>
             		<option>*</option>
             		<option>/</option>
             		<option>%</option>
             </select> 
             <input type="text"  value=""  id="text2"/>
             <input type="button"  value="="  id="btn"/>
             <input type="text"  value=""  id="text3"/>
        </div>
        <script>
   
            //定义函数
           function  result(){
               //获取输入框text1的值
              var text1=document.getElementById("text1").value;
              //获取输入框text2的值
              var text2=document.getElementById("text2").value;
              //获取输入框text3的值
              var text3=document.getElementById("text3");  //point
              //获取选项框的值
              var select=document.getElementById("select").value;
              //获取按钮
              var btn=document.getElementById("btn");
			  
             switch(select){
                     case "+" : text3.value=Number(text1)+Number(text2);break;
                     case "-" : text3.value=Number(text1)-Number(text2);break;
                     case "*" : text3.value=Number(text1)*Number(text2);break;
                     case "/" : text3.value=Number(text1)/Number(text2);break;
                     case "%" : text3.value=Number(text1)%Number(text2);break;
                           }   
			text3.value;
                }   
               btn.addEventListener("click",function(){
				   result()});
                          
        </script>
  </body>
</html>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值