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. 45、concurrent.futures模块与协程

    concurrent.futures  —Launching parallel tasks    concurrent.futures模块同时提供了进程池和线程池,它是将来的使用趋势,同样我们之前学习 ...

  2. 每次打开VS都报错：我们无法自动填充你的 Visual Studio Team Services 帐户

    我们无法自动填充你的 Visual Studio Team Services 帐户.遇到下面的错误: TF400813: Resource not available for anonymous ac ...

  3. Jmeter之接口测试

    最近才入职新公司,好几天没有写博客了,经过一个朋友提醒,刚刚好觉得用Jmeter来做接口测试真的是再好不过了.下面就详细讲解下这两天我利用Jmeter做的接口测试. [安装Jmeter] 详细见博文: ...

  4. maven 搭新建成之后 无法创建 src/main/java 目录解决

    maven项目创建后 创建 src/main/java     和   src/main/test 会报错,目录已存在 打开build path 界面    src/main/java     和   ...

  5. Thread.interrupt()方法理解

    原博客地址: 多线程编程 实战篇 (四) 不客气地说,至少有一半人认为,线程的"中断"就是让线程停止. 如果你也这么认为,那你对多线程编程还没有入门. 在java中,线程的中断(i ...

  6. NPOI office 组件资料汇总 (excel, word)

    POI 是一套用Java写成的库,能够帮助开发者在没有安装微软Office的情况下读写Office 的文件,支持的文件格式包括xls, doc, ppt等. NPOI 是POI的.net 版本. 最新 ...

  7. [2014-08-17]Mac OSX 截图快捷键

    系统:OSX 10.9.4 内容来自网络,存于此以便查阅 基本操作 全屏截图:Command-Shift-3 指定区域截图:Command-Shift-4 指定窗口截图:Commnad-Shift-4 ...

  8. JRE 和 JDK 的区别

    JRE顾名思义是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言编写的程序运行所需要的软件环境,是提供给想运行java程序的用户使用的.   JDK顾名思义是java开发 ...

  9. Python常用库大全

    环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex – 可以在虚拟环境中执行命令. v ...

  10. 浅谈如何用Java操作MongoDB

    NoSQL数据库因其可扩展性使其变得越来越流行,利用NoSQL数据库可以给你带来更多的好处,MongoDB是一个用C++编写的可度可扩展性的开源NoSQL数据库.本文主要讲述如何使用Java操作Mon ...