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

html制作简易计算器的代码(web简易计算器代码)

网站源码2年前 (2023-02-04)593

今天给各位分享html制作简易计算器的代码的知识,其中也会对web简易计算器代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

使用HTML控件实现简单的计算器

可以用 js 做的,非常的简单,你你是少要两个文本框,也就是

input type="text" id="num1" name="num1" /

input type="text" id="num2" name="num1" /

结果就用个 lable id="lbl"/lable

script type="text/javascript"

function Y(x) {

var num1 = parseFloat(document.getElementById("num1").value);

var num2 = parseFloat(document.getElementById("num2").value);

switch (x) {

case '-':

return num1 - num2;

case '+':

return num1 + num2;

case '*':

return num1 * num2;

case '/':

return num1 / num2;

default:

}

}

function add() {

document.getElementById("lbl").value = Y(+);

}

//剩下的你应该会了吧

/script

用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()"/

HTML怎样实现简单计算器

单纯的html 只能画出个大概样式出来,在网页上实现简单计算器功能还需要Javascript. 或者是使用其它插件。

html简易计算器问题

!DOCTYPE html

html lang="zh"

head

meta charset="UTF-8"

titlecalculator/title

style

.kd{width: 30px}

/style

script

function shuzhi(op){

var num1,num2;

num1=document.myform.s1.value - 0;

num2=document.myform.s2.value - 0;

var plus = num1+num2;

if (op=="+") {document.myform.jg.value=plus};

if (op=="-") {document.myform.jg.value=num1-num2};

if (op=="*") {document.myform.jg.value=num1*num2};

if (op=="/"  num2!=0) {document.myform.jg.value=num1/num2};

}

/script

/head

body

h1 align="center"font color="red"calculator/font/h1

hr/

form align=center name="myform" id="myform" action=method="post"

Pnumber1:input type="text" name="s1" id="s1" //P

Pnumber2:input type="text" name="s2" id="s2" //P

Poption:

input type="button" value="+" class="kd" name="y1" onClick="shuzhi('+')" /

input type="button" value="-" class="kd" name="y2" onClick="shuzhi('-')" /

input type="button" value="*" class="kd" name="y3" onClick="shuzhi('*')" /

input type="button" value="/" class="kd" name="y4" onClick="shuzhi('/')" /

/P

presult:input type="text" size="30" name="jg" id="jg"  //p

/form

/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制作简易计算器的代码和web简易计算器代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

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

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


本文链接:http://390c.top/post/2820.html

分享给朋友:

“html制作简易计算器的代码(web简易计算器代码)” 的相关文章

手游gm版分享社区(手游平台gm版)

手游gm版分享社区(手游平台gm版)

今天给各位分享手游gm版分享社区的知识,其中也会对手游平台gm版进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、教主之家(GM飞升版)手游推广在哪里找?...

dw软件怎么运行(dw软件怎么运行代码)

dw软件怎么运行(dw软件怎么运行代码)

本篇文章给大家谈谈dw软件怎么运行,以及dw软件怎么运行代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、电脑的DW软件为什么打不开 2、DW点什么可以运行 3、...

寻宝天行完美世界手游交易平台(寻宝天行手游交易平台手机版)

寻宝天行完美世界手游交易平台(寻宝天行手游交易平台手机版)

本篇文章给大家谈谈寻宝天行完美世界手游交易平台,以及寻宝天行手游交易平台手机版对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、在完美世界买游戏账号需要买方购买买卖凭证吗...

app制作软件手机版结婚证(结婚证制作 手机 app)

app制作软件手机版结婚证(结婚证制作 手机 app)

本篇文章给大家谈谈app制作软件手机版结婚证,以及结婚证制作 手机 app对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、用什么软件可以做结婚照,有什么软件可以将普通的照片...

免费网页源码文件(免费开源网站源码)

免费网页源码文件(免费开源网站源码)

今天给各位分享免费网页源码文件的知识,其中也会对免费开源网站源码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、好用的免费网站源码网站有哪些? 2、把网站...

4399弹弹堂账号交易平台(4399弹弹堂交易平台官网)

4399弹弹堂账号交易平台(4399弹弹堂交易平台官网)

今天给各位分享4399弹弹堂账号交易平台的知识,其中也会对4399弹弹堂交易平台官网进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、4399弹弹堂号在哪租...