今天给各位分享简易计算器HTML代码的知识，其中也会对简易计算器html代码编写进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、我用html写了个计算器大家有没有更简洁的代码
- 2、求助HTML编个代码实现简单计算器的功能如图片所示9+6点击计算下框能出现答案
- 3、用HTML代码写一个计算器
- 4、html网页计算器代码怎么写
- 5、简易计算器全代码
我用html写了个计算器大家有没有更简洁的代码
!DOCTYPE html
html
meta name="content-type" content="text/html; charset=UTF-8"
head
titleCalculator/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="skyblue"
!--定义按键表格,每个按键对应一个事件触发--
table border="1" align="center" bgColor="skyblue"
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编个代码实现简单计算器的功能如图片所示9+6点击计算下框能出现答案
测试过了，没有问题。
head
script src="/Resources/common/js/jquery-1.8.2.min.js"/script
title计算demo/title
script type="text/javascript"
function jisuan() {
var a = $("#txtValue").val();
var num;
var nums;
var num1;
var num2;
var result;
if (a.indexOf('+') 0) {
num = "" + a.split('+') + "";
nums = num.split(',');
num1 = parseInt(nums[0]);
num2 = parseInt(nums[1]);
result = num1 + num2;
$("#txtResult").val(result);
} else if (a.indexOf('-') 0) {
num = "" + a.split('-') + "";
nums = num.split(',');
num1 = parseInt(nums[0]);
num2 = parseInt(nums[1]);
result = num1 - num2;
$("#txtResult").val(result);
} else if (a.indexOf('*') 0) {
num = "" + a.split('*') + "";
nums = num.split(',');
num1 = parseInt(nums[0]);
num2 = parseInt(nums[1]);
result = num1 * num2;
$("#txtResult").val(result);
} else if (a.indexOf('/') 0) {
num = "" + a.split('/') + "";
nums = num.split(',');
num1 = parseInt(nums[0]);
num2 = parseInt(nums[1]);
result = num1 / num2;
$("#txtResult").val(result);
} else {
num = "" + a.split('%') + "";
nums = num.split(',');
num1 = parseInt(nums[0]);
num2 = parseInt(nums[1]);
result = num1 % num2;
$("#txtResult").val(result);
}
}
function qingchu() {
$("#txtValue").val('');
$("#txtResult").val('');
}
/script
/head
body
input type="text" id="txtValue" name="txtValue" style="width:300px;height:120px;" /br /
input type="button" onclick="jisuan();" id="btnJisuan" value="计算" /
input type="button" id="btnQinchu" onclick="qingchu();" value="清除" /br /
input type="text" id="txtResult" style="width:300px;height:120px;" /
/body
/html
用HTML代码写一个计算器
html
head
title计算器/title
/head
body bgcolor="#ffffff" onload="FKeyPad.ReadOut.focus();FKeyPad.ReadOut.select();"
FORM name="Keypad" action=""
TABLE align="center"
B
TABLE align="center" border=2 width=50 height=60 cellpadding=1 cellspacing=5
TR
TD colspan=3 align=middleinput name="ReadOut" type="Text" onkeypress="CheckOut()" size=24 value="0"
width=100%/TD
TD/TD
TDinput name="btnClear" type="Button" value=" C " onclick="Clear()"/TD
TDinput name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"/TD
/TR
TR
TDinput name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"/TD
TDinput name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"/TD
TDinput name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"/TD
TD/TD
TDinput name="btnNeg" type="Button" value=" +/- " onclick="Neg()"/TD
TDinput name="btnPercent" type="Button" value=" % " onclick="Percent()"/TD
/TR
TR
TDinput name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"/TD
TDinput name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"/TD
TDinput name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"/TD
TD/TD
TD align=middleinput name="btnPlus" type="Button" value=" + " onclick="Operation('+')" /TD
TD align=middleinput name="btnMinus" type="Button" value=" - " onclick="Operation('-')"/TD
/TR
TR
TDinput name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)"/TD
TDinput name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"/TD
TDinput name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"/TD
TD/TD
TD align=middleinput name="btnMultiply" type="Button" value=" * " onclick="Operation('*')"/TD
TD align=middleinput name="btnDivide" type="Button" value=" / " onclick="Operation('/')"/TD
/TR
TR
TDinput name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"/TD
TDinput name="btnDecimal" type="Button" value=" . " onclick="Decimal()"/TD
TD colspan=2/TD
TDinput name="btnEquals" type="Button" value=" = " onclick="Operation('=')"/TD
TDinput name="btnReturn" type="Button" value="返 回" onclick="goReturn()"/TD
/TR
/TABLE
/TABLE
/B
/FORM
/CENTER
font face="Verdana, Arial, Helvetica" size=2
SCRIPT LANGUAGE="JavaScript"
!-- Begin
var FKeyPad = document.forms['Keypad'];
var Accum = "0";
var FlagNewNum = false;
var PendingOp = "";
//===============================================================================
//[描述] 浮点数精确计算
//[参数] str1 - 第一个数
// str2 - 第二个数
// type - 运算符
// precision - 小数位精度
//[调用方式] longCount(str1,str2,type,precision);
//[返回值] 计算结果
//===============================================================================
function longCount(str1,str2,type) {
var comma1 = 0;
if (str1.indexOf(".")!=-1) {
str1 = str1.replace(/0*$/,"");
comma1 = str1.length - str1.indexOf(".")-1;
}
var comma2 = 0;
if (str2.indexOf(".")!=-1) {
str2 = str2.replace(/0*$/,"");
comma2 = str2.length - str2.indexOf(".")-1;
}
str1 = str1.replace(/\./,"");
str2 = str2.replace(/\./,"");
var value,comma;
if (type!="*") {
if (comma1comma2) {
for (var i=0;icomma1-comma2;i++) str2 += "0";
comma = (type=="/")?0:comma1;
}else {
for (var i=0;icomma2-comma1;i++) str1 += "0";
comma = (type=="/")?0:comma2;
}
}else {
comma = comma1 + comma2;
}
if (type=="+") {
value = parseInt(str1,10) + parseInt(str2,10);
}else if (type=="-") {
value = parseInt(str1,10) - parseInt(str2,10);
}else if (type=="*") {
value = parseInt(str1,10) * parseInt(str2,10);
}else if (type=="/") {
value = parseInt(str1,10) / parseInt(str2,10);
}
value = String(value);
if (comma0) value = value.substring(0,value.length-comma)+"."+value.substring(value.length-
comma,value.length);
if (value.indexOf(".")!=-1)
value = value.replace(/0*$/,"");
return value;
}
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp || '-' == PendingOp || '/' == PendingOp || '*' == PendingOp)
Accum = longCount(Accum,Readout,PendingOp);
else
Accum = Readout;
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
FKeyPad.ReadOut.focus();
FKeyPad.ReadOut.select();
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = "0";
PendingOp = "";
ClearEntry();
}
function Neg () {
alert(FKeyPad.ReadOut.value);
FKeyPad.ReadOut.value = longCount(FKeyPad.ReadOut.value,"-1","*");
}
function Percent () {
FKeyPad.ReadOut.value = longCount(FKeyPad.ReadOut.value,Accum,"*");
FKeyPad.ReadOut.value = longCount(FKeyPad.ReadOut.value,100,"/");
}
function goReturn() {
top.returnValue = FKeyPad.ReadOut.value;
self.close();
}
function CheckOut() {
var keyCode = window.event.keyCode;
if (keyCode=48 keyCode=57) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = "";
//window.event.keyCode = null;
FlagNewNum = false;
}
return true;
}else if (keyCode==43 || keyCode==45 || keyCode==42 || keyCode==47 || keyCode==61) {
Operation(String.fromCharCode(keyCode));
}else if (keyCode==46) {//.
if (FKeyPad.ReadOut.value.indexOf(".") == -1)
return true;
}else if (keyCode==13) goReturn();
window.event.returnValue = false;
return false;
}
// End --
/SCRIPT
/body
/html
html网页计算器代码怎么写
我这里有一个现成的，自己再改一下吧（HTML
HEAD
SCRIPT LANGUAGE = "JavaScript"
function calcu(){
var numb1= document.calc.num1.value;
var numb2= document.calc.num2.value;
var total= parseFloat(numb1)*parseFloat(numb2);
document.calc.result.value=total;
}
/SCRIPT
script type="text/javascript" language="JavaScript1.2" src="menu.js"/script
/HEAD
BODY
FORM name="calc"
PBR
font size="5"会说话的QQ竞拍喽！/fo
BR
竟拍价?
INPUT name="num2" TYPE="text" id="num2" value="120" size="15" BR
购买数量：
INPUT TYPE="text" name="num1" size="15" BR
预计总价：
INPUT name="result" TYPE="text" size="15"
/P
P
INPUT name="getAnswer" TYPE="button" id="getAnswer" onClick="calcu()"
value="计算看看"!--单机鼠标调
/P
/FORM
/BODY
/HTML
）
简易计算器全代码
效果图：
!DOCTYPE html
html
head
meta charset="utf-8"
titlemini计算器/title
style type="text/css"
body {
margin: 100px;
}
#app {
border: 1px solid #ccc;
width: 175px;
height: 285px;
padding: 10px;
border-radius: 4px;
}
#app .btn {
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: white;
margin-bottom: 10px;
cursor: pointer;
color: #666;
font-weight: bold;
}
#app .btn:hover {
background-color: #333;
color: white;
}
#input-box {
width: 161px;
text-align: right;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
margin-bottom: 10px;
background-color: white;
padding: 0 5px;
}
#app .btn-double {
width: 84px;
}
/style
/head
body
div id="app"
result-box :get-value="resultvalue"/result-box
calc-box
button class="btn" @click="clear"C/button
button class="btn" @click="sign"+/-/button
button class="btn" @click="sambol('*')"*/button
button class="btn" @click="sambol('/')"//button
button class="btn" @click="input('1')"1/button
button class="btn" @click="input('2')"2/button
button class="btn" @click="input('3')"3/button
button class="btn" @click="sambol('-')"-/button
button class="btn" @click="input('4')"4/button
button class="btn" @click="input('5')"5/button
button class="btn" @click="input('6')"6/button
button class="btn" @click="sambol('+')"+/button
button class="btn" @click="input('7')"7/button
button class="btn" @click="input('8')"8/button
button class="btn" @click="input('9')"9/button
button class="btn" @click="sambol('%')"%/button
button class="btn" @click="input('0')"0/button
button class="btn" @click="point"./button
button class="btn btn-double" @click="calculate"=/button
/calc-box
/div
script src=""/script
script
// 去掉提示
// Vue.config.productionTip=false
const resultBox = {
// 父子通信
props: ["getValue"],
// 计算属性
computed: {
value() {
return this.getValue
}
},
template: `input id="input-box" type="text" v-model="value" readonly /`
}
const calcBox = {
template: `div id="calc-box"
slot/slot
/div
`
}
const app = new Vue({
el: "#app",
data: {
resultvalue: 0
},
// 组件
components: {
// 计算器结果框
'result-box': resultBox,
// 计算器输入面板组件
'calc-box': calcBox
},
methods: {
// 输入数值 累加
input(param) {
// 拒绝开始0和反复0 防止0.被和谐
if (parseInt(this.resultvalue) === 0 !/0[\.|\s]/.test(this.resultvalue)) {
this.resultvalue = param
} else {
this.resultvalue += param
}
},
// 加减乘除
sambol(param) {
// 有空格显得更加好看
this.resultvalue += ' ' + param + ' '
},
// 处理小数点
point() {
const strValue = this.toStr()
// 得到最后一位数值
const lastNumber = strValue.substring(strValue.lastIndexOf(' '))
// 判断是否已经存在小数点
// 存在
if (lastNumber.indexOf('.') !== -1) {
return
} else {
this.resultvalue += '.'
}
},
// 转换成字符串
toStr() {
return this.resultvalue.toString()
},
clear(){
this.resultvalue=0
},
// 正负号设置
sign(){
const strValue=this.toStr()
let lastNumber = strValue.substring(strValue.lastIndexOf(' '))
// 得到之前的数值+符号
let prevNumber=strValue.substr(0,strValue.lastIndexOf(' '))
// 判断当前是否有正负号
if(lastNumber.indexOf('-')===-1){
lastNumber=' -'+lastNumber.trim()
}
else{
lastNumber=' '+lastNumber.trim().substr(1)
}
this.resultvalue=prevNumber+lastNumber;
},
calculate(){
try{
this.resultvalue=eval(this.resultvalue)
}catch(e){
//TODO handle the exception
alert('no')
}
}
}
})
/script
/body
/html
简易计算器HTML代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于简易计算器html代码编写、简易计算器HTML代码的信息别忘了在本站进行查找喔。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » 简易计算器HTML代码（简易计算器html代码编写）
1 评论