用JS语言编写计算机

最新推荐文章于 2022-07-26 23:54:47 发布

domunweb

最新推荐文章于 2022-07-26 23:54:47 发布

阅读量3.3k

点赞数 3

分类专栏：前端文章标签： javascript 博客计算机

本文链接：https://blog.csdn.net/domunweb/article/details/73610860

版权

本文介绍了如何使用JavaScript语言创建一个简易计算器。通过HTML和CSS构建界面，利用JS处理按钮点击事件，实现数字输入、小数点添加、运算符判断及等号计算功能，包括删除和清除屏幕内容的操作。示例代码中，作者推荐使用console.log()或alert()进行测试，并给出了switch语句的替代方案。

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

本周因为要考试，所以博客写的有些迟。上周我们JS没有学习新的内容，对之前学的知识进行了总结复习。喜欢搞事情的我们做出来了一个本人感觉很有趣的东西，简易计算器。
下面是代码部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算机</title>
        <style type="text/css">
            *{
    margin: 0;padding: 0;}
            table{
    width: 400px;margin: 30px auto;}
            table tr td{ width: 100px;height: 52px;text-align: center;line-height: 50px;}
            td input[type=button]{
    width: 99%;height: 99%;font-size: 32px;background: #ddd;border: none;}
            td input[type=text]{
    width: 99%;height: 99%;text-align: right;font-size: 32px;}
            #show{
    margin-bottom: 10px;}
            .btn:hover {
    background: #ccc;}
        </style>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0">
            <tr><td colspan="4"><input type="text" disabled id="show" value="" /></td></tr>
            <tr>
                <td colspan="2"><input class="btn" type="button"id="" value="DEL" /> </td>
                <td colspan="2"><input class="btn" type="button"id="" value="C" /> </td>
            </tr>
            <tr>
                <td><input class="btn" type="but