JS+CSS实现小计算器

最新推荐文章于 2025-06-17 12:24:11 发布

原创最新推荐文章于 2025-06-17 12:24:11 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

JS/CSS/Web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用HTML和JavaScript构建一个基本的计算器界面，包括输入框、按钮和简单的数学运算逻辑。

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

<html>
<head>
<style>
body
{
    color:#004c75;
}
.button
{
    height:25px;
    width:25px;
    background-color:#7abaff;
    margin:1px 1px 1px 1px;
    float:left;
    text-align:center;
    border:1px solid #ccdef2;
}
.panel
{
    width:110px;
    height:161px;
    margin:auto;
    border:1px solid #5f91c7;
    background-color:#004c75;
    margin-top:80px;
}
.res
{
    width:110px;
    height:25px;
    border:1px solid #5f91c7;
    background-color:#fffeab;
}
</style>
<script>
function Y(a,xn)
{
    var fxn = xn*xn - a;
    return fxn;
}
function K(xn)
{
    var kxn = 2*xn;
    return kxn;
}
function Rec(xn,fxn,kxn)
{
    xn = xn - (fxn/kxn);
    return xn;
}
//牛顿迭代
function Newton()
{
    var xn = 5;
     
    var a = document.getElementById("scr").value;
    if(a == "")
    {a = 0;return a;}
    var fxn;
    var kxn;
    for(i =0;i<10;i++)
    {
        fxn = Y(a,xn);
        kxn = K(xn);
        xn = Rec(xn,fxn,kxn);
    }
    document.getElementById("scr").value = xn;
     
}
function Back()
{
    var s = document.getElementById("scr").value;
    l = s.length-1;
 
    document.getElementById("scr").value = s.slice(0,l);
 
}
function Squr()
{
    document.getElementById("scr").value *= document.getElementById("scr").value;
}
function AddStr(x)
{
    document.getElementById("scr").value += x;
}
function Cln()
{
document.getElementById("scr").value = "";
}
function Res()
{
     
    var r = document.getElementById("scr").value;
    if(r == "")
    {   r = 0;
    return ;}
    r = eval(r);
    document.getElementById("scr").value = r;
}
var x = 1;
var k = 42;
//绘制计算器
document.write("<div class='panel'>");
document.write("<input id='scr' type='text' class='res'>");
document.write("</input>");
document.write("<button class = 'button' >"+String.fromCharCode(32)+"</button>");
 
document.write("<button class = 'button'  onClick='Newton()'>"+String.fromCharCode(8730)+"</button>");
document.write("<button class = 'button' onClick='Back()' >"+String.fromCharCode(8592)+"</button>");
document.write("<button class = 'button' onClick='Cln()'>"+String.fromCharCode(67)+"</button>");
for(i = 0;i < 3;i++)
{
    document.write("<div>");
    for(j = 0;j < 3;j++)
    {
         
        document.write("<button class = 'button' onClick='AddStr("+x+")'>"+x+"</button>");
         
        x++;
    }
    if(i<2)
    {document.write("<button class = 'button' onClick='AddStr(""+String.fromCharCode(k)+"")'>"+String.fromCharCode(k)+"</button>");}
    else {document.write("<button class = 'button' onClick='AddStr(""+String.fromCharCode(45)+"")'>"+String.fromCharCode(45)+"</button>");}
    k++;
    document.write("</div>");
}
document.write("<button class = 'button' onClick='AddStr(""+String.fromCharCode(48)+"")'>"+String.fromCharCode(48)+"</button>");
document.write("<button class = 'button' onClick='AddStr(""+String.fromCharCode(46)+"")'>"+String.fromCharCode(46)+"</button>");
document.write("<button class = 'button' onClick='Res()'>"+String.fromCharCode(61)+"</button>");
document.write("<button class = 'button' onClick='Squr(""+String.fromCharCode(178)+"")'>x"+String.fromCharCode(178)+"</button>");
 
 
 
 
document.write("</div>");
</script>
</head>
<body>
<script>
 
</script>
</body>
</html>