使用html+css+js实现计算器
使用html+css+js实现计算器，开启你的计算之旅吧
效果图：
代码如下，复制即可使用：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style> /* 主体 */
.counter{
width: 396px;
height: 486px;
background-color: #F2F2F2;
border: 1px solid #C2C3C6;
margin: 50px auto; }
/* 显示框 */
#box {
height: 70px;
width: 336px;
background-color: #323232;
border: none;
margin: 40px 25px 32px 25px;
font: 700 40px/70px "微软雅黑";
color: #ffffff;
padding-right: 10px;
}
/* 功能区 */
.funct {
padding: 0 20px;
position: relative; }
/* 按钮样式 */
.funct input {
height: 40px;
width: 60px;
margin: 10px 10px;
font: 400 20px/40px "微软雅黑";
}
/* 清除按钮样式 */
.funct #res {
width: 150px;
}
/* + - = . 按钮浮动 */
#add, #reduce, #round, #sum {
position: absolute;
right: 0px;
bottom: 0px;
}
/* 减号位置 */
#reduce {
right: 30px;
top: 60px;
} /* 加号位置 */
#add {
right: 30px;
top: 120px;
}
/* 等于号位置 */
#sum {
height: 100px;
right: 30px;
bottom: 0px;
}
/* 小数点位置 */
#round {
right: 120px;
bottom: 0px;
}
/* 0 */
#zero {
width: 150px;
} /* 数字区 */
.numb {
width: 280px;
} </style> <script>
window.onload = function(){ // 数据容器
var left = 0; //被除数
var right = 0; //除数
var sum = 0; //和 var numb = 0; //此变量用来限制点的输入
// 获取id并返回
function $(id){
return document.getElementById(id);
}
// 运算函数
function operation(id){
if( $("box").value != "0"){
if(left == 0)
{
$("box").value = $("box").value + $(id).value;
left = parseFloat($("box").value);
}
} //numb 转为number类型 让点可以再输入一次
numb = 0;
} // 数字盘函数
function figure(id){ // 判断被除数是否有值
if(left == 0)
{
// 改变value默认值
if ($("box").value === "0" ) {
$("box").value = $(id).value;
}else{
$("box").value = $("box").value + $(id).value;
}
}else{
$("box").value = $("box").value + $(id).value;
var str = $("box").value;
var num = "";
// 获取第二次输入的数字
for (var i = 0; i < str.length; i++) {
// 判断加减乘除
if(str[i]== "+"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j]; };
right = parseFloat(num);
}else if(str[i]== "-"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j]; };
right = parseFloat(num);
}
else if(str[i]== "*"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j]; };
right = parseFloat(num);
}
else if(str[i]== "/"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j]; };
right = parseFloat(num);
}
};
} // 清空所有数据
if(sum != 0){
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = $(id).value;
} } // 数字键盘区----------------------------------------------------------开始
$("one").onclick = function(){
figure("one");
}
$("two").onclick = function(){
figure("two");
}
$("three").onclick = function(){
figure("three");
}
$("four").onclick = function(){
figure("four");
}
$("five").onclick = function(){
figure("five");
}
$("six").onclick = function(){
figure("six");
}
$("seven").onclick = function(){
figure("seven");
}
$("eight").onclick = function(){
figure("eight");
}
$("nine").onclick = function(){
figure("nine");
}
$("zero").onclick = function(){
figure("zero");
} // 数字键盘区----------------------------------------------------------结束 //功能区-----------------------------------------------------------开始 // 加
$("add").onclick = function(){
operation("add");
} //减
$("reduce").onclick = function(){
operation("reduce");
} // 乘
$("ride").onclick = function(){
operation("ride");
} // 除
$("division").onclick = function(){
operation("division");
} // 点
$("round").onclick = function(){
// 限制点的输入
if(numb === 0 && sum == 0){ //numb值等于0 类型等于number
$("box").value = $("box").value + $("round").value;
numb = ($("box").value); //numb赋值为字符串
} } // 清除
$("res").onclick = function(){
if($("box").value != "0")
{
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = "0";
}
} // 求和
$("sum").onclick = function(){
var symbol = "";
if(left != 0 && right != 0){
for (var i = 0; i < $("box").value.length; i ++ ) {
symbol = $("box").value[i];
if(symbol == "+"){
sum = left + right;
$("box").value = sum;
}else if(symbol == "-"){
sum = left - right;
$("box").value = sum;
}
else if(symbol == "*"){
sum = left * right;
$("box").value = sum; }
else if(symbol == "/"){
sum = left / right;
$("box").value = sum;
}
};
}
} } // 功能区--------------------------------------------------------------------------结束
</script>
</head>
<body> </div> <div class="counter">
<input type="text" id="box" style="text-align:right" readOnly="true" value="0">
<div class="funct">
<input type="reset" id="res" value="C">
<input type="button" id="division" value="/">
<input type="button" id="ride" value="*"> <input type="button" id="add" value="+">
<input type="button" id="reduce" value="-">
<input type="button" id="round" value=".">
<input type="button" id="sum" value="="> <div class="numb">
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="zero" value="0">
</div>
</div>
</div> </body>
</html>
如果您有更好的方法或更多的功能，可以和大家一起分享哦，如有错误，请联系我改正，非常感谢！！！
使用html+css+js实现计算器的更多相关文章
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...
随机推荐
- 《剑指offer》— JavaScript（24）二叉树中和为某一值的路径
二叉树中和为某一值的路径 题目描述 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 思路 前序遍历二叉树, ...
- POI的XWPFParagraph.getRuns分段问题 多余逗号
POI的XWPFParagraph.getRuns分段问题 2018年08月28日 09:49:32 银爪地海贼 阅读数:376 这是我的模板 后台打印出来是分段的 造成这样的原因是${name} ...
- UDP ------ UDP IPPROTO_UDPLITE 参数
介绍 传统的 UDP 通信对整个报文进行校验 UDP-LITE 通信则可以设置校验的长度,适用于可以接受轻微的报文内容出错,比如视频数据:传统的 UDP 由于对整个报文校验,一旦出现报文数据出错就会被 ...
- rsync命令的基本使用
rsync命令的基本使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. rsync服务软件是一款开源,高速的,数据同步(拷贝)工具. 一.rsync服务的特点 1>.本地拷贝 ...
- 关于dubbo的架构
dubbo是国内一个十分受欢迎的分布式rpc框架. 这篇博客是从dubbo官网出发,来说明下dubbo的技术架构.首先我们看下官网的架构图. 节点角色说明: Provider: 暴露服务的服务提供方. ...
- Windows 下安装和配置 MongoDB（二）
因为电脑重新安装了系统,所以要重新安装开发环境,按照之前写过的一篇博客介绍的步骤进行安装,发现报了一些错误,下面是遇到的问题和解决方法: 首先下载安装就不多说了,下载地址:https://www.mo ...
- Java事件基础
package cn.Douzi.Event; import javax.swing.*; import java.awt.*; import java.awt.event.*; public cla ...
- Tomcat开启Debug模式
在bin/catalina.sh中添加如下行,将tomcat重启即可. 注:以下标红的7002需将其改成对象的tomcat端口即可! JAVA_OPTS=,server=y,suspend=n -Df ...
- ZeroMQ API（二） 上下文
1.创建上下文 1.1 zmq_ctx_new(3) 1.1.1 名称 zmq_ctx_new - 创建新的ZMQ上下文 1.1.2 概要 void * zmq_ctx_new(); 1.1.3 描述 ...
- PHP远程连接mysql报错处理办法
在万网弄了个虚拟主机,想远程连mysql调试(本地4G如果开mysql内存不够!),一直报错: mysqlnd cannot connect to MySQL 4.1+ using the old i ...