JavaScript页面的简单运算

<!DOCTYPE html>
<html>
<head>
<title>购物简易计算器</title>
<style>
section{
      background-color:#C9E495;
	  width:260px;
	  height:320px;
	  text-align:center;
	  padding-top:1px;
	  margin-top:12px;
}
.textBaroder{
      border-width:1px;
	  border-style:solid;
}
</style>
<script>
 function compute(op){
     var num1,num2;
	 num1=parseFloat(document.myform.txtNum1.value);
	 num2=parseFloat(document.myform.txtNum2.value);
	 if(op=="+")
	     document.myform.txtResult.value=num1+num2;
	 if(op=="-")
	     document.myform.txtResult.value=num1-num2;
     if(op=="*")
	     document.myform.txtResult.value=num1*num2;
     if(op=="/")
	     document.myform.txtResult.value=num1/num2;
 }
</script>
</head>
<body>
<section>
<h1><img src="a.jpg" width="240" height="31">欢迎您来淘宝!</h1>
<form action="" method="post" name="myform" id="myform">
<h3><img src="b.jpg" width="54" height="54">购物简易计算器</h3>
<p>第一个数<input name="txtNum1" type="text" class="textBaroder" id="txtNum1" size="25"></p>
<p>第二个数<input name="txtNum2" type="text" class="textBaroder" id="txtNum2" size="25"></p>
<p><input name="addButton2" type="button" id="addButton2" value=" + "
       οnclick="compute('+')">
<input name="subButton2" type="button" id="subButton2" value=" - " οnclick="compute('-')">
<input name="mulButton2" type="button" id="mulButton2" value=" * " οnclick="compute('*')">
<input name="divButton2" type="button" id="divButton2" value=" / " οnclick="compute('/')">
<p>计算结果<input name="txtResult" type="text" class="textBaroder" id="txtResult"
       size="25"></p>
</form>
</section>
</body>
</html>

posted @   wojiaohuangyu  阅读(5)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示