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. Nodejs进阶：服务端字符编解码&乱码处理

    写在前面 在web服务端开发中,字符的编解码几乎每天都要打交道.编解码一旦处理不当,就会出现令人头疼的乱码问题. 不少从事node服务端开发的同学,由于对字符编码码相关知识了解不足,遇到问题时,经常会 ...

  2. Android检查更新下载安装

    检查更新是任何app都会用到功能,任何一个app都不可能第一个版本就能把所有的需求都能实现,通过不断的挖掘需求迭代才能使app变的越来越好.检查更新自动下载安装分以下几个步骤: 请求服务器判断是否有最 ...

  3. SpringMVC + Mybatis bug调试 SQL正确，查数据库却返回NULL

    今天碰到个bug,有点意思 背景是SpringMVC + Mybatis的一个项目,mapper文件里写了一条sql 大概相当于 select a from tableA where b = &quo ...

  4. 浅读K-means

    百度百科释义为 K-means算法是硬聚类算法,是典型的基于原型的目标函数聚类方法的代表,它是数据点到原型的某种距离作为优化的目标函数,利用函数求极值的方法得到迭代运算的调整规则.K-means算法以 ...

  5. .NET CORE 学习笔记之安装EF【Microsoft.EntityFrameworkCore】扩展报错

    最近在学习.NET CORE ,刚开始就遇到问题了. 安装EF框架的试试就报错, 报错如下: 错误 程序包还原失败.正在回滚“XXX”的程序包更改. 找了好久的方案,网上也没搜到对应的问题和方案,然而 ...

  6. struts.xml如何加载到及配置问题

    今天项目做客户化处理,看到struts.xml,突然间想不起来这个文件从哪里加载的了,真是越学越回去了.这里记录下. web工程启动的时候,系统会加载web.xml文件,在这个时候会加载Spring的 ...

  7. Java+大数据开发——Hadoop集群环境搭建(二)

    1. MAPREDUCE使用 mapreduce是hadoop中的分布式运算编程框架,只要按照其编程规范,只需要编写少量的业务逻辑代码即可实现一个强大的海量数据并发处理程序 2. Demo开发--wo ...

  8. 自制ACL+DHCP实验（初版）

    (实验用gns模拟器) ACL 实验拓扑: 实验要求: 1.1.1.1→3.3.3.3 不通 11.11.11.11→3.3.3.3 通 2.2.2.2→3.3.3.3 通 实验步骤: 步骤一:基本配 ...

  9. [转载]GIF、JPEG 和 PNG的区别在哪里？

    原文地址:GIF.JPEG 和 PNG的区别在哪里?作者:苗得雨 GIF.JPEG 和 PNG 是三种最常见的图片格式. GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色( ...

  10. Mac环境下mysql初始化密码问题--If you lose this password, please consult the section How to Reset the Root Password in the MySQL reference manual.

    个人在Mac上操作数据库,遇到的启动数据库问题的简单记录 1.苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) 2.进 ...