js实现标准科学程序员多进制计算器切换效果代码
代码语言：html
所属分类：其他
代码描述：js实现标准科学程序员多进制计算器切换效果代码，支持多种场景的计算器，支持标准、科学、多进制计算，包含十六进制、十进制、八进制、二进制的计算。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
</head>
<body>
<style>
.standard-main,
.science-main,
.programmer-main {
background-color: #F2F2F2;
margin: 40px auto 0px;
box-shadow: 0px 0px 15px #4D4D4D;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
float: left;
text-align: center;
cursor: pointer;
}
li img {
height: 14px;
}
.title {
height: 30px;
line-height: 30px;
}
.result {
height: 120px;
text-align: right;
}
.second {
font-size: 40px;
font-weight: bold;
padding-right: 10px;
}
.pre {
color: #A7A7A7;
padding-right: 10px;
}
/*计算器类型*/
.type {
height: 20px;
text-align: left;
margin-left: 10px;
font-weight: bold;
margin-top: 10px;
cursor: pointer;
}
/*类型选择侧边栏*/
.type-bar {
display: none;
height: 90px;
width: 100px;
position: absolute;
top: 110px;
background-color: #E6E6E6;
}
.type-bar li {
float: left;
width: 100px;
text-align: center;
line-height: 30px;
}
.active {
background-color: #CFCFCF;
}
/*数字加粗*/
.number {
font-weight: bold;
}
/*共用部分结束*/
/*计算器标准版界面开始*/
.standard-main {
width: 350px;
height: 480px;
}
#std-top-symbol {
border-top: 1px #A7A7A7 solid;
height: 52px;
}
#std-num-symbol {
background-color: #E6E6E6;
height: 270px;
font-size: 20px;
}
#std-top-symbol li,
#std-num-symbol li {
line-height: 52px;
width: 87.5px;
}
/*标准界面结束*/
/*科学型界面开始*/
.science-main {
display: none;
width: 350px;
}
.sci-result {
height: 120px;
text-align: right;
}
#sci-top-symbol {
border-top: 1px #A7A7A7 solid;
height: 135px;
}
#sci-top-symbol li,
#sci-num-symbol li {
line-height: 45px;
width: 70px;
}
#sci-num-symbol {
height: 235px;
background-color: #E6E6E6;
}
/*科学型界面结束*/
/*程序员型界面开始*/
.programmer-main {
display: none;
width: 350px;
}
.pro-result {
height: 220px;
text-align: right;
}
#pro-top-symbol {
border-top: 1px #A7A7A7 solid;
height: 45px;
}
#pro-top-symbol li {
line-height: 45px;
width: 58px;
}
#pro-num-symbol li {
line-height: 45px;
width: 70px;
}
#pro-num-symbol {
height: 235px;
background-color: #E6E6E6;
}
/*四个进制*/
#pro-scales {
margin-left: 20px;
}
#pro-scales div {
text-align: left;
margin-top: 5px;
cursor: pointer;
}
/*当前使用的进制*/
.scale-active {
color: cornflowerblue;
}
/*按键不可用*/
.disable-btn {
color: #CACACA;
}
/*程序员型界面结束*/
</style>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<form class="form-inline" role="form">
<h4 class="mr-sm-1"><i class="fa fa-calculator"></i> 在线计算器</h4>
<button type="button" class="btn btn-outline-primary mr-sm-1" id="submitBTN1"><i class="fa fa-calculator"></i> 标准计数器</button>
<button type="button" class="btn btn-outline-warning mr-sm-1" id="submitBTN2"><i class="fas fa-square-root-alt"></i> 科学计算器</button>
<button type="button" class="btn btn-outline-dark mr-sm-1" id="submitBTN3"><i class="fab fa-buromobelexperte"></i> 进制转换器</button>
</form>
</div>
<div class="card-body">
<!--标准型-->
<div class="standard-main" id="std-main">
<div class="title">
计算器
</div>
<!--结果显示区域-->
<div class="result">
<!--显示类型信息-->
<div class="type" id="std-show-bar">
☰ 标准计算器
</div>
<!--上一步的结果-->
<div class="pre" id="std-pre-step">
</div>
<!--第二个/运算结果-->
<div class="second" id="std-show-input">0</div>
</div>
<ul id="std-top-symbol">
<li value="17">%</li>
<li value="18">√</li>
<li value="19"><img src="https://static.runoob.com/images/mix/x_2.png" style="height: 18px;" /></li>
<li value="20"><img src="https://static.runoob.com/images/mix/1_x.png" /></li>
</ul>
<!--数字和符号-->
<ul id="std-num-symbol">
<li value="37">CE</li>
<li value="38">C</li>
<li value="39">Back</li>
<li value="16">÷</li>
<li class="number" value="7">7</li>
<li class="number" value="8">8</li>
<li class="number" value="9">9</li>
<li value="15">×</li>
<li class="number" value="4">4</li>
<li class="number" value="5">5</li>
<li class="number" value="6">6</li>
<li value="14">-</li>
<li class="number" value="1">1</li>
<li class="number" value="2">2</li>
<li class="number" value="3">3</li>
<li value="13">+</li>
<li value="11">±</li>
<li class="number" value="0">0</li>
<li value="10">.</li>
<li value="12">=</li>
</ul>
<!--侧边栏，选择计算器类型-->
<ul class="type-bar" id="std-type-bar">
<li class="active">标准</li>
<li value="2">科学</li>
<li value="3">程序员</li>
</ul>
</div>
<!--科学型-->
<div class="science-main" id="sci-main">
<div class="title">
计算器
</div>
<!--结果显示区域-->
<div class="sci-result">
<!--显示类型信息-->
<div class="type" id="sci-show-bar">
☰ 科学计算器
</div>
<!--上一步的结果-->
<div class="pre" id="sci-pre-step">
</div>
<!--第二个/运算结果-->
<div class="second" id="sci-show-input">0</div>
</div>
<!--上面的3行运算符-->
<ul id="sci-top-symbol">
<li value="21">(</li>
<li value="22">)</li>
<li value="23"><img src="https://static.runoob.com/images/mix/x_y_sqrt.png" style="height: 18px;width: 22px;" /></li>
<li value="24">n!</li>
<li value="25">Exp</li>
<li value="19"><img src="https://static.runoob.com/images/mix/x_2.png" style="height: 18px;" /></li>
<li value="26"><img src="https://static.runoob.com/images/mix/x_y.png" style="height: 18px;" /></li>
<li value="27">sin</li>
<li value="28">cos</li>
<li value="29">tan</li>
<li value="30"><img src="https://static.runoob.com/images/mix/10_x.png" /></li>
<li value="31">log</li>
<li value="32">sinh</li>
<li value="33">cosh</li>
<li value="34">tanh</li>
</ul>
<!--数字和符号-->
<ul id="sci-num-symbol">
<li value="35">π</li>
<li value="37">CE</li>
<li value="38">C</li>
<li value="39">Back</li>
<li value="16">÷</li>
<li value="18">√</li>
<li value="7" class="number">7</li>
<li value="8" class="number">8</li>
<li value="9" class="number">9</li>
<li value="15">×</li>
<li value="17">%</li>
<li value="4" class="number">4</li>
<li value="5" class="number">5</li>
<li value="6" class="number">6</li>
<li value="14">-</li>
<li value="20"><img src="https://static.runoob.com/images/mix/1_x.png" /></li>
<li value="1" class="number">1</li>
<li value="2" class="number">2</li>
<li value="3" class="number">3</li>
<li value="13">+</li>
<li value="36">↑</li>
<li value="11">±</li>
<li value="0" class="number">0</li>
<li value="10">.</li>
<li value="12">=</li>
</ul>
<!--侧边栏，选择计算器类型-->
<ul class="type-bar" id="sci-type-bar">
<li value="1">标准</li>
<li class="active">科学</li>
<li value="3">程序员</li>
</ul>
</div>
<!--程序员型-->
<div class="programmer-main" id="pro-main">
<div class="title">
计算器
</div>
<!--结果显示区域-->
<div class="pro-result">
<!--显示类型信息-->
<div class="type" id="pro-show-bar">
☰ 程序员计算器
</div>
<!--上一步的结果-->
<div class="pre" id="pro-pre-step">
</div>
<!--第二个/运算结果-->
<div class="second" id="pro-show-input">0</div>
<!--显示16、10、8、2进制的值-->
<div id="pro-scales">
<div scale="16">十六进制(HEX) <span>0</span></div>
<div scale="10" class="scale-active">十进制(DEC) <span>0</span></div>
<div scale="8">八进制(OCT) <span>0</span></div>
<div scale="2">二进制(BIN) <span>0</span></div>
</div>
</div>
<!--上面的一行十六进制数字，因为默认是10进制，所以这些按钮默认禁用-->
<ul id="pro-top-symbol">
<li class="disable-btn" value="40">A</li>
<li class="disable-btn" value="41">B</li>
<li class="disable-btn" value="42">C</li>
<li class="disable-btn" value="43">D</li>
<li class="disable-btn" value="44">E</li>
<li class="disable-btn" value="45">F</li>
</ul>
<!--数字和符号-->
<ul id="pro-num-symbol">
<li value="36">↑</li>
<li value="37">CE</li>
<li value="38">C</li>
<li value="39">Back</li>
<li value="16">÷</li>
<li value="46">And</li>
<li value="7" class="number" bin-disable="1">7</li>
<li value="8" class="number" oct-disable="1" bin-disable="1">8</li>
<li value="9" class="number" oct-disable="1" bin-disable="1">9</li>
<li value="15">×</li>
<li value="47">Or</li>
<li value="4" class="number" bin-disable="1">4</li>
<li value="5" class="number" bin-disable="1">5</li>
<li value="6" class="number" bin-disable="1">6</li>
<li value="14">-</li>
<li value="48">Not</li>
<li value="1" class="number">1</li>
<li value="2" class="number" bin-disable="1">2</li>
<li value="3" class="number" bin-disable="1">3</li>
<li value="13">+</li>
<li value="21">(</li>
<li value="22">)</li>
<li value="0" class="number">0</li>
<li value="10" class="disable-btn" id="pro-point">.</li>
<li value="12">=</li>
</ul>
<!--侧边栏，选择计算器类型-->
<ul class="type-bar" id="pro-type-bar">
<li value="1">标准</li>
<li value="2">科学</li>
<li class="active">程序员</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
bready(function(){
Calculator.initCache();
Calculator.initListeners();
});
//全局计算器对象
var Calculator = (function () {
var cal = {
//计算器按键编码
keyCodes: {
0: '0',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '.',
11: '±',
12: '=',
13: '+',
14: '-',
15: '*',
16: '/',
17: '%',
18: '√',
19: 'x2',
20: '1/x',
21: '(',
22: ')',
23: 'yroot',
24: 'n!',
25: 'Exp',
26: '^',
27: 'sin',
28: 'cos',
29: 'tan',
30: 'powten',
31: 'log',
32: 'sinh',
33: 'cosh',
34: 'tanh',
35: 'π',
36: '↑',
37: 'CE',
38: 'C',
39: 'Back',
//以下是程序员型特有的按键
40: 'A',
41: 'B',
42: 'C',
43: 'D',
44: 'E',
45: 'F',
46: '&',
47: '|',
48: '~'
},
//映射用于显示的操作符，比如计算时用*，而显示时x更好
operatorFacade: {
13: '+',
14: '-',
15: '×',
16: '÷',
17: '%',
23: 'yroot',
26: '^',
46: '&',
47: '|'
},
//当前计算器的类型1 --> 标准型, 2-->科学型， 3-->程序员型，默认标准型
type: 1,
//计算器类型前缀，用于从页面获取元素
typePrefix: {
1: "std-",
2: "sci-",
3: "pro-"
},
//记录每个类型的计算器的事件监听是否已经绑定,key:typpe数值，value:默认标准型是true(已加载)
hasInited: {
1: true,
2: false,
3: false
},
//常量
constants: {
//鼠标悬停时的颜色
mouseHoverColor: "#CFCFCF",
//计算器第一行和下面其它行的颜色是不同的，这个是第一行的背景颜色
firstMouseOutColor: "#F2F2F2",
//剩余各行的背景颜色
mouseOutColor: "#E6E6E6"
},
cache: {
//输入内容显示元素
showInput: null,
//上一步计算结果显示区域
preStep: null,
//显示四种进制数值的span，只在程序员型有效
scaleSpans: null
},
/**
* 获取cache.showInput的内容
* @return String
*/
getShowInput: function () {
return cal.cache.showInput.innerHTML;
},
/**
* 设置showInput的值
* @param value
*/
setShowInput: function (value) {
cal.cache.showInput.innerHTML = value;
},
/**
* 获取cache.preStep的内容
* @return String
*/
getPreStep: function () {
return cal.cache.preStep.innerHTML;
},
setPreStep: function (value) {
cal.cache.preStep.innerHTML = value;
},
//操作数栈
operandStack: [],
//运算符栈
operatorStack: [],
//上一次输入是否是二元运算符，如果是并且再次输入二元运算符，那么忽略此次输入
isPreInputBinaryOperator: false,
//上次按键是否是一元操作
isPreInputUnaryOperator: false,
//等号不可以连按
isPreInputEquals: false,
//如果为true，那么接下来输入的数字需要覆盖在showInput上，而不是追加
//上一次计算的结果(=)
preResult: 0,
//当前使用的进制(只在程序员中有效),默认10进制(DEC)
currentScale: 10,
isOverride: false,
//int校验
intPattern: /^-?\d+$/,
//小数校验
floatPattern: /^-?\d+\.\d+$/,
//科学计数法校验
scientificPattern: /^\d+\.\d+e(\+|-)\d+$/,
//校验16进制数字
hexPattern: /^[0-9A-F]+$/,
//辅助判断运算符的优先级
operatorPriority: {
")": 0,
"|": 1,
"&": 2,
"+": 3,
"-": 3,
"*": 4,
"%": 4,
"/": 4,
"^": 5,
"yroot": 5,
"(": 6
},
/**
* 初始化缓存对象(cal.cache)
*/
initCache: function () {
var prefix = cal.typePrefix[cal.type];
cal.cache.showInput = document.getElementById(prefix + "show-input");
cal.cache.preStep = document.getElementById(prefix + "pre-step");
if (cal.type == 3) {
cal.cache.scaleSpans = document.getElementById("pro-scales").getElementsByTagName("span");
}
},
//各种事件监听函数
listeners: {
/**
* 鼠标悬停在按键上的变色效果
*/
mouseHoverListener: function (e) {
var event = e || window.event;
event.currentTarget.style.backgroundColor = cal.constants.mouseHoverColor;
},
/**
* 鼠标从上排符号中移出的变色效果
*/
firstMouseOutListener: function (e) {
var event = e || window.event;
event.currentTarget.style.backgroundColor = cal.constants.firstMouseOutColor;
},
/**
* 鼠标从下排数字、符号中移出的变色效果
*/
mouseOutListener: function (e) {
var event = e || window.event;
event.currentTarget.style.backgroundColor = cal.constants.mouseOutColor;
},
/**
* 按键按下事件监听
*/
keyPressListener: function (e) {
var event = e || window.event;
cal.handleKey(event.currentTarget.value);
},
/**
* 显示/隐藏计算器类型选择栏
*/
toggleTypeBarListener: function () {
var bar = document.getElementById(cal.typePrefix[cal.type] + "type-bar");
if (bar.style.display === "block") {
bar.style.display = "none";
} else {
bar.style.display = "block";
}
},
/**
* 切换计算器类型监听器
*/
switchTypeListener: function (e) {
var event = e || window.event;
cal.switchType(parseInt(event.currentTarget.value));
},
/**
* 切换进制(程序员专用)
*/
switchScaleListener: function (e) {
var event = e || window.event;
var scales = document.getElementById("pro-scales").getElementsByTagName("div"),
//此处应该使用currentTarget属性，因为target属性在绑定事件的元素有子元素的情况下会返回子元素
scale = parseInt(event.currentTarget.getAttribute("scale")),
oldScale = cal.currentScale;
//切换选中样式
for (var i = 0, l = scales.length; i < l; ++i) {
scales[i].removeAttribute("class");
}
event.currentTarget.setAttribute("class", "scale-active");
var lis, btns;
if (scale === 16) {
//处理上排6个16进制数字
cal.listeners._initFirstRowListeners();
if (oldScale < 10) {
cal.listeners._initSecondRowListeners();
}
} else if (scale === 10) {
if (oldScale === 16) {
lis = document.getElementById("pro-top-symbol").getElementsByTagName("li");
cal.disableButtons(lis, cal.listeners.firstMouseOutListener);
} else {
cal.listeners._initSecondRowListeners();
}
} else if (scale === 8) {
if (oldScale > 8) {
lis = document.getElementById("pro-top-symbol").getElementsByTagName("li");
cal.disableButtons(lis, cal.listeners.firstMouseOutListener);
//禁用8和9
btns = cal.getElementsByAttribute("li", "oct-disable", document.getElementById("pro-num-symbol"));
cal.disableButtons(btns, cal.listeners.mouseOutListener);
} else {
cal.listeners._initSecondRowListeners();
}
} else if (scale === 2) {
if (oldScale === 16) {
lis = document.getElementById("pro-top-symbol").getElementsByTagName("li");
cal.disableButtons(lis, cal.listeners.firstMouseOutListener);
}
//禁用2-9
btns = cal.getElementsByAttribute("li", "bin-disable", document.getElementById("pro-num-symbol"));
cal.disableButtons(btns, cal.listeners.mouseOutListener);
}
cal.currentScale = scale;
},
/**
* 初始化第一排操运算符事件监听
* @private
*/
_initFirstRowListeners: function () {
var lis = document.getElementById(cal.typePrefix[cal.type] + "top-symbol").getElementsByTagName("li");
cal.rebuildButtons(lis, cal.listeners.firstMouseOutListener);
},
/**
* 初始化第二排运算符事件监听
* @private
*/
_initSecondRowListeners: function () {
var lis = document.getElementById(cal.typePrefix[cal.type] + "num-symbol").getElementsByTagName("li");
cal.rebuildButtons(lis, cal.listeners.mouseOutListener);
if (cal.type === 3) {
//程序员型的小数点是禁用的
cal.disableButtons([document.getElementById("pro-point")], cal.listeners.mouseOutListener);
}
}
},
//初始化事件监听器
initListeners: function () {
var prefix = cal.typePrefix[cal.type];
//设置上排运算符事件监听,如果是程序员型，因为默认是10进制，而上排是16进制数字，所以不需要设置事件监听
if (cal.type < 3) {
cal.listeners._initFirstRowListeners();
}
//设置下面一栏数字、四则运算事件监听
cal.listeners._initSecondRowListeners();
//显示/隐藏计算器类型选择侧边栏
cal.addEvent(document.getElementById(prefix + "show-bar"), "click", cal.listeners.toggleTypeBarListener);
//为侧边栏下的li绑定切换类型事件
var bar = document.getElementById(prefix + "type-bar");
lis = bar.getElementsByTagName("li");
var li;
for (var i = 0, l = lis.length; i < l; ++i) {
li = lis[i];
//非当前类型才有必要绑定事件
if (li.className !== "active") {
cal.addEvent(li, "click", cal.listeners.switchTypeListener);
}
}
//加载程序员型特有的
if (cal.type === 3) {
var scales = document.getElementById("pro-scales").getElementsByTagName("div"),
scale;
for (i = 0, l = scales.length; i < l; ++i) {
scale = scales[i];
cal.addEvent(scale, "click", cal.listeners.switchScaleListener);
}
}
},
/**
* 相应按键按下事件
* @param value 按键的value值(即其keyCode)
*/
handleKey: function (value) {
var keyCode = parseInt(value);
//如果是一个数字或者小数点，直接显示出来
if (keyCode < 11 || (keyCode > 39 && keyCode < 46)) {
cal.showInput(cal.keyCodes[keyCode]);
if (cal.type === 3) {
//如果是程序员型，那么需要同步显示4中进制的值
cal.showScales(cal.getS.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0