计算器⽤jshtmlcss实现，使⽤html+css+js实现计算器的代码⽰
例
使⽤html+css+js实现计算器的代码⽰例
发布时间：2020-04-27 10:36:50
来源：亿速云
阅读：711
作者：⼩新
今天⼩编给⼤家分享的是使⽤html+css+js实现计算器的代码⽰例，相信很多⼈都不太了解，为了让⼤家更加了解html+css+js实现计算器的代码，所以给⼤家总结了以下内容，⼀起往下看吧。⼀定会有所收获的哦。
效果图：
代码如下，复制即可使⽤：
/* 主体 */
.counter{
width: 396px;
height: 486px;
background-color: #F2F2F2;
border: 1px solid #C2C3C6;
margin: 50px auto;
}
/* 显⽰框 */
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 {
#add {
right: 30px;
top: 120px;
}
/* 等于号位置 */
#sum {
height: 100px;
right: 30px;
bottom: 0px;
}
/* ⼩数点位置 */
#round {
right: 120px;
bottom: 0px;
}
/* 0 */
#zero {
width: 150px;
}
/* 数字区 */
网页计算器html代码.numb {
width: 280px;
}
// 数据容器
var left = 0; //被除数
var right = 0; //除数
var sum = 0; //和
var numb = 0; //此变量⽤来限制点的输⼊// 获取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]== "+"){
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;
}
}
// 数字键盘区----------------------------------------------------------开始

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。