html + css + js 实现简易计算器

使用LICEcap工具截取的效果图：

计算器页面实现:

为计算器的input输入框添加disabled="disabled"属性，防止从键盘中直接输入除小数点之外的非数字符号；设置输入框的默认值为0
设置计算器按键的布局，并添加hover伪类选择器，当鼠标移动到按键上时，按键颜色改变，并设置按键边框为无或细边框，因为给input设置背景色后，input默认显示为立体边框
设置计算器的整体布局( 即计算器中输入框和按键的排布 )，设置计算器布局固定定位( 相对浏览器固定显示 )，并为计算器添加一个阴影

计算器功能实现:

四则运算、取余、平方和立方、开平方和开立方功能实现以及'='功能实现
小数点功能实现
正负号功能实现
回退键和清屏键功能实现
链接按键功能实现

其它:

由于刚刚学了雪花飘落功能，所以就附加了一个红心飘落和图片飘落功能

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>仿计算器</title><!-- 引用外部css文件 --><link rel="stylesheet" href="caculator.css"><!-- jquery压缩版插件 --><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><!-- snowfall雪花飘落插件 --><script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script><!-- 引用外部js文件 --><script type="text/javascript" src="caculator.js"></script>
</head>
<body onload="init(),init_m(),snowfall()">
<div class="div1"><div class="div2"><input type="text" id="num" name="num"></div><div class="div3"><input type="button" value="c"><input type="button" value="←"><input type="button" value="+/-"><input type="button" value="÷"><input type="button" value="%"><br><input type="button" value="7"><input type="button" value="8"><input type="button" value="9"><input type="button" value="×"><input type="button" value="x²"><br><input type="button" value="4"><input type="button" value="5"><input type="button" value="6"><input type="button" value="-"><input type="button" value="x³"><br><input type="button" value="1"><input type="button" value="2"><input type="button" value="3"><input type="button" value="+"><input type="button" value="√x"><br><input type="button" value="m" id="m"><input type="button" value="0"><input type="button" value="."><input type="button" value="="><input type="button" value="∛x²"><br></div>
</div></body>
</html>

caculator.css

/*设置css文档为utf-8编码格式*/
@charset "utf-8";/* 红心效果实现 */
.snowfall-flakes:before, /* ,表示并列或和 */
.snowfall-flakes:after {content: ""; /*激活伪元素的必要因素,不可省略,即便内容为空*/width: 10px;height: 16px;background-color: red; /*背景颜色red*/border-radius: 5px 5px 0 0; /*css圆角属性*/position: absolute; /*绝对定位*/top: 0px;left: 0px;
}
.snowfall-flakes:before {transform: rotate(-45deg); /*逆时针旋转45度*/
}
.snowfall-flakes:after {transform: translateX(5px) rotate(45deg) ; /*右移5个像素,顺时针旋转45度*/
}/*取消浏览器自动为我们添加的8px的内外边距*/
*{margin: 0;padding: 0;
}
/*设置body的高度大于浏览器的高度,以便观察对计算器设置固定定位的效果*/
body{height: 2000px;
}/*给所有div元素设置固定宽度*/
div{width: 320px;
}/*设置父div的样式,文本框和按键都在该父div中*/
.div1{top: 50px;left: 250px;position: fixed; /*设置父div为固定定位,使计算器在浏览器的具体位置中固定显示,不会随着滚动条的滚动而发生移动*/box-shadow: 10px 10px 5px gray; /*设置父div添加一个阴影*//*由于对input元素设置了margin-right属性,所以对父div设置上左下的内边距,使计算器的布局更为美观*/padding-top: 8px;padding-bottom: 8px;padding-left: 8px;background-color: rgba(0,255,0,0.5); /*使用rgba格式设置父div的背景色*/
}/*设置input按键样式*/
input[type="button"]{width: 55px;height: 30px; /*设置input按键的宽高*/margin-right: 5px;margin-top: 5px; font-size: 18px;
}/* 设置hover伪类选择器,使鼠标移动到input按键上时,按键背景色发生改变 */
input[type="button"]:hover{background-color: rgb(190,190,190);border: none; /* 设置为无边框 */
}/*设置文本框的样式*/
input[type="text"]{width: 311px;height: 25px; /*设置文本框的宽高*/font-size: 20px; /*设置文本框字体的大小*/color: #000; /*设置文本框字体为纯黑色*/text-align: right; /*设置文本框内容右对齐*/background-color: #fff; /*设置文本框的背景色为白色*//*清除添加背景颜色后,input元素出现的立体阴影部分*/border: 1px solid; /* 1px 实线 */margin-bottom: 5px; /*设置文本框的下边距,防止文本框与按键贴的太近,影响计算器布局的美观*/box-sizing: border-box; /*设置盒子模型为ie盒子模型,ie盒子模型下添加padding、margin不会改变盒子的宽高*/padding-right: 5px; /*设置输入框的内容距离边框距离*/
}

caculator.js

