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>