当前位置：首页 > 网站源码 > 正文内容

html简易计算器代码（html做计算器）

网站源码2年前 (2023-03-22)502

本篇文章给大家谈谈html简易计算器代码，以及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

JAVA在WEB上的应用——实现简易计算器 求代码

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title网页特效|网页特效代码(JsHtml.cn)---普通计算器代码/title

/head

body

script language="JavaScript"

!-- Hide the script from old browsers --

function compute(obj)

{obj.expr.value = eval(obj.expr.value)}

var one = '1'

var two = '2'

var three = '3'

var four = '4'

var five = '5'

var six = '6'

var seven = '7'

var eight = '8'

var nine = '9'

var zero = '0'

var plus = '+'

var minus = '-'

var multiply = '*'

var divide = '/'

var decimal = '.'

function enter(obj, string)

{obj.expr.value += string}

function clear(obj)

{obj.expr.value = ''}

// --End Hiding Here --

/script

form name="calc"

table border=1

td colspan=4input type="text" name="expr" size=30 action="compute(this.form)" tr

tdinput type="button" value=" 7 " onClick="enter(this.form, seven)"

tdinput type="button" value=" 8 " onClick="enter(this.form, eight)"

tdinput type="button" value=" 9 " onClick="enter(this.form, nine)"

tdinput type="button" value=" / " onClick="enter(this.form, divide)"

trtdinput type="button" value=" 4 " onClick="enter(this.form, four)"

tdinput type="button" value=" 5 " onClick="enter(this.form, five)"

tdinput type="button" value=" 6 " onClick="enter(this.form, six)"

tdinput type="button" value=" * " onClick="enter(this.form, multiply)"

trtdinput type="button" value=" 1 " onClick="enter(this.form, one)"

tdinput type="button" value=" 2 " onClick="enter(this.form, two)"

tdinput type="button" value=" 3 " onClick="enter(this.form, three)"

tdinput type="button" value=" - " onClick="enter(this.form, minus)"

trtd colspan=2input type="button" value=" 0 " onClick="enter(this.form, zero)"

tdinput type="button" value=" . " onClick="enter(this.form, decimal)"

tdinput type="button" value=" + " onClick="enter(this.form, plus)"

trtd colspan=2input type="button" value=" = " onClick="compute(this.form)"

td colspan=2input type="button" value="AC" size= 3 onClick="clear(this.form)" /table

/form

/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中的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

用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"

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

html简易计算器代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html做计算器、html简易计算器代码的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明：本文由我的模板布，如需转载请注明出处。


本文链接：http://60200875.com/post/7123.html

标签: html简易计算器代码
分享给朋友：
返回列表

上一篇：编程代码软件入门（编程代码软件下载）

下一篇：燕窝溯源码扫出来是什么样的（燕窝溯源码是什么样子的）

“html简易计算器代码（html做计算器）” 的相关文章

手机怎么显示软件图标（手机上的软件图标）

手机怎么显示软件图标（手机上的软件图标）

今天给各位分享手机怎么显示软件图标的知识，其中也会对手机上的软件图标进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、手机桌面上的应用图标不见了怎么办 2、...

少年三国志零下载地址（少年三国志零微信版）

少年三国志零下载地址（少年三国志零微信版）

本篇文章给大家谈谈少年三国志零下载地址，以及少年三国志零微信版对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 本文目录一览： 1、少年三国志：零安卓下载地址是多少？ 2、少年三国志下载地址...

微信小程序云服务器怎么搭建（微信小程序云服务器配置）

微信小程序云服务器怎么搭建（微信小程序云服务器配置）

本篇文章给大家谈谈微信小程序云服务器怎么搭建，以及微信小程序云服务器配置对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 本文目录一览： 1、求大神，微信小程序怎么部署到服务器上 2、微信小...

百度超级链数字藏品小程序时间（蚂蚁链数字藏品）

百度超级链数字藏品小程序时间（蚂蚁链数字藏品）

本篇文章给大家谈谈百度超级链数字藏品小程序时间，以及蚂蚁链数字藏品对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 本文目录一览： 1、百度超级链数字藏品多少人在玩 2、百度那个数字藏品今天...

央视数字藏品平台（央视数字藏品平台官网）

央视数字藏品平台（央视数字藏品平台官网）

本篇文章给大家谈谈央视数字藏品平台，以及央视数字藏品平台官网对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 本文目录一览： 1、继人民日报社报道后StarArk数字文创首次登上CCTV央视新闻...

制作app平台需要多少钱（小程序怎么开发自己的小程序）

制作app平台需要多少钱（小程序怎么开发自己的小程序）

今天给各位分享制作app平台需要多少钱的知识，其中也会对小程序怎么开发自己的小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、建一个app平台的费用多少...

版权所有：飞速云源码模板 陕ICP备2021009819号陕ICP备2021009819号

网站XML地图 网站TXT地图