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
},
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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