纯 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>
外链发布社区 http://www.fok120.com/ 你字句如珍珠，我珍藏这份情。 回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。 你说得对，我们一起加油，未来可期。 软文发布论坛开幕式圆满成功。 http://www.fok120.com
页:
[1]