热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

纯HTML+CSS+JavaScript编写的计算器运用

一道笔试题之前有时看到一个公司的笔试题,题目以下:用HTML5、CSS3、JavaScript,做一个网页,完成以下图情势盘算器具体要求:有且只要一个文件:index.html。不

一道笔试题

之前有时看到一个公司的笔试题,题目以下:

用HTML5、CSS3、Javascript,做一个网页,完成以下图情势盘算器

《纯 HTML+CSS+Javascript 编写的计算器运用》

具体要求:

  1. 有且只要一个文件:index.html。不允许再有其他文件,不允许再有零丁的CSS、JS、PNG、JPG文件。

  2. 运转环境为 Google Chrome。

  3. 必需支撑规范的四则运算。比方:1+2*3=7。

  4. 请在收到邮件的48小时内自力完本钱测试,并回复本邮件。

一道笔试题激发的一个练手项目

花了一点时候写好的初版,相符了笔试题的要求。厥后左看右看以为还能够革新做的更好,因而给它不停的革新,加新功用等,如许下来没完没了,应用业余时候一点一点的写,从刚开始的网页版,到厥后做相应式的挪动版,再到如今的挪动App,短短续续也许写了3个月吧。

项目地点

最终版的盘算器,项目地点和预览图片在 GitHub:https://github.com/dunizb/sCalc。

功用申明

最终版的功用以下:

  1. 界面规划采纳CSS3 的 Flex box规划

  2. 内置两套主题可切换

  3. 盘算历史纪录显现

  4. 左滑右滑能够切换单手形式(App)

  5. 当输入手机号码后长按等于号能够拨打手机号码(App)

  6. 版本更新搜检(App)

界面规划

因为这个项目只是练手,所以采纳了HTML5个CSS3手艺,也不盘算兼容IE等低版本浏览器,所以直接运用CSS3供应的Flexbox规划体式格局。而且运用rem单元来举行自动盘算尺寸。

盘算盘算历史纪录显现功用,运用HTML5供应的当地存储功用之Local Storage,为了轻易运用Local Storage,对它举行了简朴的封装(见js/common.js文件)使之key值按肯定规律临盆,轻易治理。

《纯 HTML+CSS+Javascript 编写的计算器运用》

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.abs(distanceX) > width/3 && isMove){
if( distanceX > 0 ){
positionFun("right"); //右滑
}else{
positionFun("left"); //作滑
}
}
startY = moveY = 0;
isMove = false;
});
}

假如是坐滑,就position:absolut;left:0,bottom:0,再把最外层DIV减少到80%,如许就完成了左滑盘算器减少挪动到左下角。右滑道理一样。

电话拨打功用

当输入手机号码后长按等于号能够拨打手机号码。这个功用没什么奇异,在挪动Web上会对那些看起来像是电话号码的数字处置惩罚为电话链接,比方:

  • 7位数字,形如:1234567

  • 带括号及加号的数字,形如:(+86)123456789

  • 双连接线的数字,形如:00-00-00111

  • 11位数字,形如:13800138000

能够另有其他范例的数字也会被辨认。我们能够经由过程以下的meta来开启电话号码的自动辨认:

开启电话功用

123456

开启短信功用:

123456

然则,在Android体系上,只能挪用体系的拨号界面,在iOS上则能调过这一步直接把电话拨打出去。

版本更新搜检

在关于页面,有一个版本更新搜检按钮,就可以搜检是不是有新版本,这个功用的道理是发送一个JSOPN要求去搜检服务器上的JSON文件,比对版本号,假如服务器上的版本比APP的版本高则会提醒有新版本能够下载。\

客户端Javascript代码:

function updateApp(){
//搜检新版本
var updateApp = document.getElementById("updateApp");
updateApp.Onclick= function(){
var _this = this;
$.ajax({
type:'get',
url:'http://duni.sinaapp.com/demo/app.php?jsOncallback=?',
dataType:'jsonp',
beforeSend : function(){
_this.innerHTML = " 正在搜检新版本...";
},
success:function(data){
var newVer = data[0].version;
if(newVer > appConfig.version){
var log = data[0].log;
var downloadUrl = data[0].downloadUrl;
if(confirm("搜检到新版本【"+newVer+"】,是不是马上下载?\n 更新日记:\n " + log)){
var a = document.getElementById("telPhone");
a.href = downloadUrl;
a.target = "_blank";
a.click();
}
}else{
alert("你很潮哦,当前已经是最新版本!");
}
_this.innerHTML = " 搜检新版本";
},
error:function(msg){
_this.innerHTML = " 搜检新版本";
alert("搜检失利:"+msg.message);
}
});
}
}

服务端JSON:

[
{
"version":"3.1.0",
"downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk",
"hashCode":"20160812224616",
"log":"1.新增切换主题功用 \n 2.新增单手切换形式功用 \n 3.调解UI "
}
]

下个版本设计

当前3.1.0版本还存在一些题目:

  1. 因为JS自身存在盘算浮点数精度丧失题目,所以这个题目在项目中赞同存在,须要本身去处置惩罚这个题目

  2. 因为运用了第三方的天色接口,用了jquery.Ajax要领,所以违犯了运用纯原生写的初志。

所以下个版本的开辟设计为:

  1. 处理浮点数盘算精度题目

  2. 把猎取天色信息的jquery.Ajax要领替换为原生Javascript代码,本身封装JSONP要求函数

  3. 运用面向对象体式格局重构APP

迎接人人到github上来看看,假如喜好能够star、watch一下,或提issue。


推荐阅读
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • sklearn数据集库中的常用数据集类型介绍
    本文介绍了sklearn数据集库中常用的数据集类型,包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集,包含了波士顿506处房屋的13种不同特征以及房屋价格,适用于回归任务。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • HTML学习02 图像标签的使用和属性
    本文介绍了HTML中图像标签的使用和属性,包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项,帮助读者更好地理解和应用图像标签。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
author-avatar
叶肖帆Seantq_693
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有