javascript白色简洁计算器
更新时间：2015年05月04日 16:02:46 投稿：hebedich
白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效，软件应用，后台应用JS计算器插件代码免费下载。
本文中计算器代码很简单，你可以很容易把该网页特效应用到你的项目中。
HTML
首先我们在网页上放置一个输入框及多个计算器按钮。
<div id="calcuator">
<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
<div id="btn-list">
<div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">
C</div>
<div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">
+/-</div>
<div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">
%</div>
<div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">
←</div>
<div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">
7</div>
<div onclick="typetoinput('8')" class=" btn-30 btn-radius">
8</div>
<div onclick="typetoinput('9')" class=" btn-30 btn-radius">
9</div>
<div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">
+</div>
<div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">
-</div>
<div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">
4</div>
<div onclick="typetoinput('5')" class=" btn-30 btn-radius">
5</div>
<div onclick="typetoinput('6')" class=" btn-30 btn-radius">
6</div>
<div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">
×</div>
<div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">
÷</div>
<div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">
1</div>
<div onclick="typetoinput('2')" class=" btn-30 btn-radius">
2</div>
<div onclick="typetoinput('3')" class=" btn-30 btn-radius">
3</div>
<div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">
ײ</div>
<div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">
√</div>
<div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">
0</div>
<div onclick="typetoinput('.')" class=" btn-30 btn-radius">
.</div>
<div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">
=</div>
</div>
</div>
js
根据操作类型作相应操作：
function operator(type) {
switch (type) {
case "clear":
input.value = "0";
_string.length = 0;
/*document.getElementById("ccc").innerHTML="";
for(i=0;i<_string.length;i++)
{
document.getElementById("ccc").innerHTML+=_string[i]+" "
}*/
break;
case "backspace":
if (checknum(input.value) != 0) {
input.value = input.value.replace(/.$/, '');
if (input.value == "") {
input.value = "0";
}
}
break;
case "opposite":
if (checknum(input.value) != 0) {
input.value = -input.value;
}
break;
case "percent":
if (checknum(input.value) != 0) {
input.value = input.value / 100;
}
break;
case "pow":
if (checknum(input.value) != 0) {
input.value = Math.pow(input.value, 2);
}
break;
case "sqrt":
if (checknum(input.value) != 0) {
input.value = Math.sqrt(input.value);
}
break;
case "plus":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "plus"input.value = "+";
input.name = "type";
}
break;
case "minus":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "minus"input.value = "-";
input.name = "type";
}
break;
case "multiply":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "multiply"input.value = "×";
input.name = "type";
}
break;
case "divide":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "divide"input.value = "÷";
input.name = "type";
}
break;
case "result":
if (checknum(input.value) != 0) {
_string.push(input.value);
if (parseInt(_string.length) % 2 != 0) {
_string.push(_string[_string.length - 2])
}
if (_type == "plus") {
input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]);
input.name = "type"
} else if (_type == "minus") {
input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]);
input.name = "type"
} else if (_type == "multiply") {
input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]);
input.name = "type"
} else if (_type == "divide") {
input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]);
input.name = "type"
}
break;
}
}
}
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了JavaScript中字符串分割函数split用法,实例分析了javascript中split函数操作字符串的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了微信小程序上传图片到服务器的实例代码，在文章给大家补充介绍了微信小程序上传一或多张图片 的方法，本文给大家介绍的非常详细，具有参考借鉴加载,需要的朋友可以参考下2017-11-11
想象一个场景，就是如何根据一张图片大概提取出它的主色调呢？获取主色调后，可能会用来设置某些背景颜色，这里，利用 JS 简单获取本地图片主色调，希望对大家有所帮助2023-03-03
把图片们用ul之类的包起来，并设置float。然后设置这个ul本身为absolute定位，其父标签用relative定位。通过设置ul的left或top值，实现图片队列的滚动效果2012-04-04
前两天做 silverlight 的东西，主页面打开一个子页面，然后子页面中包含一个 silverlight 应用程序那难免会涉及到他们三者相互调用的问题2010-08-08
Javascript 常用自定义类型方法整理，需要的朋友可以参考下。2010-03-03
这篇文章主要介绍了JavaScript数组各种常见用法实例分析,包括数组的添加、删除、替换、还原等常见技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
本篇文章主要是对js中的select option对象进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了ztree获取当前选中节点子节点id集合的方法,实例分析了ztree的方法transformToArray使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js获取域名的方法,涉及window.location中常见方法的使用技巧,需要的朋友可以参考下2015-01-01
最新评论