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

【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！

之前有时看到一个公司的笔试题，标题如下：

具体请求：

有且只有一个文件：index.html。不许可再有其他文件，不许可再有零丁的CSS、JS、PNG、JPG文件。
运行情况为 Google Chrome。
必须支撑标准的四则运算。例如：1+2*3=7。
请在收到邮件的48小时内自力完成本测试，并答复本邮件。

花了一点时光写好的第一版，相符了笔试题的请求。后来左看竽暌挂看认为还可以改进做的更好，于是给它赓续的改进，加新功能等，如许下来没完没了，应用业余时光一点一点的写，大年夜刚开端的网页版，到后来做响应式的移动版，再到如今的移动App，短短续续大年夜概写了3个月吧。

项目地址

最终版的寂?骥，项目地址和预览图片在 GitHub：https://github.com/dunizb/sCalc。

功能解释

最终版的功能如下：

界面结构成取CSS3 的 Flex box构造
内置两套主题可切换
计算汗青记录显示
左滑右滑可以切换单手模式(App)
当输入手机号码后长按等于号可以拨打手机号码(App)
版本更新检查(App)

一道笔试题

界面构造

因为这个项目只是练手,所以采取了HTML5个CSS3技巧，也不计算兼容IE等低版本浏览器，所以直接应用CSS3供给的Flexbox构造方法。并且应用rem单位来进行主动计算尺寸。

计算计算汗青记录显示功能，应用HTML5供给的本地存储功能之Local Storage，为了便利应用Local Storage，对它进行了简单的封装(见js/common.js文件)使之key值按必定规律临盆，便利治理。

key由appName+id构成，id是主动增长不反复的，可以按id和appName删除一笔记录，输入*则全部删除。

打包APP

移动Web版寂?骥写完后，又想把他做成APP在手机上运行，因为本人没用过混淆APP诸如ionic之类的框架，所以参考了一下，选择了Hbuild来进行开辟和APP的打包，异常便利。(HBuild).

单手模式

左滑右滑可以切换单手模式，这就须要移动端的touch事宜了，应用如下代码断定是左滑照样右滑：

/** 单手模式 */ 
 
function singleModel(){ 
 
    var calc = document.getElementById("calc"); 
 
    var startX = 0,moveX = 0,distanceX = 0; 
 
    var distance = 100;   
 
    var width = 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.	
			 1/4    1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　谷歌开放量子计算机 欲将其转变成为云计算服务
            【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！

            谷歌(微博)多年来把大年夜量的资金和时光都投入到现代技巧最大志勃勃的妄图：打造工作级量子计算机。如今>>>详细阅读


本文标题：纯HTML+CSS+JS编写的计算器应用
地址：http://www.17bianji.com/lsqh/36274.html
 1/2    1