这两天通过学习了JS,按照要求做了个简单的WEB前端计算器。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <script> var init=""; var lastop=""; var num1=0; var num2=0; var rs=0; function display(state){ init+=state; show(init); } function show(str){ document.getElementById("input").value=str; } function getOp(op){ lastop=op; num1=parseFloat(init); init=""; } function getResult(){ num2=parseFloat(init); init=""; rs=cal(num1,num2,lastop); show(rs); } function fan(){ init=String((parseFloat(document.getElementById("input").value)*(-1))); document.getElementById("input").value=init; } function cal(n1,n2,ope){ switch(ope){ case '+': return(n1+n2);break; case '-': return(n1-n2);break; case '*': return(n1*n2);break; case '/': if(n2!=0){ return(n1/n2); break;} else{ break;} case '%': return(n1%n2);break; } } function ce(){ var size=init.length; init=init.substring(0,size-1); document.getElementById("input").value=init; } function clean(){ init=""; lastop=""; num1=0; num2=0; rs=0; document.getElementById("input").value="0."; } </script> </head> <body > <h1 align="center" style="font-family:楷体; color:#999999; ">网页计算器</h1> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" > <table width="669" height="127" border="1" align="center"> <tr> <td align="center" colspan="3"><label for="input"></label> <input type="text" name="input" width="200%" id="input" value="0."/></td> <td align="center"><input type="button" name="C" id="C" value=" C " onclick="clean()"/></td> <td align="center"><input type="button" name="CE" id="CE" value=" CE " onclick="ce()"/></td> </tr> <tr> <td align="center"><input type="button" name="seven" id="seven" value=" 7 " onclick="display('7')"/></td> <td align="center"><input type="button" name="eight" id="eight" value=" 8 " onclick="display('8')" /></td> <td align="center"><input type="button" name="nine" id="nine" value=" 9 " onclick="display('9')" /></td> <td align="center"><input type="button" name="+/-" id="+/-" value=" +/- " onclick="fan()"/></td> <td align="center"><input type="button" name="%" id="%" value=" % " onclick="getOp('%')"/></td> </tr> <tr> <td align="center"><input type="button" name="four" id="four" value=" 4 " onclick="display('4')" /></td> <td align="center"><input type="button" name="five" id="five" value=" 5 " onclick="display('5')" /></td> <td align="center"><input type="button" name="six" id="six" value=" 6 " onclick="display('6')" /></td> <td align="center"><input type="button" name="+" id="+" value=" + " onclick="getOp('+')" /></td> <td align="center" ><input type="button" name="-" id="-" value=" - " onclick="getOp('-')" /></td> </tr> <tr> <td align="center"><input type="button" name="one" id="one" value=" 1 " onclick="display('1')" /></td> <td align="center"><input type="button" name="two" id="two" value=" 2 " onclick="display('2')" /></td> <td align="center"><input type="button" name="three" id="three" value=" 3 " onclick="display('3')"/></td> <td align="center"><input type="button" name="*" id="*" value=" * " onclick="getOp('*')" /></td> <td align="center"><input type="button" name="/" id="/" value=" / " onclick="getOp('/')" /></td> </tr> <tr> <td align="center"><input type="button" name="zero" id="zero" value=" 0 " onclick="display('0')" /></td> <td align="center"><input type="button" name="dot" id="dot" value=" . " onclick="display('.')"/></td> <td align="center"> </td> <td align="center"><input type="button" name="=" id="=" value=" = " onclick="getResult()" /></td> <td align="center"><input type="button" name="return" id="return" value=" 返回 " /></td> </tr> </table> </form> </body> </html>
个人感觉比较麻烦的就是实现CE功能,需要对已输入字符串的长度进行裁剪,形成新的字符串。
下面是界面效果图:
相关推荐
用html+js实现的等额本息贷款月供计算器 用html+js实现的等额本息贷款月供计算器 用html+js实现的等额本息贷款月供计算器
验证 统一社会信用代码
农作物在收获前,人们采用测产的方法,来了解作物预计产量。从而,为收获做好准备,如工具、晒场、贮藏仓库、加工设备、运输等用具的维修和购置,以及劳动力安排、资金筹集等,为提高收割效率,加快收割进度,防止产品发生...
简单的登录注册验证,和简单的计算器。 1、掌握JavaScript的基本语法; 2、掌握JavaScript函数和事件处理; 3、掌握JavaScript对象编程。
多维小工具集(进制转换、RGB/HEX颜色转换、Crontab、还款计算器等) 网页油猴工具(网页特效、网页定制、脚本注入、自动刷新等) Ajax调试功能(需在控制台中使用) 网页编码设置(UTF-8、GBK、日文、韩文等) ...
使用ts开发网页计算器,实现自动计算,及界面的自动绘制,依赖库如下: 1. browserify 为网页浏览器提供模块加载环境。 2. lite-server 提供简易的web服务,自动将项目中的内容发布到web服务器中,启动时自动打开...
用原生js写一个简单的计算器 用于js webapi的练手非常不错
上海应届落户积分计算器 can-i-settle-shanghai 小游戏-音乐战士 music-fighter 520表白网站 my520 全屏樱花特效 sakura 全屏泡泡特效 bubble.html 自动敲代码网站 auto_code_printer.html WoW特效-生日网站 cake....
Sezzle计算器-前端一种实时为多用户聊天提供计算器功能的应用程序。 该会将您定向到后端存储库。Swift的使用任何一种语言创建一个Web应用程序,该应用程序会记录计算的发生并与连接到该应用程序的每个人共享这些计算...
JavaScript是一种网页交互语言,为网页增添了巨大的表现力和交互能力,极大提高了用户体验,如今很难在找到不使用JavaScript的网站了。本课程主要是为刚刚接触JavaScript的朋友准备,详细的讲解了JavaScript的基本...
Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式; AJAX,创建交互式网页应用的网页开发技术。 【设计思路】 用户...
Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式; AJAX,创建交互式网页应用的网页开发技术。 【设计思路】 用户...
Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式; AJAX,创建交互式网页应用的网页开发技术。 【设计思路】 用户...
计算机 具有HTML,CSS + JS的简单计算器。 它是Front-end Masters的Web开发入门课程的一部分。
奔梦向前:学编程其实很简单,html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-代码实现表白计算器-2020-04-24。
使用formValidation.io向导(可用性)+ Vue.js(响应式)+ Keen Theme(UI)+ apexChart.js(图形生成)+ BlockUI(ajax加载块)+ BeautifulSoup4(Web Crawler)完成项目前端。后端使用python 3.7 + flask + ...
####这是我在大会学校的前端Web开发课程的最后一个项目,这是我第一步学习编码:html,css和javascript项目。 该项目的目标是创建一个Javascript计算器,该计算器允许一群朋友在打算合租房屋时以最成比例的方式...
HTML5 Boilerplate 是一个专业的前端模板,可帮助您构建快速、强大、适应性强且面向未来的网站。 花更多的时间进行开发,减少重新发明轮子的时间。 这个项目是多年迭代开发和结合社区知识的产物。 它不会强加特定...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
前端开发:HTML、CSS、JavaScript等用于构建网页和Web应用程序的技术。 后端开发:涉及服务器端编程、API开发、数据库集成等技术。 移动应用开发:包括iOS开发(使用Swift或Objective-C)和Android开发(使用Java或...