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

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

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

今天给各位分享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://60200875.com/post/2820.html

分享给朋友:

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

小程序开发公司十大排名西安(小程序开发公司排行榜前10)

小程序开发公司十大排名西安(小程序开发公司排行榜前10)

本篇文章给大家谈谈小程序开发公司十大排名西安,以及小程序开发公司排行榜前10对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、小程序的开发公司排名 2、国内小程序开发公司...

微信小程序传奇至尊破解版(传奇至尊小程序礼包领取)

微信小程序传奇至尊破解版(传奇至尊小程序礼包领取)

本篇文章给大家谈谈微信小程序传奇至尊破解版,以及传奇至尊小程序礼包领取对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、小程序传奇至尊有app么 2、微信小程序传奇至尊进...

数字藏品会亏钱吗(数字藏品有前途么么)

数字藏品会亏钱吗(数字藏品有前途么么)

本篇文章给大家谈谈数字藏品会亏钱吗,以及数字藏品有前途么么对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、太一数字藏品官网能赚钱吗 2、之前听说数字藏品也能赚钱是真的吗...

装修找活平台app哪个好2022(找装修活的平台)

装修找活平台app哪个好2022(找装修活的平台)

本篇文章给大家谈谈装修找活平台app哪个好2022,以及找装修活的平台对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、装修工在哪个平台上可以接活? 2、装修工在哪个平台...

维修师傅网上接单平台(京东维修师傅平台)

维修师傅网上接单平台(京东维修师傅平台)

本篇文章给大家谈谈维修师傅网上接单平台,以及京东维修师傅平台对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、装修工人接单平台有那些平台。求推荐 2、网上接单安装有哪些平...

国家教育资源平台下载(一师一优课国家教育资源平台下载)

国家教育资源平台下载(一师一优课国家教育资源平台下载)

本篇文章给大家谈谈国家教育资源平台下载,以及一师一优课国家教育资源平台下载对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、“国家中小学网络云平台”的课件怎么下载? 2、...