HTML语言简易计算器

最新推荐文章于 2023-10-17 16:18:13 发布

老衲法号小杰

最新推荐文章于 2023-10-17 16:18:13 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ASP.NET 文章标签： ASP.NET

本文链接：https://blog.youkuaiyun.com/IT_xiaojie/article/details/8648588

ASP.NET 专栏收录该内容

0 篇文章

订阅专栏

这个博客展示了如何使用HTML和JavaScript创建一个简单的计算器。HTML部分定义了计算器的布局，包括数字按钮和运算符按钮。JavaScript部分实现了点击按钮时的功能，如添加数字到输入框、执行计算等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>小键盘</title>
<script language="javascript" type="text/javascript">

function Button_onclick(num) {
if(Text1.value=='0')
    Text1.value=num;
else 
    Text1.value=Text1.value + num;
}

function Button17_onclick(){
Text1.value=Text2.value+Text1.value;
Text1.value=eval(Text1.value);
Text2.value='';
}


function Button1_onclick(num) {
Text2.value=Text1.value;
Text1.value=num;
}


function Button10_onclick() {
Text1.value='0';
Text2.value='';
}

</script>
</head>
<body>
    <table>
        <tr>
            <td colspan="3" style="height: 39px">
                <input id="Text2" style="width: 315px; height: 13px;" type="text" /><br />
                <input id="Text1" style="width: 315px; height: 13px;" type="text" value="0" /></td>
            <td style="width: 40px; height: 39px;">
                <input id="Button17" style="width: 104px; height: 38px;" type="button" value="=" onclick="return Button17_onclick()"  /></td>
        </tr>
        <tr>
            <td style="width: 100px">
                <input id="Button1" style="width: 103px" type="button" value="1"  onclick="return Button_onclick(Button1.value)" /></td>
            <td style="width: 100px">
                <input id="Button2" style="width: 103px" type="button" value="2"  onclick="
                return Button_onclick(Button2.value)"/></td>
            <td style="width: 88px">
                <input id="Button13" style="width: 103px" type="button" value="3" onclick="return Button_onclick(Button13.value)"/></td>
            <td style="width: 40px">
                <input id="Button15" style="width: 103px" type="button" value="+" onclick="return Button1_onclick(Button15.value)"  /></td>
        </tr>
        <tr>
            <td style="width: 100px; height: 21px">
                <input id="Button4" style="width: 103px" type="button" value="4"  onclick="return Button_onclick(Button4.value)"/></td>
            <td style="width: 100px; height: 21px">
                <input id="Button5" style="width: 103px" type="button" value="5"  onclick="return Button_onclick(Button5.value)"/></td>
            <td style="width: 88px; height: 21px">
                <input id="Button3" style="width: 103px" type="button" value="6"  onclick="return Button_onclick(Button3.value)"/></td>
            <td style="width: 40px; height: 21px">
                <input id="Button14" style="width: 103px" type="button" value="-"  onclick="return Button1_onclick(Button14.value)"  /></td>
        </tr>
        <tr>
            <td style="width: 100px">
                <input id="Button7" style="width: 103px" type="button" value="7"  onclick="return Button_onclick(Button7.value)"/></td>
            <td style="width: 100px">
                <input id="Button8" style="width: 103px" type="button" value="8"  onclick="return Button_onclick(Button8.value)" /></td>
            <td style="width: 88px">
                <input id="Button6" style="width: 103px" type="button" value="9"  onclick="return Button_onclick(Button6.value)"/></td>
            <td style="width: 40px">
                <input id="Button18" style="width: 103px" type="button" value="*"  onclick="return Button1_onclick(Button18.value)" /></td>
        </tr>
        <tr>
            <td style="width: 100px">
                <input id="Button10" style="width: 103px" type="button" value="C" onclick="return Button10_onclick()"  /></td>
            <td style="width: 100px">
                <input id="Button11" style="width: 103px" type="button" value="0"  onclick="return Button_onclick(Button11.value)"/></td>
            <td style="width: 88px">
                <input id="Button9" style="width: 103px; height: 23px;" type="button" value="."  onclick="return Button_onclick(Button9.value)" /></td>
            <td style="width: 40px">
                <input id="Button16" style="width: 103px" type="button" value="/"  onclick="return Button1_onclick(Button16.value)" /></td>
        </tr>
    </table>
</body>
</html>