You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

199 lines
7.6 KiB

<!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">
&nbsp;&nbsp;&nbsp;标准
</div>
<!--上一步的结果-->
<div class="pre" id="std-pre-step">
&nbsp;
</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">
&nbsp;&nbsp;&nbsp;科学
</div>
<!--上一步的结果-->
<div class="pre" id="sci-pre-step">
&nbsp;
</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">
&nbsp;&nbsp;&nbsp;程序员
</div>
<!--上一步的结果-->
<div class="pre" id="pro-pre-step">
&nbsp;
</div>
<!--第二个/运算结果-->
<div class="second" id="pro-show-input">0</div>
<!--显示16、10、8、2进制的值-->
<div id="pro-scales">
<div scale="16">HEX&nbsp;&nbsp;&nbsp;<span>0</span></div>
<div scale="10" class="scale-active">DEC&nbsp;&nbsp;&nbsp;<span>0</span></div>
<div scale="8">OCT&nbsp;&nbsp;&nbsp;<span>0</span></div>
<div scale="2">BIN&nbsp;&nbsp;&nbsp;&nbsp;<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>