本篇文章给大家谈谈html简易计算器代码，以及html5简易计算器代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
帮我写一个网页计算器公式代码
写好了，代码如下，天气好冷啊！
!doctype html
html
head
meta charset="utf-8"
titletest/title
style
input{
width: 33px;
}
#compute{
width: 50px;
}
/style
/head
body
div id="content"
(input id="num1" type="text"*
input id="num2" type="text")/
input id="num3" type="text"+0.01=
input id="result" type="text"
input type="button" id="compute" value="计算"
/div
script
var n1 = document.getElementById('num1');
var n2 = document.getElementById('num2');
var n3 = document.getElementById('num3');
var rst = document.getElementById('result');
var com = document.getElementById("compute");
com.addEventListener("click",function(){
if(n1.value.length == 0 ||n2.value.length == 0 ||n3.value.length == 0){
alert("请填写完毕再进行计算！");
return false;
}
if(n3.value == 0){
alert("除数不能为 0!");
return false;
}
var result = (n1.value*n2.value)/n3.value+0.01;
rst.value = result;
})
/script
/body
/html
用js代码做一个简易计算器
function test(){
var txt1 = document.getElementById("txt1"),
txt2 = document.getElementById("txt2"),
txt3 = document.getElementById("txt3"),
opt = document.getElementById("sel");
txt3.value = eval(txt1.value + opt.value + txt2.value);//eval函数可计算某个字符串，并执行其中的的js代码
}
input type="text" id="txt1" /
select id="sel"
option value="+"+/option
option value="-"-/option
option value="*"*/option
option value="/"//option
/select
input type="text" id="txt2" /
=
input type="text" id="txt3" /
input type="button" id="btn" value="计算" onclick="test()"/
简易计算器全代码
效果图：
!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中的js代码中怎么写一个计算器的加减乘除
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title/title
/head
body
table
tr
tdinput type="button" value="add" onclick="setOp('+', 'add');"//td
tdinput type="button" value="miner" onclick="setOp('-', 'miner');"//td
tdinput type="button" value="times" onclick="setOp('*', 'times');"//td
tdinput type="button" value="divide" onclick="setOp('/', 'divide');"//td
/tr
/table
table id="tb_calc" style="display:none;"
tr
td input id="x" type="text" style="width:100px" value="" name="x" //td
td lable id="op" name="op"/lable /td
td input id="y" type="text" style="width:100px" value="" name="y" / /td
td input id="opTips" type="button" value="" onclick="calc();"/ /td
td lable id="z" name="z"/lable /td
/tr
/table
script type="application/javascript"
function setOp(op, opTips)
{
var tb=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";
}
function calc()
{
var x = parseInt(document.getElementById("x").value);
var y = parseInt(document.getElementById("y").value);
var op = document.getElementById("op").innerText;
var z = "";
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
用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简易计算器代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html5简易计算器代码、html简易计算器代码的信息别忘了在本站进行查找喔。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » html简易计算器代码（html5简易计算器代码）
1 评论