用javascript做计算水果的总价

Posted 2023-04-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用javascript做计算水果的总价相关的知识，希望对你有一定的参考价值。

格式是这样的
单价：
数量：
总价：
清空
补充：有多种水果可以选择，并且直接显示单价,输入数量，计算总价格

<form>
<select name="select">
<option value="0">请选择</option>
<option value="1">苹果</option>
<option value="2">梨</option>
<option value="3">香蕉</option>
</select>

<br/>
单价:<input size="10" name="var1" contentEditable="false"/>
<br/>
数量:<input size="10" name="var2"/> <font id="f1" color="red"></font>
<br/>
总价:<input size="20" name="var3"/>
<br/>
<input type="button" value="计算" name="count"/>
<input type="reset"/>
</form>

<script>
document.forms[0].select.onchange=function()
var form = document.forms[0];
if(form.select.value==1)

form.var1.value=2.5;

else if(form.select.value==2)
form.var1.value=3.5;

else if (form.select.value==3)
form.var1.value=4.5

document.forms[0].var2.onblur=function()

if(this.value==""||this.value==null)

f1.style.fontSize="13px";
f1.innerhtml="请输入数量!";
return;

var patrn=/^[1-9]1\d*$/;
var s=this.value;
if(!patrn.exec(s))

f1.style.fontSize="13px";
f1.innerHTML="请输入正确的数字!";

document.forms[0].count.onclick=function()
var form = document.forms[0];

if(form.var1.value==null||form.var1.value=="")

alert("请选择需要购买的水果!");
return ;

if(form.var2.value==null||form.var2.value=="")

alert("请输入数量!");
return ;

var patrn=/^[1-9]1\d*$/;
var s=form.var2.value;
if(!patrn.exec(s))

alert("请输入正确的数字!");
return;

var result = parseFloat(form.var1.value)*parseFloat(form.var2.value);
form.var3.value=result;

</script> 参考技术A <script>
function T()
var price = document.getElementById("price").options[document.getElementById("price").selectedIndex].value;
var num = document.getElementById("num").value;
if(num)
var total = price * num;
document.getElementById('total').innerHTML = total+"元";

</script>
<br />
<form>
水果：<select id="price">
<option value="2">西瓜（2元/斤）</option>
<option value="5">苹果（5元/斤）</option>
<option value="7.5">榴莲（7.5元/斤）</option>
</select><br /><br />
数量：<input type='text' id="num" value="1" size="4" /><br /><br />
总价：<span id="total" style="color:red;"></span><br /><br />

<input type="button" value="计算" onclick="T()" /> <input type="reset" value="清空" onclick="document.getElementById('total').innerHTML='';" />
</form>本回答被提问者和网友采纳参考技术B <html>
<head>
<script type="text/javascript">
var price = 0;
function Price(fruit)
price = fruit.value;
document.getElementById("price").innerHTML=fruit.value;
SumPrice(document.getElementById("sum"));

function Checkword(x,y)

x.value=y.replace(/\D+/g,'');

function SumPrice(num)
document.getElementById("sumprice").innerHTML=num.value*price;

function Reset()
document.getElementById("price").innerHTML="";
document.getElementById("sumprice").innerHTML="";

</script>
</head>
<body>
选择水果</br>
<form>
苹果<input type="radio" name="fruit" value="4" onclick="Price(this)">
梨<input type="radio" name="fruit" value="3"onclick="Price(this)" >
橙子<input type="radio" name="fruit" value="6"onclick="Price(this)"></br>
单价：<span id="price"></span></br>
数量(斤):<input type="text" id="sum" maxLength=4 onkeyup="Checkword(this,this.value);SumPrice(this)"></br>
总价：<span id="sumprice"></span></br>
<input type="reset" value="清空" onclick="Reset()">
</form>
</body>
</html> 参考技术C <script>
function
T()
var
price
=
document.getElementById("price").options[document.getElementById("price").selectedIndex].value;
var
num
=
document.getElementById("num").value;
if(num)
var
total
=
price
*
num;
document.getElementById('total').innerHTML
=
total+"元";

</script>
<br
/>
<form>
水果：<select
id="price">
<option
value="2">西瓜（2元/斤）</option>
<option
value="5">苹果（5元/斤）</option>
<option
value="7.5">榴莲（7.5元/斤）</option>
</select><br
/><br
/>
数量：<input
type='text'
id="num"
value="1"
size="4"
/><br
/><br
/>
总价：<span
id="total"
style="color:red;"></span><br
/><br
/>
<input
type="button"
value="计算"
onclick="T()"
/>
<input
type="reset"
value="清空"
onclick="document.getElementById('total').innerHTML='';"
/>
</form>

8年javascript知识点积累

08年毕业就开始接触javascript，当时是做asp.net发现很多功能用asp.net控件解决不了，比如checkbox单选，全选问题，自动计算总价问题，刷新问题，等等。那时感觉javascript好讨厌，没有好的框架和调试工具，痛不欲生。如今javascript框架漫天飞舞，jquery，zepto，AngularJs，各种应用层出不穷，动画，游戏，单页网站，甚至手机app，那里都少不了javascript，不禁感叹，还有没有javascript不能做的事情么？

8年了，如今多半时间是管理工作，写代码已经少了，之前的积累历历在目，在这里总结一下之前的点点滴滴，做一个目录，这个目录中有些文章是摘抄w3c文档，之所以摘抄是因为开发过程中遇到这些知识点的几率比较大，各位看官不妨也来温习一下。如果你是专职javascript开发的话，这些都是小儿科了，不要见笑，全是基本知识点，当然如果各位如果有好的框架，好的建议，留言！留言！留言！