《当时刚刚自学html，接到一个练手项目，当时是学生身份，兴奋与迷茫，磕磕碰碰也完成了，中间经历才是最重要的，得到很多学习的方法。（现在看来代码有很多很多的不足，本文仅仅祭奠刚刚入行的自己，是一种回忆！）》
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="shortcut icon" href="./images/Logo1.png"/>
<title> 。。。</title>
<!--<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">-->
<script src="./libs/jquery-1.6.4/jquery.min.js" type="text/javascript"></script>
<!--<script src="js.js"></script>-->
<!--<script src="js2.js"></script>-->
<script type="text/javascript" src="lhgcore.js"></script>
<script type="text/javascript" src="lhgcalendar.js"></script>
<!--<script src="./bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>-->
<!--<link href="style.css" type="text/css" rel="stylesheet">-->
<script type="text/javascript">
$("input[type=checkbox]").click(countChecked);
function countChecked() {
var s = "";
var snum = "";
$("input[type=checkbox]:checked").each(function () {
s = s + $(this).parent().text() + ",";
snum = snum +"'" + $(this).val() + "'" + ",";
});
var n = $("input[type=checkbox]:checked").length;
$("#text1").attr("value", s);
$("#hidden1").attr("value", snum);
}
function UnCheck() {
var div = document.getElementById("div7");
var CheckBox = div.getElementsByTagName("input");
for (i = 0; i < CheckBox.length; i++) {
CheckBox[i].checked = false;
}
document.all("text1").value = "";
}
function btn1() {
var x1 = document.getElementById("text2").offsetLeft;
var y1 = document.getElementById("text2").offsetTop;
var div1 = document.getElementById('div1');
div1.style.position = "absolute";
div1.style.top = y1 + 20 + "px";
div1.style.left = x1 + "px";
div1.style.display = 'block';
if (div1.style.display == "block") {
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var div5 = document.getElementById("div5");
var butn = document.getElementById('dvbutn');
var y3 = div1.offsetHeight;
var ybtn = butn.offsetHeight;
var y5 = div5.offsetHeight;
var y4 = div3.offsetHeight;
butn.style.position = "absolute";
butn.style.top = y1 + 27 + y3 + "px";
butn.style.left = x1 - 63 + "px";
butn.style.display = "block";
div5.style.position = "absolute";
div5.style.top = y1 + 20 + y3 + 35 + ybtn + "px";
div5.style.left = x1 - 63 + "px";
div5.display = "block";
div3.style.position = "absolute";
div3.style.top = y1 + 20 + y3 + y5 + 38 + ybtn + "px";
div3.style.left = x1 + "px";
div3.display = "block";
div4.style.position = "absolute";
div4.style.top = y1 + 20 + y3 + y5 + 16 + y4 + 40 + ybtn + "px";
div4.display = "block";
$.ajax({ //请求处理页
url: "./getSupermarketInfo", //处理页
dataType: "json",
type: "get",
//传送请求数据
data: "",
success: function (data) {
// console.log(strValue);
//成功后返回的数据
//根据返回值进行状态显示
//注意是True,不是true
var json = eval(data);
$('#marketname').html("");
var i = 0;
var html1 = "";
$.each(json, function (index, item) {
var supermarketName = json[index].supermarketName;
var supermarketNum = json[index].supermarketNum;
var html = "<label><input type='checkbox' name='+supermarketNum+'value='" + supermarketNum + "'/>" + supermarketName + "</label>";
if (i == 0) {
html1 += "<tr><td>" + html + "</td>"
} else {
if (i % 4 == 0 && i != 0) {
html1 += "</tr><tr><td>" + html + "</td>"
} else {
html1 += "<td>" + html + "</td>"
}
}
i += 1;
});
html1 += "</tr>";
$("#marketname").append(html1);
}
})
}
}
function btn2() {
document.getElementById('div1').style.display = 'none';
document.getElementById('div81').style.display = 'none';
document.getElementById('dvbutn').style.display = 'none';
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4")
var div5 = document.getElementById("div5");
var y2 = document.getElementById("text2").offsetTop;
var x2 = document.getElementById("text2").offsetLeft;
var y5 = div5.offsetHeight;
var y4 = div3.offsetHeight;
div5.style.position = "absolute";
div5.style.top = y2 + 70 + "px";
div5.style.left = x2 - 63 + "px";
div5.display = "block";
div3.style.position = "absolute";
div3.style.top = y2 + 110 + "px";
div3.style.left = x2 + "px";
div3.style.display = 'block';
div4.style.position = "absolute";
div4.style.top = y2 + 20 + y5 + 16 + y4 + 45 + "px";
div4.display = "block";
var _supermarketNum = document.getElementById("hidden1").value;
var _deliverTime = document.getElementById("text2").value;
$("#customers").html("");
if (_supermarketNum != "" && _deliverTime != "") {
$.ajax({ //请求处理页
url: "./grouping", //处理页
dataType: "json",
type: 'post',
//传送请求数据
data: {
supermarketNums: _supermarketNum,
deliverTime: _deliverTime
},
success: function (data) {
// console.log(strValue);
//成功后返回的数据
//根据返回值进行状态显示
var json = eval(data);
$.each(json, function (index, item) {
var vegetableName = json[index].vegetableName;
var vegetableNum = json[index].vegetableNum;
var count = json[index].count;
var measurementUnit = json[index].measurementUnit;
var htmltable = "<tr><td style='width: 18%'>" + vegetableName + "</td><td style='width: 35%'>" + vegetableNum + "</td><td style='width: 25%'>" + count + "</td><td>" + measurementUnit + "</td> </tr>"
$("#customers").append(htmltable);
});
},
error:function(){
alert("error");
}
})
}
}
function btn4() {
var _supermarketNum = document.getElementById("hidden1").value;
var _deliverTime = document.getElementById("text2").value;
if (_supermarketNum != "" && _deliverTime != "") {
window.open("./createExcel?supermarketNums=" + _supermarketNum + "&deliverTime=" + _deliverTime + "")
}
}
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: snow;
}
.wrapper {
width: 92%;
height: 750px;
background-image: url(./images/bg1.png);
margin: 0px auto;
}
.heading {
width: 100%;
height: 90px;
margin: 0px auto;
}
.heading_title {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: burlywood;
}
.heading_nav {
padding-bottom: 30px;
padding-top: 30px;
width: 100%;
height: 40px;
position: relative;
}
ul {
margin-left: 40px;
float: left;
list-style-type: none;
padding-top: 6px;
padding-bottom: 6px;
}
li {
padding-left: 10px;
display: inline;
}
a:link, a:visited {
font-weight: bold;
color: darkgray;
text-align: center;
padding: 6px;
text-decoration: none;
}
a:hover, a:active {
color: dimgray;
}
.heading_img img {
border-radius: 30px;
display: inline;
width: 120px;
height: 120px;
/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
margin: 0px auto;
}
.heading_soptlight form {
float: right;
width: 100px;
height: 26px;
position: relative;
margin-right: 80px;
}
form input {
height: 26px;
border-radius: 30px;
}
.footing {
padding-top: 20px;
text-align: center;
font-size: 10px;
color: darkgray;
}
<!--
body {
background-color: snow;
}
-->
#text1 {
width: 50%;
height: 15px;
border-radius: 10px;
}
#text2 {
height: 15px;
border-radius: 10px;
}
div.div {
background-color: green;
position: absolute;
width: 80%;
top: 250px;
left: 120px;
float: left;
/*left: 100px;*/
}
div.div1 {
/*position: relative;*/
width: 80%;
height: 100px;
float: left;
padding: 1px;
border: 1px solid #f9dd34;
overflow-y: scroll;
}
div.div2 {
position: absolute;
top: 124px;
padding: 1px;
border: 1px solid #000;
}
div.div3 {
position: absolute;
top: 110px;
left: 108px;
width: 80%;
height: 200px;
padding: 1px;
float: left;
border: 0px;
overflow-y: scroll;
}
div.div4 {
position: absolute;
top: 340px;
left: 108px;
width: 80%;
padding: 1px;
float: left;
border: 0px;
}
div.div5 {
position: absolute;
top: 70px;
left: 45px;
height: 36px;
width: 89%;
padding: 1px;
float: left;
border: 0px;
}
div.dvbutn {
position: absolute;
top: 45px;
left: 45px;
height: 10px;
width: 89%;
padding: 1px;
float: left;
border: 0px;
}
div.div6 {
position: absolute;
top: 230px;
left: 120px;
float: left;
/*left: 100px;*/
}
#a1 {
width: 10%;
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: snow;
font-weight: 900;
/*text-shadow: 5px 5px 5px green;*/
}
#a12 {
width: 10%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: snow;
font-weight: 900;
/*text-shadow: 5px 5px 5px green;*/
}
#btn1 {
width: 4%;
background-color: green;
display: inline;
border-radius: 30px;
}
#btn2 {
width: 10%;
background-color: green;
display: inline;
float: right;
border-radius: 30px
}
#btn4 {
width: 111px;
height: 43px;
display: inline;
float: right;
border-radius: 50px;
background-image: url("./images/btn4.png");
}
#btn3 {
width: 10%;
display: inline;
float: right;
border-radius: 30px;
background-color: green;
}
#btn31 {
width: 10%;
display: inline;
float: right;
border-radius: 30px;
background-color: green;
}
#btn5 {
width: 10%;
display: inline;
float: right;
border-radius: 30px
}
h3 {
color: #900;
}
h1 {
font-family: sans-serif;
color: #3333FF;
text-align: center;
}
.pp1 {
color: snow;
font-weight: 900;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td, #customers th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#customers th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#customers tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading_nav">
<div class="heading_img">
<center><img src="./images/Logo1.png"></center>
</div>
</div>
</div>
<div class="body">
<div id="div" class="div">
<p id="p1"><a id="a1">选择时间：</a><input type="text" id="text2" style="border:1px solid #999;"
onclick="J.calendar.get()" ;/>
<a id="a12">选择超市：</a> <input type="text" id="text1" onclick="btn1()"/>
<button id="btn2" onClick="btn2()"><p class="pp1"> 确定</p></button>
</p>
<div id="div1" class="div1" style="display:none">
<div id="div7" class="div7">
</div>
<table id="marketname">
</table>
<input type="hidden" id="hidden1">
</div>
<div id="dvbutn" class="dvbutn" style="display: none">
<button id="btn3" onclick="countChecked()"><p class="pp1">确定选择</p></button>
<button id="btn31" onclick="UnCheck()"><p class="pp1"> 清除</p></button>
</div>
<div id="div5" class="div5"><img src="./images/daohang11.png" id="daohang11"
style="height: 36px; width:100%"></div>
<div id="div3" class="div3">
<table id="customers" class="table table-hover">
<div id="div81">
<tr>
<td style="width: 17%">无数据</td>
<td style="width: 35%">无数据</td>
<td style="width: 25%">无数据</td>
<td>无数据</td>
</tr>
<tr>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
</tr>
<tr>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
</tr>
<tr>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
</tr>
<tr>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
<td>无数据</td>
</tr>
</div>
</table>
<br>
<br>
</div>
<div id="div4" class="div4">
<button id="btn4" onClick="btn4()"></button>
</div>
</div>
</div>
</div>
</div>
<div class="footing"> @ 青岛普恩特科技</div>
</div>
</body>
</html>
扫一扫
5562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
