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 ...
随机推荐
- jQuery遍历-祖先
祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...
- POI设置excel某列值为文本格式
excel单元格格式默认为[常规],当某列限定必须从下拉框选择一个纯数字文本的时候,必须将单元格格式设置为[文本]. 否则即使输入的值和下拉框的一致,excel都认为输入的值是常规类型,而下拉框的值为 ...
- 向GitHub 提交你的源代码
之前的这篇文章「Git入门篇」相信大家都已经对 Git 的基本操作熟悉了,但是这篇文章只介绍了对本地 Git 仓库的基本操作,今天我就来介绍下如何跟远程仓库一起协作,教你们向 GitHub 上提交你们 ...
- ASP.NET Core的身份认证框架IdentityServer4(7)- 使用客户端证书控制API访问
前言 今天(2017-9-8,写于9.8,今天才发布)一口气连续把最后几篇IdentityServer4相关理论全部翻译完了,终于可以进入写代码的过程了,比较累.目前官方的文档和Demo以及一些相关组 ...
- 高性能消息队列 CKafka 核心原理介绍(上)
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:闫燕飞 1.背景 Ckafka是基础架构部开发的高性能.高可用消息中间件,其主要用于消息传输.网站活动追踪.运营监控.日志聚合.流式 ...
- Java代理详解
一.概述 代理模式是Java常用的设计模式之一,实现代理模式要求代理类和委托类(被代理的类)具有相同的方法(提供相同的服务),代理类对象自身并不实现真正的核心逻辑,而是通过调用委托类对象的相关方法来处 ...
- (5)ES6解构赋值-函数篇
函数参数的解构赋值 function sum(x, y) { return x + y; } sum(1,2); //解构赋值 function sum([x, y]) { return x + y; ...
- 【Socket编程】通过Socket实现TCP编程
通过Socket实现TCP编程 Socket通信 : 1.TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 2.基于TCP协议实现网络通信的类: 客户端----Socket类 服务器 ...
- Swing-JTable检测单元格数据变更事件
在JTable的初级教程中往往会提到,使用TableModel的 addTableModelListener方法可以监听单元格数据的变更,在其事件处理函,数tableChanged中,可以通过e.ge ...
- 201521123029《Java程序设计》第1周学习总结
1. 本周学习总结 1.认识了Java的发展: 2.Java语言的特点,简单性和结构中立: 3.了解到了JDK.JRE,JVM: 4.学习Java数据类型分类,如整形,char型等. 2. 书面作业 ...