JS 实现简单的操作（数量，单价，金额）

最新推荐文章于 2024-09-23 16:33:25 发布

凌冰_

最新推荐文章于 2024-09-23 16:33:25 发布

阅读量6.8k

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/hlx20080808/article/details/52727280

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JS实现简单的操作

<script type="text/javascript">

    // 通过值改变事件： 根据商品ID，获得价格 
    function fun(strs){
	   //获得值
	   var str = strs.value;
	   
	   //获得价格
	   var  price = str.split("_")[1];
	   
	   document.getElementById("price").value=price;	
	   
	   //注意：获得数量/
	   var  count =  document.getElementById("amout").value;
	   //如果数量不为空，则可以计算金额
	   if(count!=""){
		   document.getElementById("money").value= parseInt(count)*parseFloat(price);
	   }
	   ///
	
	}
	
	//通过失去焦点事件： 根据数量，价格 计算金额
	function fun2(num){
		//获得数量值
	   var str = num.value;
	   //获得价格
	   var  price =document.getElementById("price").value;
	   
	   //计算
	   document.getElementById("money").value= parseInt(str)*parseFloat(price);
	   
		
	}
</script>


<body>

商品<select name="pid" id="pid" οnchange="fun(this)">

  <option value="1_5.58">苹果</option>
  <option value="2_4.56">香蕉</option>
  <option value="3_5.50">桔子</option>
  </select><p/>
  
<!--style:ime-mode:disabled表示不能切换输入法 
    οnpaste="return false;" 表示不能粘贴--> 
数量:<input type="text" id="amout" style="ime-mode:disabled;" οnpaste="return false;"  οnkeypress="return(event.keyCode>=48 && event.keyCode<=57)" οnblur="fun2(this)" />  <p/>

价格:<input type="text" id="price" /><p/>

金额:<input type="text" id="money" /><p/>
  
</body>

效果如下：