199 lines
No EOL
7.6 KiB
HTML
199 lines
No EOL
7.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>计算器</title>
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" href="css/cal.css">
|
||
<script src="js/cal.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!--标准型-->
|
||
<div class="standard-main" id="std-main">
|
||
<!--结果显示区域-->
|
||
<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="images/x_2.png" style="height: 18px;" /></li>
|
||
<li value="20"><img src="images/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="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="images/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="images/x_2.png" style="height: 18px;" /></li>
|
||
<li value="26"><img src="images/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="images/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="images/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="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>
|
||
</body>
|
||
|
||
</html> |