JavaScript简易计算器
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
ECMAScript，描述了该语言的语法和基本对象。
- 是一种解释性脚本语言（代码不进行预编译）。
- 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
- 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
直接上代码
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简易计算器的更多相关文章
- 自己做的javascript简易计算器
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- JavaScript之简易计算器
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 前端 JavaScript 实现一个简易计算器
前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 使用HTML+CSS，jQuery编写的简易计算器
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 使用HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 微信小程序-简易计算器
代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
随机推荐
- Intelli IDEA学习系列之快捷键篇
Intelli IDEA学习系列之快捷键篇 IDEA简介: IDEA 全称IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能 ...
- JavaScript函数使用和DOM节点
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...
- python专题-Mysql数据库（python2._+ Mysqldb）
Python使用MySQL数据库 MySQLdb驱动从2014年1月停止了维护. Python2 MySQLdb 一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安 ...
- POI单元格添加公式以及读取公式结果的值
POI提供了为单元格添加条件样式的方法,但是我并没有找到获取单元格改变后样式的方法,获取到样式依旧是没有改变之前的. 比如为单元格添加条件样式用于监听单元格值是否被修改,如果单元格值被修改那么字体颜色 ...
- django文件上传
-------------------上传图片-------------------1.model中定义属性类型为models.ImageField类型 pic=models.ImageField(u ...
- 【译】怎样处理 Safari 移动端对图片资源的限制
原文作者:Thijs van der Vossen 本文翻译自<How to work around the Mobile Safari image resource limit>,原文写 ...
- java Properties类得到当前的系统属性
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt218 package com.shi.simpleUtil; import ...
- 安装python虚拟环境
虚拟环境: 之前安装python包的命令: sudo pip3 install 包名包的安装路径:/usr/local/lib/python3.5/dist-packages安装同一个包的不同版本,后 ...
- java初阶
java的开发工具分成 IDE(integrated developmentenvironment )和JDk(Java Development Kit) 一个.java中只能有一个public类且至 ...
- H5-html基础
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...