参考部分资料，编写一个简单的计算器案例，虽然完成了正常需求，但是也有不满之处，待后续实力提升后再来补充，先把不足之处列出：

　　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简单计算器实践的更多相关文章

  1. 9.JavaScript简单计算器的实现

    1.难点,怎么获取标签的值,注意点,获取到的值都是string类型,还要转换 var num1 = parseInt(document.getElementById("num1") ...

  2. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  3. Ext实现简单计算器

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...

  4. JavaScript本地存储实践（html5的localStorage和ie的userData）

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  5. C语言，简单计算器【上】

    由于工作需要最近在研究PHP扩展,无可避免的涉及到了C语言.从出了学校以后C语言在实际工作中还没有用到过,所以必须要先进行一点复习工作.个人认为对于熟悉一样东西说最好的方法是上手实践.于是便想起了当时 ...

  6. JavaScript编写计算器的发展史

    JavaScript编写计算器的发展史: 编写一个普通的四则运算: <!DOCTYPE html> <html lang="en"> <head> ...

  7. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  8. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  9. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

随机推荐

  1. 利用JS函数制作时钟运行程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HDU 5546 Ancient Go (搜索)

    题意: Alice和Bob正在下古代围棋,规则如下: 棋盘有8×8个格子,棋子下在棋盘的交叉点上,故可以有9×9个落子的位置 Alice执黑棋Bob执白棋轮流落子 与棋子直线相连的空白交叉点叫做气.当 ...

  3. HDU - 6082 度度熊与邪恶大魔王（背包变式）

    度度熊与邪恶大魔王 度度熊为了拯救可爱的公主,于是与邪恶大魔王战斗起来. 邪恶大魔王的麾下有n个怪兽,每个怪兽有a[i]的生命值,以及b[i]的防御力. 度度熊一共拥有m种攻击方式,第i种攻击方式,需 ...

  4. react中事件的使用

    import React from 'react' class Home extends React.Component{ constructor(props){ super(props) this. ...

  5. uoj#388. 【UNR #3】配对树（线段树合并）

    传送门 先考虑一个贪心,对于一条边来说,如果当前这个序列中在它的子树中的元素个数为奇数个,那么这条边就会被一组匹配经过,否则就不会 考虑反证法,如果在这条边两边的元素个数都是偶数,那么至少有两组匹配经 ...

  6. jzoj6002. 【PKUWC2019模拟2019.1.15】Permutation （组合数）

    题面 题解 设\(lim=(n-1)/2\)(这里是下取整),那么\(x\)位置的值最大不能超过\(lim\),而\(y\)处的值不能小于\(y\),于是有\[Ans=\sum_{i=1}^{lim} ...

  7. uoj#335. 【清华集训2017】生成树计数（prufer序列+生成函数+多项式）

    传送门 好神仙的题目--又一次有了做一题学一堆的美好体验 据说本题有第二类斯特林数+分治\(FFT\)的做法,然而咱实在看不懂写的是啥,题解贴这里,有兴趣的可以自己去瞅瞅,看懂了记得回来跟咱讲讲 前置 ...

  8. HTML5新标签介绍

    一.Datalist 标签 <input list="browsers"> <datalist id="browsers">   < ...

  9. JavaScript进阶 - 第3章 一起组团(数组)

    第3章 一起组团(数组) 3-1 一起组团(什么是数组) 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果 ...

  10. redis之五大数据类型

    redis之五大数据类型 redis redis的两种链接方式 简单链接 1234 import redisconn = redis.Redis(host='10.0.0.200',port=6379 ...