html计算
html网页计算器代码编写过程如下：
❷ html计算加减乘除
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
</head>
<body>
<table>
<tr>
<td><inputtype="button"value="add"onclick="setOp('+','add');"/></td>
<td><inputtype="button"value="miner"onclick="setOp('-','miner');"/></td>
<td><inputtype="button"value="times"onclick="setOp('*','times');"/></td>
<td><inputtype="button"value="divide"onclick="setOp('/','divide');"/></td>
</tr>
</table>
<tableid="tb_calc"style="display:none;">
<tr>
<td><inputid="x"type="text"style="width:100px"value=""name="x"/></td>
<td><lableid="op"name="op"></lable></td>
<td><inputid="y"type="text"style="width:100px"value=""name="y"/></td>
<td><inputid="opTips"type="button"value=""onclick="calc();"/></td>
<td><lableid="z"name="z"></lable></td>
</tr>
</table>
<scripttype="application/javascript">
functionsetOp(op,opTips)
{
vartb=document.getElementById("tb_calc");
tb.style.display="none";
document.getElementById("x").value="";
document.getElementById("y").value="";
document.getElementById("z").innerText="";
document.getElementById("op").innerText=op;
document.getElementById("opTips").value=opTips;
tb.style.display="block";
}
functioncalc()
{
varx=parseInt(document.getElementById("x").value);
vary=parseInt(document.getElementById("y").value);
varop=document.getElementById("op").innerText;
varz="";
switch(op)
{
case'+':
z=x+y;
break;
case'-':
z=x-y;
break;
case'*':;
z=x*y;
break;
case'/':;
z=x/y;
break;
default:
z='';
}
console.log(x,op,y,'=',z);
document.getElementById("z").innerText=z;
}
</script>
</body>
</html>
实现的步骤，第一步是加4个按钮，如图所示：
❸ 我想用JS或HTML代码完成以下计算公式，自动生成计算结果，应该怎么办
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cursortest</title>
<scriptsrc="http://libs..com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<label>请输入参数1：</label>
<inputtype="text"id="input1">
<br>
<label>请输入参数2：</label>
<inputtype="text"id="input2">
<br>
<label>请输入参数3：</label>
<inputtype="text"id="input3">
<br>
<label>请输入参数4：</label>
<inputtype="text"id="input4">
<br>
<label>请输入参数5：</label>
<inputtype="text"id="input5">
<br>
<label>请输入参数6：</label>
<inputtype="text"id="input6">
<br>
<button>请点击提交查看结果</button>
<br>
<label>结果显示为：</label>
<inputtype="text"id="result">
<script>
$(document).ready(function(){
$("button").click(function(){
varinput1=$("#input1").val();
varinput2=$("#input2").val();
varinput3=$("#input3").val();
varinput4=$("#input4").val();
varinput5=$("#input5").val();
varinput6=$("#input6").val();
$("#result").attr("value",input1*input2*input3/(input4*input5*input6));
});
});
</script>
</body>
</html>
❹ HTML计算商品总价
<html>
<head>
<script>
function cal() {
var appleVolum = Number(document.getElementById("appleVolum").value);
var bananaVolum = Number(document.getElementById("bananaVolum").value);
var pineappleVolum = Number(document.getElementById("pineappleVolum").value);
document.getElementById("msg").value = "共花费：" + (appleVolum * 10 + bananaVolum * 20 + pineappleVolum * 20);
}
</script>
</head>
<body>
苹果每斤10元，请输入您要购买的斤数：<input id="appleVolum"><br>
香蕉每斤20元，请输入您要购买的斤数：<input id="bananaVolum"><br>
菠萝每斤20元，请输入您要购买的斤数：<input id="pineappleVolum"><button onclick="cal()">我买</button><br>
信息:<input id="msg">
</body>
</html>
❺ html中怎么做一些简单的算数运算啊
HTML是无法实现简单的算术运算的。原因如下：
1、HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
2、可以使用JavaScript技术实现网页中简单的算术运算，如：
vara=1;varb=2;
document.write(a+b);//结果会在网页中输出3
补充知识：
1、超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
超文本标记语言(15张)
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果
2、JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
❻ 制作一个html的网页，要求计算出对应的结果
<html>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<head>
</head>
<body>
输入语文分:<inputtype="text"id="ch"/> 输入数学分:<inputtype="text"id="num"/>
<selectid="t">
<optionvalue="1">语文20%数学80%</option>
<optionvalue="2">语文30%数学70%</option>
<optionvalue="3">语文40%数学60%</option>
<optionvalue="4">语文50%数学50%</option>
<optionvalue="5">语文60%数学40%</option>
<optionvalue="6">语文70%数学30%</option>
<optionvalue="7">语文80%数学20%</option>
</select>
<inputtype="button"id="submit"value="点击计算"/>
<inputtype="text"id="count"/>
</body>
<script>
functionjs(id){returndocument.getElementById(id)}
js("submit").onclick=function(){
varch=js("ch").value;
varnum=js("num").value;
vartype=js("t").value;
switch(type){
case"1":js("count").value=ch*0.2+num*0.8;break;
case"2":js("count").value=ch*0.3+num*0.7;break;
case"3":js("count").value=ch*0.4+num*0.6;break;
case"4":js("count").value=ch*0.5+num*0.5;break;
case"5":js("count").value=ch*0.6+num*0.4;break;
case"6":js("count").value=ch*0.7+num*0.3;break;
case"7":js("count").value=ch*0.8+num*0.2;break;
default:returnfalse;
}
}
</script>
</html>
把代码复制进html中执行即可进行测试
❼ html网页如何实现数字计算
<!-- jsp代码如下，在d盘放一个 t.txt的文件版测试，文件完整路径为 d:/t.txt -->
<%@ page language="java" import="java.io.*" pageEncoding="UTF-8"%>
<!权DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>读取文本文件</title>
</head>
<body>
<hr width="95%" align="center"/><br/>
<%BufferedReader br=new BufferedReader(new FileReader("d:/t.txt"));
String tmp=null;
while ((tmp=br.readLine())!=null) {
out.print(tmp+"<br>");
}
%>
</body>
</html>
❽ html 简单计算
代码如下:
<!DOCTYPE html>
<html>
<meta name="content-type" content="text/html; charset=UTF-8">
<head>
<title>Calculator</title>
<!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中-->
<script type="text/javascript">
var numresult;
var str;
function onclicknum(nums) {
str = document.getElementById("nummessege");
str.value = str.value + nums;
}
function onclickclear() {
str = document.getElementById("nummessege");
str.value = "";
}
function onclickresult() {
str = document.getElementById("nummessege");
numresult = eval(str.value);
str.value = numresult;
}
</script>
</head>
<body bgcolor="affff" >
<!--定义按键表格,每个按键对应一个事件触发-->
<table border="1" align="center" bgColor="#bbff77"
style="height: 350px; width: 270px">
<tr>
<td colspan="4">
<input type="text" id="nummessege"
style="height: 90px; width: 350px; font-size: 50px" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" onclick="onclicknum(1)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="2" id="2" onclick="onclicknum(2)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="3" id="3" onclick="onclicknum(3)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="+" id="add" onclick="onclicknum('+')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" onclick="onclicknum(4)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="5" id="5" onclick="onclicknum(5)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="6" id="6" onclick="onclicknum(6)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="-" id="sub" onclick="onclicknum('-')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" onclick="onclicknum(7)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="8" id="8" onclick="onclicknum(8)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="9" id="9" onclick="onclicknum(9)"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="*" id="mul" onclick="onclicknum('*')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" id="0" onclick="onclicknum(0)"
style="height: 70px; width: 190px; font-size: 35px">
</td>
<td>
<input type="button" value="." id="point" onclick="onclicknum('.')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
<td>
<input type="button" value="/" id="division"
onclick="onclicknum('/')"
style="height: 70px; width: 90px; font-size: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Del" id="clear"
onclick="onclickclear()"
style="height: 70px; width: 190px; font-size: 35px" />
</td>
<td colspan="2">
<input type="button" value="=" id="result"
onclick="onclickresult()"
style="height: 70px; width: 190px; font-size: 35px" />
</td>
</tr>
</table>
</body>
</html>
❾ 怎么计算html()追加到的值
1、实例代码如下
<div id="" class="offset-md-6 ">
<lable >会议:</lable><input id="huiyi" type="text"></input></br>
<lable >住宿:</lable><input id="zhusu" type="text"></input></br>
<lable >合计:</lable><span id="sum"></span> </br>
<button class="btn btn-primary" type="button" id="calculate">计算</button>
</div>
</div>
<script>
//为按钮设置事件
$("#calculate").click(function(){
//分别获取两个框的值，如果是标签可以用.text()获取。
var hy = $("#huiyi").val();
var zs = $("#zhusu").val();
//转成数字相加
$("#sum").text(parseFloat(hy)+parseFloat(zs));
});
</script>
❿ 用html做自动计算
希望可以帮到你
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
</head>
<body>
<tr>
<td height="12"><div align="center">
<input type="text" id="num1" />
</div></td>
<td height="12"><div align="center">
<input type="text" id="num2" />
</div></td>
</tr>
<tr>
<td height="12"><div align="center">
<label>
<input type="submit" name="Submit" value="相乘" onclick="getTotal()"/>
</label>
</div></td>
<td height="12"><div align="center">
<input type="text" id="Total" />
</div></td>
</tr>
<script type="text/javascript">
function getTotal(){
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if(num1==""||num2==""){
alert("不能为空！！");
return
}
var total = Number(num1) * Number(num2);
document.getElementById("Total").value = total;
}
</script>
</body>
</html>