js简单计算器的实现,javascript简单计算器

最新推荐文章于 2024-08-29 21:17:56 发布

阳阳2013哈哈

最新推荐文章于 2024-08-29 21:17:56 发布

阅读量174

点赞数

文章标签：人工智能

本文链接：https://blog.csdn.net/mynote/article/details/134650820

版权

本文介绍了如何使用JavaScript、HTML和CSS创建一个基础的网页计算器，包括基本算术运算、科学计算功能以及清除和退格操作。

摘要由CSDN通过智能技术生成

大家好，给大家分享一下js简单计算器的实现，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

基于JavaScript的网页计算器

基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能

界面如下：
在这里插入图片描述

代码如下：

有兴趣的朋友欢迎继续完善 ^ _ ^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页计算器</title>
    <style type="text/css">
    /* 外框样式 */
        table{
    
            margin: 15px auto;
            font-size: 24px;
            border: 5px outset orange;;
        }
        /* 内框样式 */
        #tab-1, #tab-2, #tab-3, #tab-0{
    
            border: 3px outset rgba(15, 10, 10, 0.3);
        }
        /* 文本框添加阴影 */
        input{
    
            outline: none;
            box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.8) inset;
        }
        /* 按钮添加样式 */
        input[type = "button"]{
    
            width: 60px;
            height: 40px;
            border-radius: 5px;
            background: #fff;
            box-shadow: 3px 3px 2px rgba(100, 100, 100, 0.8) inset;
        }
        /* 文本框样式 */
        #txtnum{
    
            text-align: right;
            height: 50px;
            width: 100%;
            background: #fff;
            font-size: 24px;
        }
        td{
    
            padding: 5px;
            background-color: #b0b0b0;
        }
    </style>
</head>
<body>
<!-- 带有科学计算功能的计算器
    要用到Math 对象的方法和属性 -->
    <!-- cellspacing="0"取消单元格空隙 -->
    <table cellspacing="0">
        <tr>
            <td colspan="2"><input type="text" id="txtnum" value="0"></td>
            <td style="text-align: center;">
                <table id="tab-0">
                    <tr>
                        <td><input type="button" id="clear" value="清除" 
                            onclick="txtnum.value='0'; result=0"></td>
                        <td><input type="button" id="tuige" value="退格"
                            onclick="backspace()"></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table id="tab-1">
                    <tr>
                        <td><input type="button" value="sin" onclick="math('sin')"></td>
                        <td><input type="button" value="cos" onclick="math('cos')">