JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

javascript组成

ECMAScript，描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
 
javascript特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
  1. 是一种解释性脚本语言（代码不进行预编译）。
  2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
  3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
  4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
 
最近在学习了下js，乐趣多多，做了个简易计算器，效果图如下所示：

直接上代码

html文件代码：

 <html>

 <head>

 <meta charset="utf-8">

 <link href="计算器.css" rel="stylesheet">

 </head>

 <body>

 <div id="big">

 <div id="top">

     <span id="title">JavaScript计算器</span>

     <span id="author">@温一壶清酒</span>

 </div>

 <div id="import">

     <div id="data">

         <input type="text" id="dataname">

     </div>

 </div>

 <div id="key">

     <input type="button" id="CE" onclick="clearnum()" value="CE" class="buttons">

     <input type="button" id="C" onclick="clearnum()" value="C" class="buttons">

     <input type="button" id="Back" onclick="back()" value="Back" class="buttons">

     <input type="button" id="/" onclick="calc(this.id)" value="/" class="buttons" style="margin-right:0px">

     <input type="button" id="7" onclick="calc(this.id)" value="7" class="buttons">

     <input type="button" id="8" onclick="calc(this.id)" value="8" class="buttons">

     <input type="button" id="9" onclick="calc(this.id)" value="9" class="buttons">

     <input type="button" id="*" onclick="calc(this.id)" value="*" class="buttons" style="margin-right:0px">

     <input type="button" id="4" onclick="calc(this.id)" value="4" class="buttons">

     <input type="button" id="5" onclick="calc(this.id)" value="5" class="buttons">

     <input type="button" id="6" onclick="calc(this.id)" value="6" class="buttons">

     <input type="button" id="-" onclick="calc(this.id)" value="-" class="buttons" style="margin-right:0px">

     <input type="button" id="1" onclick="calc(this.id)" value="1" class="buttons">

     <input type="button" id="2" onclick="calc(this.id)" value="2" class="buttons">

     <input type="button" id="3" onclick="calc(this.id)" value="3" class="buttons">

     <input type="button" id="+" onclick="calc(this.id)" value="+" class="buttons" style="margin-right:0px">

     <input type="button" id="±" onclick="calc(this.id)" value="±" class="buttons">

     <input type="button" id="0" onclick="calc(this.id)" value="0" class="buttons">

     <input type="button" id="." onclick="calc(this.id)" value="." class="buttons">

     <input type="button" id="=" onclick="eva()" value="=" class="buttons" style="margin-right:0px">

 </div>

 <div id="bottom">

     <span id="welcome">欢迎使用JavaScript计算器</span>

 </div>

 </div>

 <script src="计算器.js"></script>

 </body>

 </html>

css样式代码：

 *{

     margin:;

     padding:;

     box-sizing: border-box;

     font:  14px Arial,sans-serif;

 }

 html{

     height:100%;

     background-color:lightslategrey;

 }

 #big{

     margin: 15px auto;

     width:330px;

     height:470px;

     background-color:darkgrey;

     border: 1px solid lightgray;

     padding:15px;

 }

 #top{

     height:20px;

 }

 #title{

     float:left;

     line-height:30px;

 }

 #author{

     float:right;

     line-height:30px;

 }

 #import{

     margin-top:15px;

 }

 #dataname{

     margin-top:5px;

     width:300px;

     height:40px;

     text-align:right;

     padding-right:10px;

     font-size:20px;

 }

 #key{

     border:1px solid lightgray;

     height:293px;

     margin-top:25px;

     padding:16px;

 }

 .buttons{

     float:left;

     width:52px;

     height:36px;

     text-align:center;

     background-color:lightgray;

     margin:0 18px 20px 0;

 }

 .buttons:hover{

     color:white;

     background-color:blue;

 }

 #bottom{

     margin-top:20px;

     height:20px;

     text-align:center;

 }

js代码：

 var number = 0;  // 定义第一个输入的数据

 function calc(number) {

     //获取当前输入

     if(number=="%"){

         document.getElementById('dataname').value=Math.round(document.getElementById('dataname').value)/100;

     }else{

         document.getElementById('dataname').value += document.getElementById(number).value;

     }

 }

 function eva() {

     //计算输入结果

     document.getElementById("dataname").value = eval(document.getElementById("dataname").value);

 }

 function clearnum() {

     //清零

     document.getElementById("dataname").value = null;

     document.getElementById("dataname").focus();

 }

 function back() {

     //退格

     var arr = document.getElementById("dataname");

     arr.value = arr.value.substring(0, arr.value.length - 1);

 }

JavaScript简易计算器的更多相关文章

  1. 自己做的javascript简易计算器

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  2. JavaScript之简易计算器

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  3. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  4. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  5. 使用HTML+CSS，jQuery编写的简易计算器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

    之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...

  7. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  8. 微信小程序-简易计算器

    代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  9. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

随机推荐

  1. 题目1522：包含min函数的栈

    #include <iostream> #include <cstdio> #include <stack> using namespace std; int ma ...

  2. Celery基本原理探讨

    本文对Celery进行了研究,由于其实现相对比较复杂没有足够的时间和精力对各方各面的源码进行分析,因此本文根据Celery的使用方法以及实际行为分析其运行原理,并根据查阅相关代码进行了一定程度的验证. ...

  3. class对象详解

    我们知道,对于java语言,我们一般先写一个类对象,表示对某一类对象概述,其中包括属性,方法等.我们在对类对象编译时,会产生一个.class对象,jvm在加载类对象时,是加载.class 对象文件,我 ...

  4. 优先队列的二叉堆Java实现

    package practice; import edu.princeton.cs.algs4.StdRandom; public class TestMain { public static voi ...

  5. 第2阶段——编写uboot之启动内核和制作Makefile(2)

    目标: 1   添加头文件setup.h和serial.h 2   写main函数   2.1 帮内核设置串口0, (内核启动会打印出启动信息) 2.2把内核读入到SDRAM 2.3设置参数(参考u- ...

  6. 【DDD】领域驱动设计实践 —— 业务建模小招数

    本文结合团队在ECO(社区服务系统)业务建模过程中的实践经验,总结得到一些DDD业务建模的小招数,不一定是完美的,但是对我们团队来说很有效用,希望能帮到其他人.后面会陆续将项目中业务建模的一些经典例子 ...

  7. 锤子坚果pro突破京东10万好评，还有什么是锤子科技做不出...

    作为2017年手机圈明星产品的锤子科技坚果Pro,可是一点都不安分呢! 9月份锤子科技推出一款新机型--坚果Pro银魂定制版 这在动漫圈跟手机圈都掀起一股不小的浪潮. 外观漂亮,颜值超高,续航时间长. ...

  8. 201521123091 《Java程序设计》第7周学习总结

    Java 第七周总结 第七周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内 ...

  9. 【Alpha阶段】第六次scrum meeting

    一.会议照片 二.会议内容 姓名 学号 负责模块 昨日任务完成度 今日任务 杨爱清 099 界面设计和交互功能 完成 设计界面 杨立鑫 100 数据库搭建和其他 完成 将数据库与其他模块连接 林 钊 ...

  10. 团队作业4——第一次项目冲刺（Alpha版本）日志集合处

    Day 1: http://www.cnblogs.com/TeamOf/p/6754373.html Day 2: http://www.cnblogs.com/TeamOf/p/6754410.h ...