javascript简单计算器实践
参考部分资料，编写一个简单的计算器案例，虽然完成了正常需求，但是也有不满之处，待后续实力提升后再来补充，先把不足之处列出：
1：本来打算只要打开页面，计算器的输入框会显示一个默认为0的状态，但是在输入框加入默认显示为0的时候，选择数据输入时，该0会显示输入数字的前面，例如”0123“，由于能力有限，待后续实力提升再来补充完善！
2：目前只能实现鼠标控制选择按钮，待完善键盘录入功能。
3：乘法的那个符号在本来想改成”ד这个符号的，待后续完善。
附图片一张：
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>计算器</title>
</head>
<body onload="onLoad()">
<div id="calculator">
<div class="LOGO">
<span class="name">简单的计算器</span>
<span class="verson">@liumobai v1.0</span>
</div>
<div id="shuRu">
<!--screen输入栏-->
<div class="screen">
<input type="text" id="screenName" name="screenName" class="screen" value="" onfocus="jsq(this)">
</div>
</div>
<div id="keys">
<!-- operators and other keys -->
<!--第一排-->
<input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
<input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
<input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
<input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
<input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
<!--第二排-->
<input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
<input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
<input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
<input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons">
<input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
<!--第三排-->
<input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
<input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
<input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
<input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">
<input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
<!--第四排-->
<input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
<input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">
<input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
<input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
<input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
</div>
<div class="footer">
<span class="aside">欢迎使用JavaScript计算器</span>
<span class="link">
<a href="#" title="声明" target="_blank">反馈</a>
</span>
</div>
</div>
</body>
</html>
JS部分：
<script>
var num = 0; // 定义第一个输入的数据
function jsq(num) {
//获取当前输入
document.getElementById('screenName').value += document.getElementById(num).value;
}
function eva() {
//计算输入结果
document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
}
function clearNum() {
//清0
document.getElementById("screenName").value = null;
document.getElementById("screenName").focus();
}
function tuiGe() {
//退格
var arr = document.getElementById("screenName");
arr.value = arr.value.substring(0, arr.value.length - 1);
}
function onLoad(){
//加载完毕后光标自动对应到输入框
document.getElementById("screenName").focus();
}
</script>
CSS部分：
/*Basic reset*/
*{
margin:;
padding:;
box-sizing: border-box;
font: 14px Arial,sans-serif;
}
html{
height:100%;
background-color:lightslategrey;
} #calculator{
margin: 15px auto;
width:330px;
height:400px;
border: 1px solid lightgray;
background-color:darkgrey;
padding:15px;
} /*LOGO*/
.LOGO{
height:20px; }
.LOGO .name{
float:left;
line-height:30px;
}
.LOGO .verson{
float:right;
line-height:30px;
}
/*screen*/
#shuRu{
margin-top:15px;
}
.screen{
margin-top:5px;
width:300px;
height:40px;
text-align: right;
padding-right:10px;
font-size:20px;
}
#keys{
border:1px solid lightgray;
height:223px;
margin-top:25px;
padding:8px;
}
#keys .last{
margin-right:0px;
}
.footer{
margin-top:20px;
height:20px;
}
.footer .link{
float:right;
} #keys .buttons{
float:left;
width: 42px;
height: 36px;
text-align:center;
background-color:lightgray;
margin: 0 17px 20px 0;
}
javascript简单计算器实践的更多相关文章
- 9.JavaScript简单计算器的实现
1.难点,怎么获取标签的值,注意点,获取到的值都是string类型,还要转换 var num1 = parseInt(document.getElementById("num1") ...
- javascript 简单的计算器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- Ext实现简单计算器
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...
- JavaScript本地存储实践（html5的localStorage和ie的userData）
http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日 ...
- C语言，简单计算器【上】
由于工作需要最近在研究PHP扩展,无可避免的涉及到了C语言.从出了学校以后C语言在实际工作中还没有用到过,所以必须要先进行一点复习工作.个人认为对于熟悉一样东西说最好的方法是上手实践.于是便想起了当时 ...
- JavaScript编写计算器的发展史
JavaScript编写计算器的发展史: 编写一个普通的四则运算: <!DOCTYPE html> <html lang="en"> <head> ...
- 1.C#WinForm基础制作简单计算器
利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...
- 菜鸟学Android编程——简单计算器《一》
菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...
- PAT 06-1 简单计算器
想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...
随机推荐
- Tomcat的目录结构详解
转自:https://blog.csdn.net/u012661010/article/details/73381599
- <c++primer plus>学习笔记1之第八章函数探幽
1 c++内联函数 编译器将使用相应的函数代码替换函数调用,对于内联代码,函数无需跳到另一个位置执行代码再跳回来,所以内联函数运行速度比常规函数快. 但是代价是需要更多的内存. 使用场合: 执行函数代 ...
- utunbu下的codeblocks配置openGL环境
真想骂娘阿,刚开始用utunbu,什么也不明白,不明白我装都软件都在哪里,不知道就像windows下的系统文件那样的文件在哪里,也不知道如何配置环境变量.就这样稀里糊涂的,还要抓紧时间装openGL, ...
- iOS公司账号($99)/企业账号($299)申请
公司账号($99)与企业账号($299)申请基本大同小异,最主要的差别就在于入口不一样 一.注册Apple ID 在iOSAppStore个人开发者账号申请中已经介绍过注册App ID的流程,这里不再 ...
- php如何运行
这篇文章,研究一下php代码是如何解释和执行以及PHP脚本运行的生命周期. 概述 PHP服务的启动.严格来说,PHP的相关进程是不需要手动启动的,它是随着Apache的启动而运行的.当然,如果有需要重 ...
- js 正则表达式学习笔记
正则表达式正则表达式是由一个字符序列形成的搜索模型 语法new RegExp("[abc]")/[abc]//正则表达式主体/修饰符(可选) 1.修饰符i 忽略大小写g 执行全局匹 ...
- SAP中对于获取订单的状态
在SAP中对于如何获取订单的状态,提供了至少两个函数,分别是 STATUS_READ 和 STATUS_TEXT_EDIT.下面简单介绍这两个函数 1.STATUS_READ 改函数的实现原理大 ...
- spring框架_IOC与注解
1.什么是IOC? IoC(Inverse Of Control:反转控制) 2.IOC的作用是什么? 削减计算机程序的耦合(解除我们代码中的依赖关系). 3.关于程序的耦合 /** * 程序的耦合 ...
- P1308-道路修建 （noi 2011）
题目描述 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1 条双向道路. 每条道 ...
- [Swift]LeetCode1079. 活字印刷 | Letter Tile Possibilities
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...