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

    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、科学计算器

    相关页面代码：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <title>计算器title>
    6.     <meta charset="UTF-8">
    7.     <link rel="stylesheet" href="css/cal.css">
    8.     <script src="js/cal.js">script>
    9. head>
    10.  
    11. <body>
    12.     
    13.     <div class="standard-main" id="std-main">
    14.         <div class="title">
    15.               计算器
    16.         div>
    17.         
    18.         <div class="result">
    19.             
    20.             <div class="type" id="std-show-bar">
    21.                 ☰   Standard
    22.             div>
    23.             
    24.             <div class="pre" id="std-pre-step">
    25.                  
    26.             div>
    27.             
    28.             <div class="second" id="std-show-input">0div>
    29.         div>
    30.         <ul id="std-top-symbol">
    31.             <li value="17">%li>
    32.             <li value="18">√li>
    33.             <li value="19"><img src="images/x_2.png" style="height: 18px;" />li>
    34.             <li value="20"><img src="images/1_x.png" />li>
    35.         ul>
    36.         
    37.         <ul id="std-num-symbol">
    38.             <li value="37">CEli>
    39.             <li value="38">Cli>
    40.             <li value="39">Backli>
    41.             <li value="16">÷li>
    42.             <li class="number" value="7">7li>
    43.             <li class="number" value="8">8li>
    44.             <li class="number" value="9">9li>
    45.             <li value="15">×li>
    46.             <li class="number" value="4">4li>
    47.             <li class="number" value="5">5li>
    48.             <li class="number" value="6">6li>
    49.             <li value="14">-li>
    50.             <li class="number" value="1">1li>
    51.             <li class="number" value="2">2li>
    52.             <li class="number" value="3">3li>
    53.             <li value="13">+li>
    54.             <li value="11">±li>
    55.             <li class="number" value="0">0li>
    56.             <li value="10">.li>
    57.             <li value="12">=li>
    58.         ul>
    59.         
    60.         <ul class="type-bar" id="std-type-bar">
    61.             <li class="active">标准li>
    62.             <li value="2">科学li>
    63.             <li value="3">程序员li>
    64.         ul>
    65.     div>
    66.     
    67.     <div class="science-main" id="sci-main">
    68.         <div class="title">
    69.               计算器
    70.         div>
    71.         
    72.         <div class="sci-result">
    73.             
    74.             <div class="type" id="sci-show-bar">
    75.                 ☰   Science
    76.             div>
    77.             
    78.             <div class="pre" id="sci-pre-step">
    79.                  
    80.             div>
    81.             
    82.             <div class="second" id="sci-show-input">0div>
    83.         div>
    84.         
    85.         <ul id="sci-top-symbol">
    86.             <li value="21">(li>
    87.             <li value="22">)li>
    88.             <li value="23"><img src="images/x_y_sqrt.png" style="height: 18px;width: 22px;" />li>
    89.             <li value="24">n!li>
    90.             <li value="25">Expli>
    91.             <li value="19"><img src="images/x_2.png" style="height: 18px;" />li>
    92.             <li value="26"><img src="images/x_y.png" style="height: 18px;" />li>
    93.             <li value="27">sinli>
    94.             <li value="28">cosli>
    95.             <li value="29">tanli>
    96.             <li value="30"><img src="images/10_x.png" />li>
    97.             <li value="31">logli>
    98.             <li value="32">sinhli>
    99.             <li value="33">coshli>
    100.             <li value="34">tanhli>
    101.         ul>
    102.         
    103.         <ul id="sci-num-symbol">
    104.             <li value="35">πli>
    105.             <li value="37">CEli>
    106.             <li value="38">Cli>
    107.             <li value="39">Backli>
    108.             <li value="16">÷li>
    109.             <li value="18">√li>
    110.             <li value="7" class="number">7li>
    111.             <li value="8" class="number">8li>
    112.             <li value="9" class="number">9li>
    113.             <li value="15">×li>
    114.             <li value="17">%li>
    115.             <li value="4" class="number">4li>
    116.             <li value="5" class="number">5li>
    117.             <li value="6" class="number">6li>
    118.             <li value="14">-li>
    119.             <li value="20"><img src="images/1_x.png" />li>
    120.             <li value="1" class="number">1li>
    121.             <li value="2" class="number">2li>
    122.             <li value="3" class="number">3li>
    123.             <li value="13">+li>
    124.             <li value="36">↑li>
    125.             <li value="11">±li>
    126.             <li value="0" class="number">0li>
    127.             <li value="10">.li>
    128.             <li value="12">=li>
    129.         ul>
    130.         
    131.         <ul class="type-bar" id="sci-type-bar">
    132.             <li value="1">标准li>
    133.             <li class="active">科学li>
    134.             <li value="3">程序员li>
    135.         ul>
    136.     div>
    137.     
    138.     <div class="programmer-main" id="pro-main">
    139.         <div class="title">
    140.               计算器
    141.         div>
    142.         
    143.         <div class="pro-result">
    144.             
    145.             <div class="type" id="pro-show-bar">
    146.                 ☰   Programmer
    147.             div>
    148.             
    149.             <div class="pre" id="pro-pre-step">
    150.                  
    151.             div>
    152.             
    153.             <div class="second" id="pro-show-input">0div>
    154.             
    155.             <div id="pro-scales">
    156.                 <div scale="16">HEX   <span>0span>div>
    157.                 <div scale="10" class="scale-active">DEC   <span>0span>div>
    158.                 <div scale="8">OCT   <span>0span>div>
    159.                 <div scale="2">BIN    <span>0span>div>
    160.             div>
    161.         div>
    162.         
    163.         <ul id="pro-top-symbol">
    164.             <li class="disable-btn" value="40">Ali>
    165.             <li class="disable-btn" value="41">Bli>
    166.             <li class="disable-btn" value="42">Cli>
    167.             <li class="disable-btn" value="43">Dli>
    168.             <li class="disable-btn" value="44">Eli>
    169.             <li class="disable-btn" value="45">Fli>
    170.         ul>
    171.         
    172.         <ul id="pro-num-symbol">
    173.             <li value="36">↑li>
    174.             <li value="37">CEli>
    175.             <li value="38">Cli>
    176.             <li value="39">Backli>
    177.             <li value="16">÷li>
    178.             <li value="46">Andli>
    179.             <li value="7" class="number" bin-disable="1">7li>
    180.             <li value="8" class="number" oct-disable="1" bin-disable="1">8li>
    181.             <li value="9" class="number" oct-disable="1" bin-disable="1">9li>
    182.             <li value="15">×li>
    183.             <li value="47">Orli>
    184.             <li value="4" class="number" bin-disable="1">4li>
    185.             <li value="5" class="number" bin-disable="1">5li>
    186.             <li value="6" class="number" bin-disable="1">6li>
    187.             <li value="14">-li>
    188.             <li value="48">Notli>
    189.             <li value="1" class="number">1li>
    190.             <li value="2" class="number" bin-disable="1">2li>
    191.             <li value="3" class="number" bin-disable="1">3li>
    192.             <li value="13">+li>
    193.             <li value="21">(li>
    194.             <li value="22">)li>
    195.             <li value="0" class="number">0li>
    196.             <li value="10" class="disable-btn" id="pro-point">.li>
    197.             <li value="12">=li>
    198.         ul>
    199.         
    200.         <ul class="type-bar" id="pro-type-bar">
    201.             <li value="1">标准li>
    202.             <li value="2">科学li>
    203.             <li class="active">程序员li>
    204.         ul>
    205.     div>
    206. body>
    207.  
    208. html>

    总结

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

  • 相关阅读:
    QT+OSG/osgEarth编译之二十八：cairo+Qt编译（一套代码、一套框架，跨平台编译，版本：cairo-1.16.0）
    【MICCAI 2022】PHTrans：并行聚合全局和局部表示以进行医学图像分割
    java毕业设计我爱短视频管理系统mybatis+源码+调试部署+系统+数据库+lw
    commonJS和ES6模块化
    Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案
    Vite实现原理
    蓝桥杯13届JAVA A组 国赛
    uni-app：showModal中实现弹窗中文本框输入
    [QT编程系列-45]: 内存检测工具Dr.Memory在Windows上的使用实践与详解
    8. python str( )函数
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126413807