html前端小功能—简易计算器的代码分享及思路

最新推荐文章于 2023-12-05 18:30:09 发布

云南仟龙Mark

最新推荐文章于 2023-12-05 18:30:09 发布

阅读量1.9k

点赞数 1

文章标签：前端 html javascript

原文链接：https://blog.51cto.com/u_15111999/4835288

版权

今天分享下”html前端小功能—简易计算器的代码分享及思路“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。一般思路是将按钮内容以字符串的形式存储在文字框中，当按钮=调用eval计算结果，然后将结果输出到文字框中,有需要的朋友可以参考一下

代码如下:

<!DOCTYPE html>

<html>

<meta name="content-type" content="text/html; charset=UTF-8">

<head>

<title>Calculator</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="affff" >

<!--定义按键表格,每个按键对应一个事件触发-->

<table border="1" align="center" bgColor="#bbff77"

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" οnclick="onclicknum(1)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="2" id="2" οnclick="onclicknum(2)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="3" id="3" οnclick="onclicknum(3)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="+" id="add" οnclick="onclicknum('+')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<td>

<input type="button" value="4" id="4" οnclick="onclicknum(4)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="5" id="5" οnclick="onclicknum(5)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="6" id="6" οnclick="onclicknum(6)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="-" id="sub" οnclick="onclicknum('-')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<td>

<input type="button" value="7" id="7" οnclick="onclicknum(7)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="8" id="8" οnclick="onclicknum(8)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="9" id="9" οnclick="onclicknum(9)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="*" id="mul" οnclick="onclicknum('*')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" value="0" id="0" οnclick="onclicknum(0)"

<p>http://www.qlyl1688.com/products/ycxsys.html</p>

style="height: 70px; width: 190px; font-size: 35px">

</td>

<td>

<input type="button" value="." id="point" οnclick="onclicknum('.')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="/" id="division"

οnclick="onclicknum('/')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<td colspan="2">

<input type="button" value="Del" id="clear"

οnclick="onclickclear()"

style="height: 70px; width: 190px; font-size: 35px" />

</td>

<td colspan="2">

<input type="button" value="=" id="result"

οnclick="onclickresult()"

style="height: 70px; width: 190px; font-size: 35px" />

</td>



</tr>



</table>

</body>

</html>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
html前端小功能—简易计算器的代码分享及思路

今天分享下”html前端小功能—简易计算器的代码分享及思路“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。一般思路是将按钮内容以字符串的形式存储在文字框中，当按钮=调用eval计算结果，然后将结果输出到文字框中,有需要的朋友可以参考一下代码如下:<!DOCTYPE html><html><meta name="content-type" content="text/html
复制链接

扫一扫