b1gc8v 发表于 2024-6-29 13:34:40

纯 HTML+CSS+JS 编写的计算器应用


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">一道笔试题</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">之前偶然看到一个<span style="color: black;">机构</span>的笔试题,题目如下:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用HTML5、CSS3、JavaScript,做一个网页,实现如下图形式计算器</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-7d1247b497b1f333f81b7173714fe88f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">详细</span><span style="color: black;">需求</span>:</p>有且<span style="color: black;">仅有</span>一个文件:index.html。不<span style="color: black;">准许</span>再有其他文件,不<span style="color: black;">准许</span>再有单独的CSS、JS、PNG、JPG文件。运行环境为 Google Chrome。<span style="color: black;">必要</span>支持标准的四则运算。例如:1+2*3=7。请在收到邮件的48小时内独立完成本测试,并回复本邮件。<h2 style="color: black; text-align: left; margin-bottom: 10px;">一道笔试题<span style="color: black;">诱发</span>的一个练手项目</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">花了一点时间写好的<span style="color: black;">第1</span>版,符合了笔试题的<span style="color: black;">需求</span>。后来左看右看觉得还<span style="color: black;">能够</span>改进做的更好,于是给它<span style="color: black;">持续</span>的改进,加新功能等,<span style="color: black;">这般</span>下来没完没了,利用业余时间一点一点的写,从刚<span style="color: black;">起始</span>的网页版,到后来做响应式的移动版,再到<span style="color: black;">此刻</span>的移动App,短短续续大概写了3个月吧。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">项目<span style="color: black;">位置</span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最后</span>版的计算器,项目<span style="color: black;">位置</span>和预览<span style="color: black;">照片</span>在 GitHub:<a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">github.com/dunizb/sCalc</span></a>。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">功能说明</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最后</span>版的功能如下:</p>界面布局采用CSS3 的 Flex box布局内置两套主题可切换计算历史记录<span style="color: black;">表示</span>左滑右滑<span style="color: black;">能够</span>切换单手模式(App)当输入手机号码后长按等于号<span style="color: black;">能够</span>拨打手机号码(App)版本更新<span style="color: black;">检测</span>(App)<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">界面布局</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因为</span>这个项目只是练手,<span style="color: black;">因此</span>采用了HTML5个CSS3技术,<span style="color: black;">亦</span>不打算兼容IE等低版本浏览器,<span style="color: black;">因此</span>直接<span style="color: black;">运用</span>CSS3<span style="color: black;">供给</span>的Flexbox布局方式。并且<span style="color: black;">运用</span>rem单位来进行自动计算尺寸。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">计算计算历史记录<span style="color: black;">表示</span>功能,<span style="color: black;">运用</span>HTML5<span style="color: black;">供给</span>的本地存储功能之Local Storage,为了方便<span style="color: black;">运用</span>Local Storage,对它进行了简单的封装(见js/common.js文件)使之key值按<span style="color: black;">必定</span>规律生产,方便管理。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-05a360f798f0e65806daba8f5ff10f69_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">key由appName+id<span style="color: black;">构成</span>,id是自动增长不重复的,<span style="color: black;">能够</span>按id和appName删除一条记录,输入*则<span style="color: black;">所有</span>删除。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">打包APP</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">移动Web版计算器写完后,又想把他做成APP在手机上运行,<span style="color: black;">因为</span><span style="color: black;">自己</span>没用过混合APP诸如ionic之类的框架,<span style="color: black;">因此</span>参考了一下,<span style="color: black;">选取</span>了Hbuild来进行<span style="color: black;">研发</span>和APP的打包,非常方便。(HBuild).</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">单手模式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">左滑右滑<span style="color: black;">能够</span>切换单手模式,这就<span style="color: black;">必须</span>移动端的touch事件了,使用如下代码判断是左滑还是右滑:</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">/** 单手模式 */
      function singleModel(){
      var calc = document.getElementById("calc");
      var startX = 0,moveX = 0,distanceX = 0;
      var distance = 100;
      va</div>




页: [1]
查看完整版本: 纯 HTML+CSS+JS 编写的计算器应用