笔试题之前偶然看到一家公司的笔试题。题目如下：使用HTML5、CSS3、JavaScript制作一个网页，实现计算器的具体要求如下图形式：文件只有一个：index.html。不允许使用其他文件，不允许使用单独的CSS、JS、PNG、JPG文件。运行环境为谷歌浏览器。必须支持标准的四种算术运算。例如：1+2*3=7。请在收到邮件后48小时内独立完成本次测试并回复本邮件。花了一点时间写了一个笔试题触发的练习项目的第一版，符合笔试题的要求。后来左看看右看看，觉得还可以改进，做得更好，就不断的改进，增加新的功能等等，以至于没完没了，就利用业余时间一点一点的写，从最开始的web版，到后来大概用了3个月的时间写了一个响应式的手机版，再到现在的手机app。最终版的项目地址计算器、项目地址和预览图片在GitHub上：https://github.com/dunizb/sCalc。功能说明最终版功能如下：界面布局采用CSS3flexbox布局。可内置两套主题。计算历史显示，左右滑动即可切换到单手模式（App）。数（App）版本更新检查（App）界面布局由于本项目只是练习，采用了HTML5和CSS3技术，无意兼容IE等低版本浏览器，所以提供的Flexbox布局方式CSS3直接使用。并使用rem单位自动计算大小。计算和计算历史显示功能，使用HTML5提供的本地存储功能LocalStorage，为了方便LocalStorage的使用，简单封装（见js/common.js文件），使得key值根据一定的规则，便于管理。key由appName+id组成。id自动递增，不重复。可以通过id和appName删除一条记录，输入*则全部删除。写完手机网页版的计算器，想把它做成一个APP，在手机上运行。由于我从来没有用过ionic之类的混合APP，所以参考一下，选择Hbuild进行开发和APP打包，非常方便。（HBuild）。单手模式下左右滑动切换到单手模式，需要移动端有触摸事件。使用如下代码判断是左滑还是二次滑：/**单手模式*/functionsingleModel(){varcalc=document.getElementById("calc");varstartX=0,moveX=0,distanceX=0;变量距离=100；varwidth=calc.offsetWidth;//滑动事件calc.addEventListener("touchstart",function(e){startX=e.touches[0].clientX;});calc.addEventListener("touchmove",function(e){moveX=e.touches[0].clientX;distanceX=moveX-startX;isMove=true;});window.addEventListener("touchend",function(e){if(Math.abs(distanceX)>width/3&&isMove){if(distanceX>0){positionFun("right");//向右滑动}else{positionFun("left");//滑动}}startY=moveY=0;isMove=false;});然后把最外面的DIV缩小到80%，这样向左滑动的计算器就缩小移动到左下角了。向右滑动是一样的。电话拨号功能输入手机号码后，长按等号即可拨打手机号码。这个功能没有什么神奇之处。在移动端网络上，看起来像电话号码的数字被处理为电话链接，例如：7位数字，形式为：1234567带括号和加号的数字，形式为：(+86)123456789号码双连线，形状为：00-00-0011111数字，形状为：13800138000可能还有其他类型的数字也会被识别。我们可以通过下面的meta开启电话号码的自动识别：
