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. C/C++遍历文件夹和文件

    本方法可用于windows和linux双平台,采用C/C++标准库函数. 库函数 包含头文件 #include 用到数据结构_finddata_t,文件信息结构体的指针. struct _findda ...

  2. PyQt4 初试牛刀二

    一.最小话托盘后,调用showNormal()后窗口不刷新,解决办法如下: 重写showNormal 方法,调用父类方法后,repaint窗体 def showNormal(self):     su ...

  3. 入侵拿下DVBBS php官网详细过程（图）

    几 个月前,DVBBS php2.0暴了一个可以直接读出管理员密码的sql注入漏洞,当时这个漏洞出来的时候,我看的心痒,怎么还会有这么弱智的漏洞,DVBBS php2.0这套代码我还没仔细看过,于是5 ...

  4. kong介绍-个人分享

    kong简介 背景 我们在提供api或微服务时,通常借助openresty nginx进行流量转发或者添加一些规则或功能,但是随着服务数量和引用增多,复杂的网络环境, 使维护变得困难,不容易扩展,一些 ...

  5. Groovy读取文件信息

    1. eachLine -- 打开和读取文件的每一行 new File("foo.txt").eachLine { println it.toUpperCase(); } 2. r ...

  6. 实现点击后创建div，若对div2秒无操作则将div隐藏，鼠标移上div让它不隐藏，移出div超过两秒则div隐藏

    $('.addLabel').on('click', function () { setTimeout(function(){ if(hoverflag==0){ $(".labelHide ...

  7. WAF防火墙介绍

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt187 在互联网应用高速发展的同时,承载Web信息系统的Web服务器也面临着巨 ...

  8. 简易版jQuery——mQuery

    前面的话 虽然jQuery已经日渐式微,但它里面的许多思想,如选择器.链式调用.方法函数化.取赋值合体等,有的已经变成了标准,有的一直影响到现在.所以,jQuery是一个伟大的前端框架.前端世界日新月 ...

  9. 201521123091 《Java程序设计》第11周学习总结

    Java 第十一周总结 第十一周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 4.课后阅读 1.本章学习总结 1.1 以你喜欢的方式(思维导图 ...

  10. 团队作业4---第一次项目冲刺（AIpha版本）第二天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完成了主页及登录页面 2.功能 完成了后端数据处理的全部基本功能:a.数据结构设计及数据交互操作 b.博客页面数据采 ...