【HTML】HTML作业----实现Windows计算器

coding加油站

已于 2023-02-20 20:25:58 修改

阅读量1.7k

点赞数 2

分类专栏： web前端作业 Html+Css+JavaScript期末大作业文章标签： html 前端 javascript

于 2022-08-18 21:01:27 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/126413807

版权

web前端作业同时被 2 个专栏收录

58 篇文章 68 订阅

订阅专栏

Html+Css+JavaScript期末大作业

31 篇文章 26 订阅

订阅专栏

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

windows计算器系统采用html，js技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

windows计算器系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

3.1、普通计算器

3.2、程序员计算器

3.3、科学计算器

相关页面代码：

<!DOCTYPE html>
<html>

<head>
    <title>计算器</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/cal.css">
    <script src="js/cal.js"></script>
</head>

<body>
    <!--标准型-->
    <div class="standard-main" id="std-main">
        <div class="title">
            &nbsp;&nbsp;计算器
        </div>
        <!--结果显示区域-->
        <div class="result">
            <!--显示类型信息-->
            <div class="type" id="std-show-bar">
                ☰&nbsp;&nbsp;&nbsp;Standard
            </div>
            <!--上一步的结果-->
            <div class="pre" id="std-pre-step">
                &nbsp;
            </div>
            <!--第二个/运算结果-->
            <div class="second" id="std-show-input">0</div>
        </div>
        <ul id="std-top-symbol">
            <li value="17">%</li>
            <li value="18">√</li>
            <li value="19"><img src="images/x_2.png" style="height: 18px;" /></li>
            <li value="20"><img src="images/1_x.png" /></li>
        </ul>
        <!--数字和符号-->
        <ul id="std-num-symbol">
            <li value="37">CE</li>
            <li value="38">C</li>
            <li value="39">Back</li>
            <li value="16">÷</li>
            <li class="number" value="7">7</li>
            <li class="number" value="8">8</li>
            <li class="number" value="9">9</li>
            <li value="15">×</li>
            <li class="number" value="4">4</li>
            <li class="number" value="5">5</li>
            <li class="number" value="6">6</li>
            <li value="14">-</li>
            <li class="number" value="1">1</li>
            <li class="number" value="2">2</li>
            <li class="number" value="3">3</li>
            <li value="13">+</li>
            <li value="11">±</li>
            <li class="number" value="0">0</li>
            <li value="10">.</li>
            <li value="12">=</li>
        </ul>
        <!--侧边栏，选择计算器类型-->
        <ul class="type-bar" id="std-type-bar">
            <li class="active">标准</li>
            <li value="2">科学</li>
            <li value="3">程序员</li>
        </ul>
    </div>
    <!--科学型-->
    <div class="science-main" id="sci-main">
        <div class="title">
            &nbsp;&nbsp;计算器
        </div>
        <!--结果显示区域-->
        <div class="sci-result">
            <!--显示类型信息-->
            <div class="type" id="sci-show-bar">
                ☰&nbsp;&nbsp;&nbsp;Science
            </div>
            <!--上一步的结果-->
            <div class="pre" id="sci-pre-step">
                &nbsp;
            </div>
            <!--第二个/运算结果-->
            <div class="second" id="sci-show-input">0</div>
        </div>
        <!--上面的3行运算符-->
        <ul id="sci-top-symbol">
            <li value="21">(</li>
            <li value="22">)</li>
            <li value="23"><img src="images/x_y_sqrt.png" style="height: 18px;width: 22px;" /></li>
            <li value="24">n!</li>
            <li value="25">Exp</li>
            <li value="19"><img src="images/x_2.png" style="height: 18px;" /></li>
            <li value="26"><img src="images/x_y.png" style="height: 18px;" /></li>
            <li value="27">sin</li>
            <li value="28">cos</li>
            <li value="29">tan</li>
            <li value="30"><img src="images/10_x.png" /></li>
            <li value="31">log</li>
            <li value="32">sinh</li>
            <li value="33">cosh</li>
            <li value="34">tanh</li>
        </ul>
        <!--数字和符号-->
        <ul id="sci-num-symbol">
            <li value="35">π</li>
            <li value="37">CE</li>
            <li value="38">C</li>
            <li value="39">Back</li>
            <li value="16">÷</li>
            <li value="18">√</li>
            <li value="7" class="number">7</li>
            <li value="8" class="number">8</li>
            <li value="9" class="number">9</li>
            <li value="15">×</li>
            <li value="17">%</li>
            <li value="4" class="number">4</li>
            <li value="5" class="number">5</li>
            <li value="6" class="number">6</li>
            <li value="14">-</li>
            <li value="20"><img src="images/1_x.png" /></li>
            <li value="1" class="number">1</li>
            <li value="2" class="number">2</li>
            <li value="3" class="number">3</li>
            <li value="13">+</li>
            <li value="36">↑</li>
            <li value="11">±</li>
            <li value="0" class="number">0</li>
            <li value="10">.</li>
            <li value="12">=</li>
        </ul>
        <!--侧边栏，选择计算器类型-->
        <ul class="type-bar" id="sci-type-bar">
            <li value="1">标准</li>
            <li class="active">科学</li>
            <li value="3">程序员</li>
        </ul>
    </div>
    <!--程序员型-->
    <div class="programmer-main" id="pro-main">
        <div class="title">
            &nbsp;&nbsp;计算器
        </div>
        <!--结果显示区域-->
        <div class="pro-result">
            <!--显示类型信息-->
            <div class="type" id="pro-show-bar">
                ☰&nbsp;&nbsp;&nbsp;Programmer
            </div>
            <!--上一步的结果-->
            <div class="pre" id="pro-pre-step">
                &nbsp;
            </div>
            <!--第二个/运算结果-->
            <div class="second" id="pro-show-input">0</div>
            <!--显示16、10、8、2进制的值-->
            <div id="pro-scales">
                <div scale="16">HEX&nbsp;&nbsp;&nbsp;<span>0</span></div>
                <div scale="10" class="scale-active">DEC&nbsp;&nbsp;&nbsp;<span>0</span></div>
                <div scale="8">OCT&nbsp;&nbsp;&nbsp;<span>0</span></div>
                <div scale="2">BIN&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span></div>
            </div>
        </div>
        <!--上面的一行十六进制数字，因为默认是10进制，所以这些按钮默认禁用-->
        <ul id="pro-top-symbol">
            <li class="disable-btn" value="40">A</li>
            <li class="disable-btn" value="41">B</li>
            <li class="disable-btn" value="42">C</li>
            <li class="disable-btn" value="43">D</li>
            <li class="disable-btn" value="44">E</li>
            <li class="disable-btn" value="45">F</li>
        </ul>
        <!--数字和符号-->
        <ul id="pro-num-symbol">
            <li value="36">↑</li>
            <li value="37">CE</li>
            <li value="38">C</li>
            <li value="39">Back</li>
            <li value="16">÷</li>
            <li value="46">And</li>
            <li value="7" class="number" bin-disable="1">7</li>
            <li value="8" class="number" oct-disable="1" bin-disable="1">8</li>
            <li value="9" class="number" oct-disable="1" bin-disable="1">9</li>
            <li value="15">×</li>
            <li value="47">Or</li>
            <li value="4" class="number" bin-disable="1">4</li>
            <li value="5" class="number" bin-disable="1">5</li>
            <li value="6" class="number" bin-disable="1">6</li>
            <li value="14">-</li>
            <li value="48">Not</li>
            <li value="1" class="number">1</li>
            <li value="2" class="number" bin-disable="1">2</li>
            <li value="3" class="number" bin-disable="1">3</li>
            <li value="13">+</li>
            <li value="21">(</li>
            <li value="22">)</li>
            <li value="0" class="number">0</li>
            <li value="10" class="disable-btn" id="pro-point">.</li>
            <li value="12">=</li>
        </ul>
        <!--侧边栏，选择计算器类型-->
        <ul class="type-bar" id="pro-type-bar">
            <li value="1">标准</li>
            <li value="2">科学</li>
            <li class="active">程序员</li>
        </ul>
    </div>
</body>

</html>

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取