<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.background-image {
background-image: url("images/buytitle_bg.gif");
text-align: left;
text-indent: 50px;
background-repeat: no-repeat;
background-size: auto 100%;
}
.parent {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
#first {
/*第一个数字输入框*/
width: 210px;
border: 0px;
}
#second {
/*运算符号输入框*/
width: 210px;
border: 0px;
}
#three {
/*第二个数字输入框*/
width: 70px;
border: 0px;
}
#four {
/*结果输入框，设置文字方向为右*/
width: 140px;
border: 0px;
text-align: right;
}
.b1 {
/*设置按键大小*/
width: 50px;
}
</style>
</head>
<body>
<iframe src="header.html" frameborder="0" height="100%" width="100%" scrolling="no"></iframe>
<div>
<table width="1000px" align="center">
<tr>
<td><img src="images/mycart.gif" style="display: inline-block;"> </td>
<td>全场运费一律2元</td>
<td>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">简易计算器</a>
</p>
<div id="light" class="white_content">简易计算器
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a>
</div>
<div id="fade" class="black_overlay">
<script>
function inputNum(event) { //用来输入数字的函数
var add = event.target.value; //获得触发的按键的数值值
var input1 = document.getElementById("first"); //读取第一个输入元素
var fuhao = document.getElementById("second"); //读取符号输入元素
var input2 = document.getElementById("three"); //读取第二个输入元素
var out = document.getElementById("four"); //读取结果元素框
if(fuhao.value == "") { //如果符号栏为空，向第一个数字输入框输入框，否则向第二个
inputAdd(input1, add, out); //调用输入函数
} else {
inputAdd(input2, add, out);
}
}
function inputAdd(input1, add, out) { //input1是输入框元素，add是需要加上的元素，out是结果输出框元素
if(input1.value.length < 8 && out.value == "") { //如果位数未到达限定值并且未输出结果
if(add == "+/-" || add == ".") { //如果是正负键和小数点按键
if(add == "+/-") { //如果是正负键
if(input1.value.indexOf("-") == -1) { //如果是个正数
var k = "-"; //在原来的数前面加上负号
k = k + input1.value + "";
input1.value = k;
} else { //如果是负数，去掉前面的负号
input1.value = input1.value.substring(1);
}
} else { //如果是小数点键被按下
if(input1.value.length != 0 && input1.value.indexOf(".") == -1) { //如果没有小数点且输入框不为空
input1.value = input1.value + add + ""; //在当前输入框末尾加上小数点
}
}
} else { //如果是普通数字输入
input1.value = input1.value + add + ""; //将新输入的数值输入到输入框
}
}
}
function fuhao(event) { //计算符号输入函数
var add = event.target.value; //获得触发的按键的数值值
var input1 = document.getElementById("first"); //读取第一个输入元素
var fuhao = document.getElementById("second"); //读取符号输入元素
if(input1.value != "" && fuhao.value == "") { //如果第一个输入框不为空，且计算符号栏为空，则输入对应符号
fuhao.value = add;
}
}
function backspace() { //回退函数
var input1 = document.getElementById("first"); //读取第一个输入元素
var fuhao = document.getElementById("second"); //读取符号输入元素
var input2 = document.getElementById("three"); //读取第二个输入元素
var out = document.getElementById("four"); //读取结果元素框
if(out.value != "") //如果已输出计算结果，则将所有输入框清空并跳出函数
input1.value = "";
fuhao.value = "";
input2.value = "";
out.value = "";
return;
}
if(input2.value != "") { //如果第二数值输入框不为空，则删除输入框最后一位数并退出函数
input2.value = input2.value.substring(0, input2.value.length - 1);
return;
}
if(fuhao.value != "") { //如果计算符号栏不为空，则清除计算符号栏并退出函数
fuhao.value = "";
return;
}
if(input1.value != "") { //如果第一数值输入框不为空，则删除输入框最后一位数并退出函数
input1.value = input1.value.substring(0, input1.value.length - 1);
return;
}
}
function cle() { //清除函数，清空所有输入框
var input1 = document.getElementById("first"); //读取第一个输入元素
var fuhao = document.getElementById("second"); //读取符号输入元素
var input2 = document.getElementById("three"); //读取第二个输入元素
var out = document.getElementById("four"); //读取结果元素框
input1.value = "";
fuhao.value = "";
input2.value = "";
out.value = "";
}
function outCon() { //计算及结果输出函数
var input1 = document.getElementById("first").value; //读取第一个输入元素
var fuhao = document.getElementById("second").value; //读取符号输入元素
var input2 = document.getElementById("three").value; //读取第二个输入元素
var out = document.getElementById("four"); //读取结果元素框
if(input1 != "" && input2 != "" && fuhao != "" && out.value == "") { //如果所有的数字全部输入完毕
var num1 = Number(input1); //将字符串转换成可计算的数值
var num2 = Number(input2);
var output = 0;
switch(fuhao) { //根据运算符计算结果
case "*":
output = num1 * num2;
break;
case "/":
output = num1 / num2;
break;
case "+":
output = num1 + num2;
break;
case "-":
output = num1 - num2;
break;
default:
break;
}
out.value = "=" + output; //将计算结果在结果输出框中输出
}
}
</script>
<table style="background-color:#EEE8AA;padding:5px">
<tr>
<td id="inp" colspan="4" style="background-color:white"><input type="text" id="first" readOnly="readOnly"><br><input type="text" id="second" readOnly="readOnly"><br><input type="text" id="three" readOnly="readOnly"><input type="text" id="four" readOnly="readOnly"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="BackSpace" onclick="backspace()"></td>
<td><input type="button" value="C" class="b1" onclick="cle()"></td>
<td><input type="button" value="=" class="b1" onclick="outCon()"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="7" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="8" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="9" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="/" onclick="fuhao(event)"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="4" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="5" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="6" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="*" onclick="fuhao(event)"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="1" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="2" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="3" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="-" onclick="fuhao(event)"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="0" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="+/-" onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="." onclick="inputNum(event)"></td>
<td><input type="button" class="b1" value="+" onclick="fuhao(event)"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class=" background-image" colspan="6">确认商品价格与交易条件</td>
</tr>
<tr>
<td width="150px">商品名</td>
<td width="50px">原价</td>
<td width="50px">优惠价</td>
<td width="150px">打折</td>
<td width="50px">数量</td>
<td width="50px">操作</td>
</tr>
<tr>
<td>按摩器</td>
<td>¥258.00</td>
<td style="color: red;">¥129.00</td>
<td>5折</td>
<td><input type="text" name="num1" value="1"></td>
<td>
<a href="#" style="text-decoration: none; color: black;">删除</a>
</td>
</tr>
<tr>
<td>美国口语训练</td>
<td>480.00</td>
<td style="color: red;">¥292.90</td>
<td>6折</td>
<td><input type="text" name="num2" value="1"></td>
<td>
<a href="#" style="text-decoration: none; color: black;">删除</a>
</td>
</tr>
<tr>
<td>书本全集</td>
<td>¥138.00</td>
<td style="color: red;">¥103.9</td>
<td>8折</td>
<td><input type="text" name="num3" value="1"></td>
<td>
<a href="#" style="text-decoration: none; color: black;">删除</a>
</td>
</tr>
<tr>
<td>继续挑选商品</td>
<td></td>
<td>¥527.40</td>
<td>你共节省了¥384.60</td>
<td></td>
<td></td>
</tr>
<tr>
<td class=" background-image" colspan="6">补充您的邮件地址和联系人基本信息</td>
</tr>
<tr>
<td width="120px">
收件人：
</td>
<td width="150px">
<input type="text" name="name" />
</td>
<td width="150px">
</td>
</tr>
<tr>
<td>
地 址:
</td>
<td>
<input type="text" name="direccion" />
</td>
<td>
<font color="black"> <b>请点击填写地址</b></font>
</td>
</tr>
<tr>
<td>
电话：
</td>
<td>
<input type="text" name="telefono1" style="width:15px" /> -
<input type="text" name="telefono2" style="width:86px" /> -
<input type="text" name="telefono3" style="width:15px" />
</td>
<td>
区号-电话号码-分机
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#"><img src="images/submit.gif"></a>
</td>
<td></td>
</tr>
</table>
</div>
<iframe src="footer.html" frameborder="0" height="200px" width="100%" scrolling="no"></iframe>
</body>
</html>此项目属于个人项目，如有雷同纯属巧合！