// 雪花飘落
function snowfall(){/*调用飘落函数 实现飘落效果*/$(document).snowfall({flakeCount: 25,minSpeed: 1, maxSpeed: 5 });//使用图像作为雪花$(document).snowfall({image: "img/7.jpg",flakeCount: 100,minSize: 10, maxSize: 15,minSpeed: 1, maxSpeed: 5});
}// 对计算器功能进行初始化
function init() {// 获取指定id对应的元素var num=document.getElementById("num");// 获取元素的value属性值并进行修改num.value=0;// disabled="disabled"表示禁止在文本框输入,防止非数字内容的输入num.disabled="disabled";// 使用内置getElementsByTagName()函数获取所有input标签元素,返回一个数组var OButton=document.getElementsByTagName("input");for(var i=0;i<OButton.length;i++){// 使用内部函数实现DOM事件OButton[i].onclick=function(){/*使用isNaN()判断某字符串内容能否强制转换为数字类型,this表示OButton[i]对象*/if(!isNaN(this.value)){num.value=(num.value+this.value)*1;}else{var btn_num=this.value;switch(btn_num){case "c":num.value=0;break;case "←":num.value=back(num.value);break;case "+/-":num.value=sign(num.value);break;case "+":/*获取文本框的内容为字符串,需使用内置函数Number()强制转换为数字类型*/btn_num1=Number(num.value);num.value=0;fh="+";break;case "-":btn_num2=Number(num.value);num.value=0;fh="-";break;case "×":btn_num3=Number(num.value);num.value=0;fh="×";break;case "÷":btn_num4=Number(num.value);num.value=0;fh="÷";break;case "%":btn_num5=Number(num.value);num.value=0;fh="%";break;case "x²":btn_num6=Number(num.value);num.value=Math.pow(btn_num6,2);break;case "x³":btn_num7=Number(num.value);num.value=Math.pow(btn_num7,3);break;case "√x":btn_num8=Number(num.value);if(btn_num8<0){alert("负数不能开平方根");}else{/*Math.sqrt(x),返回x的平方根*/num.value=Math.sqrt(btn_num8);}break;case "∛x²":btn_num9=Number(num.value);/*Math.pow(x,y),返回x的y次幂*/num.value=Math.pow(Math.pow(btn_num9,2),1/3);break;case ".":num.value=decimal(num.value);break;case "=":switch(fh){case "+":num.value=btn_num1+Number(num.value);break;case "-":num.value=btn_num2-Number(num.value);break;case "×":num.value=btn_num3*Number(num.value);break;case "÷":if(Number(num.value)!=0){num.value=btn_num4/Number(num.value);}else{alert("除数不能为零(0)");}break;case "%":num.value=btn_num5%Number(num.value);break;}break;default: break;}}}}
}// 验证文本框是否为0或者为空
function isNull(n){if(n=="0"||n.length==0){return true;}else{return false;}
}// 小数点
function decimal(n){if(n.indexOf(".")==-1){n=n+".";}return n;
}// 回退键
function back(n){if (!isNull(n)) {if(n.length==1){n=0;}else{n=n.substr(0,n.length-1);}}/*注意这个n是一个数字字符串,而不是一个数字*/return n;
}// 正负号
function sign(n){// 法1: 通过字符串截取的内置函数实现正负号/*if(n.indexOf("-")==-1){n="-"+n;}else{n=n.substr(1,n.length);}*/// 法2: 通过强制转换的方式实现正负号n=Number(n)*-1;return n;
}// 初始化m按键,单击m按键后在浏览器中打开一个新的窗体
function init_m(){document.getElementById("m").onclick=function(){// 在原来的窗体中打开要跳转的页面/*window.location.href="https://blog.csdn.net/weixin_42950079";*/// 在新的窗体中打开要跳转的页面window.open('https://blog.csdn.net/weixin_42950079');}
}

总结:
在编写代码的时候，尽量优化代码，能用一行实现的效果就不要用多行去实现，比如设置背景色的时候，不要用background来设置，而是使用background-color来设置，因为background是父级属性，内含多个子属性，而一些属性使你不需要用的，这样造成代码冗余，影响浏览器的加载速度

源码：
链接：https://pan.baidu.com/s/1Sj7A2OxuV0dHwJW8Bq-1wA
提取码：8f5c

html + css + js 实现简易计算器相关推荐

html+css+js实现科学计算器
代码地址如下: http://www.demodashi.com/demo/13751.html 项目描述纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有 ...
html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）
目录网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: JS中的流程控制语句 ...
html猜随机数游戏,用js制作简易计算器及猜随机数字游戏
JS简易计算器 input[type="button"] { height:55px; width:55px; background-image: -webkit-linear-g ...
一节前端课：html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示,由于一直想学前段的知识,点进去了,收获了一些东西,做个记录. 题目:计算器的实现技术:html+css+js 1 . body里放俩div,一个大的包一个小的,小 ...
html中实现简单计算器功能,js实现简易计算器功能
制作能进行加减乘除的简易计算器,主要是练习动态注册事件.因以练习为主,所以包含了较多基础方法. 效果图代码简易计算器 window.onload = function(){ document.on ...
HTML+CSS+JS实现简易汇率计算器（使用Fetch）
还是github上找的小玩意跟着模仿着敲的. 首先看一下fetch,我也是学过ajax之后头一次见这玩意,然后就看着人家代码顺便上MDN看了一下. Fetch API 提供了一个 JavaScript ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...
绝对干货！纯用HTML+CSS+JS 编写的计算器应用
一道笔试题之前偶然看到一个公司的笔试题,题目如下: 用HTML5.CSS3.JavaScript,做一个网页,实现如下图形式计算器具体要求: 有且只有一个文件:index.html.不允许再有其他 ...

html + css + js 实现简易计算器

html + css + js 实现简易计算器相关推荐

最新文章

热门文章