第一阶段关于HTML的学习结束了，关于第一阶段的项目展示自己也投入了很多的心血，陈老师所说的“练技术论“深得我心，所以我就利用我所学的技术在项目中堆积特效，每次自己有了想法并排除重重困难实现自己想要的效果时，心里真的很满足，最终，我也实现了所有我想实现的效果，在项目展示之前，我会毫不犹豫的给与自己满分。
然而直到项目展示结束，我才深深的意识到我错了，由于过多的特效堆积，忽略了页面的美化，看过了其他小组华丽的展示效果，听过了老师们对项目的展示评价，我才幡然醒悟：这其实并不是一次简单的技术运用和练习，如果真的用练习的心态去对待，就如同写作文跑了题，变得不伦不类。这样的项目展示实际上是面向用户的一种展示，用户其实并不在乎你运用了那些技术，用户只是注重你的视觉效果和实用功能。
最终我们小组光荣的垫了底，有点小失望。不过获得了项目展示的经验，并且关于老师说的另外一点，团队合作的问题，这确实是现实存在的问题，作为组长，我确实没有严格的要求自己的组员，看到项目展示截图的对比，确实有点尴尬啊，我们的页面好LOW。不过，说真的，哥不服！下次再一决雌雄吧。
接下来保存一下自己的作品吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BHGG生态园</title>
<link rel="stylesheet" type="text/css" href="css/chanpin.css" />
</head>
<body>
<div class="head">
<div class="logo-text">
BHGG生态园
</div>
<div class="head-nav">首页</div>
<div class="head-nav">产品展示
<ul class="nav_1">
<li>采摘</li>
<li>水果摊</li>
<li>畜牧</li>
<li>水产</li>
</ul>
</div>
<div class="head-nav">
生态餐厅
<ul class="nav_1">
<li>肉类</li>
<li>海鲜类</li>
<li>蔬菜类</li>
</ul>
</div>
<div class="head-nav">
休闲娱乐
<ul class="nav_1">
<li>cs野战</li>
<li>休闲垂钓</li>
<li>烧烤野炊</li>
<li>休闲客房</li>
</ul>
</div>
<div class="head-nav">关于我们</div>
<div style="clear: both;"></div>
<div id="head-img">
<div class="btn">
<a href="#caizhai" onmouseover="color1()" onmouseleave="color()">
<img src="img/img2.jpg" class="img-head" />
</a>
</div>
<div class="btn">
<a href="#shuguotan" onmouseover="color2()" onmouseleave="color()">
<img src="img/img1.jpg" class="img-head" />
</a>
</div>
<div class="btn">
<a href="#xumu" onmouseover="color3()" onmouseleave="color()">
<img src="img/img3.jpg" class="img-head" />
</a>
</div>
</div>
</div>
<div class="body">
<a name="caizhai"></a>
<div class="caizhai-head">
<div class="caizhai-title">
<div class="btn1" onclick="click1()">葡萄</div>
<div class="btn2" onclick="click2()" style="left: 123px;">桑葚</div>
<div class="btn3" onclick="click3()" style="left: 246px;">草莓</div>
<div class="btn4" onclick="click4()" style="left: 369px;">油菜</div>
<div class="btn5" onclick="click5()" style="left: 492px;">白菜</div>
<div style="left: 615px;">地瓜</div>
<div style="left: 738px;">西瓜</div>
<div style="left: 861px;">芹菜</div>
</div>
</div>
<div style="clear: both;"></div>
<div id="stage">
<div id="ad-banner">
<div class="ad">
<div class="putao-text1">
葡萄是一种浆果，是世界上最古老分布最广的一种水果之一，人类在很早以前就开始栽培这种果树，其浆果多为圆形或椭圆，色泽随品种而异。几乎占全世界水果产量的四分之一；其营养价值很高，可制成葡萄汁、葡萄干和葡萄酒。粒大、皮厚、汁少、水多，皮肉易分离,味道酸甜可口，耐贮运的欧亚种葡萄又称为提子，一般成簇生长，有黄绿色、红色、黑蓝色或紫色。果肉外有层薄皮，皮外有薄霜，有些品种无籽。葡萄既可做水果生食，也可酿酒或制作葡萄干。此外，还可用做装饰。葡萄因颜色鲜艳、味道鲜美，而且具有很高的营养价值，被人们称为“水晶明珠”。葡萄富含镁、维生素C和铁，有一定的药用价值，是重要的供能食物和滋补品。
</div>
<div class="putao-text1">
BHGG生态示范葡萄品种介绍:
</div>
<div class="putao-text1">
夏黑: 欧美种、三倍体无核品种。成熟期早、品质优、口感佳、丰产性好、抗病性强、适应性广，耐贮运。平均穗重670克，最大穗重达2000克。果粒近圆形至短椭圆形，平均单粒重10克，大果可达15克以上，上色快，着色一致，果粉厚，果肉硬脆，味浓甜，品质极佳；在我园区于6月初成熟，成熟果实挂树时间长达1个月，不掉粒、不裂果、不变味。是目前比较有发展前景的一个早熟无核优良葡萄品种。
</div>
<div>
<img src="img/img4.jpg" class="putao-img" />
</div>
<div class="putao-text1">
红 提： 又称美国红提、晚红、红地球、大红球。果穗大，长势好，果穗特大，平均穗重800g，最大可达2500g，极易丰产，种植第二年可达2500公斤；该品种果粒圆至近圆锥形，粒重11－13g，最大22g，果皮鲜红色至紫红色，果肉硬脆，用刀切片不淌汁，味甜，具有独特的清香味，不裂果，果柄拉力强，果实成熟后留树可保存1－2个月，我园区于7月底成熟。
</div>
<div>
<img src="img/img5.jpg" class="putao-img" />
</div>
<div class="putao-text1">
金 手 指： 属欧美杂交种,果穗巨大，松紧适度，平均穗重750克，最大穗重1500克。果粒形状奇特美观，果皮中等厚，韧性强，不裂果。果肉硬，可切片，耐贮运，含糖量20%－22%，甘甜爽口，有浓郁的冰糖味和牛奶味。果柄与果粒结合牢固，捏住一粒果可提起整穗果，是唯一的高糖度早熟欧美杂交种。我园区6月初成熟属中早熟品种。
</div>
<div>
<img src="img/img6.jpg" class="putao-img" />
</div>
</div>
<div class="ad">
<div class="putao-text1">
桑葚，桑树的成熟果实，桑葚又叫桑果、桑泡儿，农人喜欢其成熟的鲜果食用，味甜汁多，是人们常食的水果之一。成熟的桑葚质油润，酸甜适口，以个大、肉厚、色紫红、糖分足者为佳。每年4～6月果实成熟时采收，去杂质，晒干或略蒸后晒干食用，也可来泡酒。具体成熟时间各地不一样，南方早一点，北方稍迟一点。
</div>
<div class="putao-text1">
多吃桑葚的好处:
</div>
<div class="putao-text1">
（1）补肝益肾 中医认为，肝主藏血、肾主生髓，是人身能量储存基地。桑葚性味甘寒、具有补肝益肾的功效。男性朋友要注意：从中医角度说，对于性机能失调、属寒热混杂体质的人，最好不要随便补肾壮阳，否则会越补越“虚”。夏天可饮用桑葚汁，不仅可补充体力，还可提高性生活质量。 改善生殖亚健康 传承后代是人生一大要务！50%不孕不育归咎于男性精液质量下降。桑葚则可以改善这种“生殖亚健康”，是很多治疗死精症的方剂的重要组成药物。因此，男性朋友可以多吃桑葚。
</div>
<div>
<img src="img/img7.jpg" class="putao-img" />
</div>
<div class="putao-text1">
（2）补血养颜 桑葚为桑科落叶乔木桑树的成熟果实，于果实红熟时采收，晒干或生用、或加蜜熬膏用。桑葚味甘、酸，性寒。能滋补肝肾、补血养颜、生津止渴。可用于肝肾阴亏、腰膝酸软、目暗耳鸣、关节不利、津亏血少、口渴烦热、肠燥便秘等症。现代药理研究证明，桑葚含有多种维生素，尤其是含有丰富的磷和铁，能益肾补血，使人面色红润，头发漆黑亮丽。若与黑豆、枣肉相配，还能提供使头发变黑的黑色素及供头发生长所需的蛋白质。 其他功效 当然，桑葚除了以上两种好处，还有很多功效。生津润肠、清肝明目、安神养颜、补血乌发等，都是桑葚的功效；现代医学还发现桑葚具有调节免疫、促进造血细胞生长、抗诱变、抗衰老、降血脂、护肝等保健作用。适合人群：一般成人适合食用。女性、中老年人及过度用眼者更宜食用。每日20～30颗（30～50克）。
</div>
<div>
<img src="img/img8.jpg" class="putao-img" />
</div>
</div>
<div class="ad">
<div class="putao-text1">
草莓（学名：Fragaria × ananassa Duch，英文：Strawberry）。蔷薇科、草莓属多年生草本，一种红色的花果，又名凤梨草莓、红莓、洋莓、地莓等，外观呈心形，鲜美红嫩，果肉多汁，含有特殊的浓郁水果芳香。
</div>
<div>
<img src="img/img9.jpg" class="putao-img" />
</div>
<div class="putao-text1">
草莓富含氨基酸、果糖、蔗糖、葡萄糖、柠檬酸、苹果酸、果胶、胡萝卜素、维生素B1、B2、烟酸及矿物质钙、镁、磷、钾、铁等，这些营养素对生长发育有很好的促进作用，对老人、儿童大有裨益。国外学者研究发现，草莓中的有效成分，可抑制癌肿的生长。每百克草莓含维生素C50-100毫克，比苹果、葡萄高10倍以上。科学研究业已证实，维生素C能消除细胞间的松弛与紧张状态，使脑细胞结构坚固，皮肤细腻有弹性，对脑和智力发育有重要影响。饭后吃一些草莓，可分解食物脂肪，有利消化。
</div>
<div>
<img src="img/mei.jpg" class="putao-img" />
</div>
<div class="putao-text1">
食疗价值 1、治糖尿病：鲜草莓适量。将其洗净，频频食用。 2、治干咳：鲜草莓60克，冰糖30克。将两种原料入锅，一同隔水蒸烂。每日3次分服。 3、治贫血：草莓100克，红枣15颗，荔枝干30克，糯米150克。将这四种食物入锅，加适量水熬粥食用。每日1次。
</div>
<div>
<img src="img/img11.jpg" class="putao-img" />
</div>
</div>
<div class="ad" style="text-align: center;font-size: 10em;">没长出来</div>
<div class="ad" style="text-align: center;font-size: 10em;">被偷光了</div>
</div>
</div>
<a name="shuguotan"></a>
<input type="button" id="shuguo-head" onclick="go()" value="欢迎来到BHGG蔬果摊！新鲜蔬果还有3秒到达现场！">
<span id="time" style="margin-left: 80px;"></span>
<div id="shuguo">
<div class="chanpin">
<div class="shuguo-div">
<img src="img/cabbage.jpg" class="shuguo-img" />
</div>
<div class="shuguo-text">
抱团的大白菜
</div>
<div class="buy">
<input type="button" id="buy-btn" class="buy-bn" value="购买">
</div>
</div>
<div class="chanpin">
<div class="shuguo-div">
<img src="img/cape.jpg" class="shuguo-img" />
</div>
<div class="shuguo-text">
油菜之王
</div>
<div class="buy">
<input type="button" class="buy-bn" value="购买">
</div>
</div>
<div class="chanpin">
<div class="shuguo-div">
<img src="img/dragon.jpg" class="shuguo-img" />
</div>
<div class="shuguo-text">
愤怒的火龙果
</div>
<div class="buy">
<input type="button" class="buy-bn" value="购买">
</div>
</div>
<div class="chanpin">
<div class="shuguo-div">
<img src="img/watermelon.jpg" class="shuguo-img" />
</div>
<div class="shuguo-text">
现摘现买的沃特卖人
</div>
<div class="buy">
<input type="button" class="buy-bn" value="购买">
</div>
</div>
<div class="chanpin">
<div class="shuguo-div">
<img src="img/putao.jpg" class="shuguo-img" />
</div>
<div class="shuguo-text">
葡萄娃
</div>
<div class="buy">
<input type="button" class="buy-bn" value="购买">
</div>
</div>
<div class="chanpin">
<div class="shuguo-div">
<img src="img/sanshen.jpg" class="shuguo-img" />
</div>
<div class="shuguo-text" style="line-height: 25px;">
干了这碗桑椹<br />我们还是朋友
</div>
<div class="buy">
<input type="button" class="buy-bn" value="购买">
</div>
</div>
</div>
<a name="xumu"></a>
<div class="xumu-head">
欢迎参观BHGG养殖场
</div>
<div id="wutai">
<div id="left-btn">
<</div>
<div id="right-btn">></div>
<div id="hengfu">
<div class="da">
<img src="img/pig3.jpg" class="da-img" />
</div>
<div class="da">
<img src="img/pig2.jpg" class="da-img">
</div>
<div class="da">
<img src="img/pig1.jpg" class="da-img">
</div>
<div class="da">
<img src="img/niu.jpg" class="da-img">
</div>
<div class="da">
<img src="img/yang.jpg" class="da-img">
</div>
<div class="da">
<img src="img/pig4.jpg" class="da-img">
</div>
<div class="da">
<img src="img/chick.jpg" class="da-img">
</div>
<div class="da">
<img src="img/sheep.jpg" class="da-img">
</div>
<div class="da">
<img src="img/pig5.jpg" class="da-img">
</div>
<div class="da">
<img src="img/pig6.jpg" class="da-img">
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/chanpin.js">
</script>
样式表：
.head { 100%; height: 90px; /*border: 1px solid green;*/ background-color: white; background: url(../img/daohangtiao.jpg) } .logo-text { 300px; height: 90px; transform: rotate(2deg); font-size: 3em; font-family: SimSun; font-weight: bold; color: white; text-align: center; line-height: 90px; float: left; box-shadow: 10px 10px 10px divghtseagreen; background-color: greenyellow; } .head-nav { float: left; line-height: 90px; 150px; font-size: 1em; text-align: center; overflow: hidden; max-height: 90px; color: white; } .head-nav:hover { background-color: skyblue; cursor: pointer; max-height: 500px; transition: 0.8s; } .nav_1 { margin: 0px; } .nav_1 li { list-style: none; text-align: center; position: relative; margin-left: -50px; background-color: skyblue; z-index: 100; } .nav_1 li:hover { background-color: darkturquoise; cursor: pointer; } .img-head { 200px; } .btn { 200px; height: 170px; padding-top: 20px; line-height: 170px; margin-top: 20px; margin-left: 200px; background-color: green; border-radius: 100%; overflow: hidden; float: left; } .btn:hover { background-color: yellow; 198px; height: 168px; transform: rotate(1080deg); transition: 1.5s; box-shadow: 10px 10px 10px lawngreen; } #head-img { background-image: url(../img/img13.jpg); background-repeat: round; 1335px; height: 220px; position: absolute; z-index: 2; top: 90px; margin-top: 10px; } .body { background-color: palegreen; border: 1px solid black; } .caizhai-head { 1000px; height: 40px; position: relative; margin-top: 230px; margin-left: 178px; } .caizhai-title div { float: left; margin-left: 0px; 123px; height: 40px; /*border: 1px solid black;*/ text-align: center; background-color: lightgray; line-height: 40px; list-style: none; position: absolute; z-index: 2; } .caizhai-title div:hover { cursor: pointer; } .btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover { cursor: pointer; font-size: 1.5em; color: mediumorchid; background-color: white; } #stage { 1000px; height: 2250px; /* border: 1px solid red;*/ position: absolute; top: 372px; left: 178px; overflow: hidden; } #ad-banner { 5000px; height: 500px; } .ad { 1000px; height: 500px; float: left; } .putao-text1 { font-family: "楷体"; font-size: 1.5em; } .putao-img { 600px; margin-left: 200px; } #shuguo-head { margin-top: 2300px; font-family: "宋体"; font-weight: bold; font-size: 2em; position: relative; margin-left: 300px; } #time { font-size: 2em; } #shuguo { 1000px; margin-left: 175px; height: 600px; /*border: 1px solid black;*/ display: none; position: relative; } .chanpin { 300px; height: 260px; float: left; /* border: 1px solid blue;*/ margin-top: 20px; margin-left: 20px; } #buy-btn { 60px; height: 30px; } .buy { 50px; height: 20px; margin-top: -20px; margin-left: 230px; /* border: 1px solid red;*/ } .shuguo-div { 290px; height: 200px; margin-left: 0px; } .shuguo-img { 290px; height: 200px; } .shuguo-text { /*border: 1px solid black;*/ 200px; height: 50px; margin-left: 0px; text-align: center; line-height: 70px; font-weight: bold; font-size: 1.2em; margin-top: 10px; } .shuguo-text:hover { cursor: pointer; color: greenyellow; } .xumu-head { font-weight: bold; font-size: 1.5em; 400px; height: 50px; /*border: 1px solid red;*/ margin-left: 450px; line-height: 50px; text-align: center; /*background-color: ;*/ } #wutai { 990px; height: 500px; /* border: 10px solid black;*/ position: absolute; left: 177px; top: 2800px; overflow: hidden; } #left-btn, #right-btn { position: absolute; top: 0px; height: 500px; 30px; background-color: blueviolet; color: white; opacity: 0.5; line-height: 500px; text-align: center; font-size: 30px; z-index: 998; } #left-btn { left: 0px; } #right-btn { right: 0px; } #left-btn:hover { cursor: pointer; opacity: 0.7; } #right-btn:hover { cursor: pointer; opacity: 0.7; } #hengfu { 10000px; height: 500px; position: relative; background-color: blue; } .da { 1000px; height: 500px; float: left; text-align: center; line-height: 250px; font-size: 100px; } .da-img { 1000px; height: 500px; } #mask { 100%; /*height: 700px;*/ background-color: darkorchid; opacity: 0.3; position: fixed; top: 0px; left: 0px; } .pop-login { 800px; height: 550px; position: fixed; /*top:200px; left: 400px;*/ background-color: white; z-index: 999; } #close-pop { position: absolute; top: 5px; right: 5px; } #close-pop:hover { cursor: pointer; }
JS特效：
function color1() { document.getElementById('head-img').style.backgroundImage = "url(img/img12.jpg)"; document.getElementById('head-img').style.backgroundRepeat = "round"; } function color2() { document.getElementById('head-img').style.backgroundImage = "url(img/img13.jpg)" } function color3() { document.getElementById('head-img').style.backgroundImage = "url(img/img14.jpg)" } function color() { document.getElementById('head-img').style.backgroundImage = "url(img/img13.jpg)" } var banner = document.getElementById('ad-banner'); function click1() { banner.style.marginLeft = "0" + "px"; document.getElementById('stage').style.height = "2250" + "px"; document.getElementById('shuguo-head').style.marginTop = "2300" + "px"; document.getElementById('wutai').style.top = "2800" + "px"; document.getElementById('shuguo').style.display = "none"; } function click2() { banner.style.marginLeft = "-1000" + "px"; document.getElementById('stage').style.height = "1250" + "px"; document.getElementById('shuguo-head').style.marginTop = "1300" + "px"; document.getElementById('shuguo').style.display = "none"; document.getElementById('wutai').style.top = "1800" + "px"; } function click3() { banner.style.marginLeft = "-2000" + "px"; document.getElementById('stage').style.height = "1600" + "px"; document.getElementById('shuguo-head').style.marginTop = "1650" + "px"; document.getElementById('shuguo').style.display = "none"; document.getElementById('wutai').style.top = "2150" + "px"; } function click4() { banner.style.marginLeft = "-3000" + "px"; document.getElementById('stage').style.height = "390" + "px"; document.getElementById('shuguo-head').style.marginTop = "400" + "px"; document.getElementById('shuguo').style.display = "none"; document.getElementById('wutai').style.top = "900" + "px"; } function click5() { banner.style.marginLeft = "-4000" + "px"; document.getElementById('stage').style.height = "390" + "px"; document.getElementById('shuguo-head').style.marginTop = "400" + "px"; document.getElementById('shuguo').style.display = "none"; document.getElementById('wutai').style.top = "900" + "px"; } var t = 4; var arr = Array(); function go() { t = 4; arr.push(window.setInterval("time()", 1000)); } function time() { document.getElementById('time').innerText = --t; if(t == 0) { for(var i in arr) { window.clearInterval(arr[i]); } document.getElementById('time').innerText = ''; document.getElementById('shuguo').style.display = "block"; var tops = document.getElementById('wutai').offsetTop + 600; document.getElementById('wutai').style.top = tops + "px"; } } var speed = 10; var count = 1; var banners = document.getElementById('hengfu'); var arr2 = Array(); var arr1 = Array(); var arr3 = Array(); function moveRight() { var banner_left = banners.offsetLeft; if(count > 1) { for(var k in arr3) { window.clearInterval(arr3[k]); } if(banner_left < ((count - 2) * (-1000))) { banners.style.marginLeft = banner_left + speed + 'px'; } else { for(var j in arr1) { window.clearInterval(arr1[j]); } if(count > 1) { count--; } if(banner_left % 1000 == 0) { arr3.push(window.setInterval('move()', 25)); } } } else { for(var j in arr1) { window.clearInterval(arr1[j]); banners.style.marginLeft = banner_left - 9000 + "px"; count = 10; } } } function moveLeft() { var banner_left = banners.offsetLeft; if(count < 10) { for(var k in arr3) { window.clearInterval(arr3[k]); } if(banner_left > (count * (-1000))) { banners.style.marginLeft = banner_left - speed + 'px'; } else { for(var i in arr2) { window.clearInterval(arr2[i]); } if(count < 10) { count++; } } if(banner_left % 1000 == 0) { arr3.push(window.setInterval('move()', 25)); } } else { for(var i in arr2) { window.clearInterval(arr2[i]); banners.style.marginLeft = banner_left + 9000 + "px"; count = 0; } } } document.getElementById('right-btn').onclick = function() { arr2.push(window.setInterval('moveLeft()', 10)); } document.getElementById('left-btn').onclick = function() { arr1.push(window.setInterval('moveRight()', 10)); } // 大图轮播自动轮播 arr3.push(window.setInterval('move()', 25)); function move() { var banner_le = banners.offsetLeft; banners.style.marginLeft = banner_le - speed + 'px'; if(banner_le == 0) { count = 1; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-1000)) { count = 2; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-2000)) { count = 3; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-3000)) { count = 4; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-4000)) { count = 5; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-5000)) { count = 6; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-6000)) { count = 7; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-7000)) { count = 8; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-8000)) { count = 9; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); } if(banner_le == (-9000)) { count = 10; for(var k in arr3) { clearInterval(arr3[k]); } window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000); banners.style.marginLeft = banner_le + 9000 + "px"; count = 0; } } // document.getElementById('buy-btn').onclick = function() { var b_width = document.body.clientWidth; var b_height = document.documentElement.clientHeight; var left = b_width / 2 - 400 + 'px'; var top = b_height / 2 - 250 + 'px'; var mask = document.createElement('div'); mask.style.height = b_height + 'px'; mask.id = 'mask'; document.body.appendChild(mask); var pop_login = document.createElement('div'); pop_login.style.left = left; pop_login.style.top = top; pop_login.className = "pop-login"; pop_login.innerHTML = '<form action="#" method="post" style="margin-top:10px;">' + '<table border="1" width="400" bgcolor="sandybrown" align="center">' + '<tr>' + '<td align="right" width="30%">' + '请填写你的姓名：' + '</td>' + '<td>' + '<input type="text" name="ID">' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + '性别' + '</td>' + '<td>' + '<input type="radio" name="sex" id="sex1" value="0">' + '<label for="sex1">' + '男' + '</label>' + '<input type="radio" name="sex" id="sex2" value="1">' + '<label for="sex2">' + '女' + '</label>' + '</td>' + '</tr>' + '<tr>' + '<td width="30%" align="right">' + '请填写你的收货地址：' + '</td>' + '<td>' + '<input type="text" name="name" placeholder="乡镇具体到街道">' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + '请填写你的联系电话：' + '</td>' + '<td>' + '<input type="text" name="ID">' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + '请选择购买的规格：' + '</td>' + '<td>' + '<select name="time1">' + '<option value="小白菜">' + '小白菜' + '</option>' + '<option value="大白菜">' + '大白菜' + '</option>' + '<option value="巨型白菜">' + '巨型白菜' + '</option>' + '</select>' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + 'BHGG大白菜<br />具有的优势' + '</td>' + '<td>' + '<select name="time2" size="5">' + '<option value="白色大白菜甘甜">' + '白色大白菜甘甜' + '</option>' + '<option value="个头大养分多">' + '个头大养分多' + '</option>' + '<option value="根小叶密">' + '根小叶密' + '</option>' + '<option value="结实有分量">' + '结实有分量' + '</option>' + '<option value="新鲜有活力">' + '新鲜有活力' + '</option>' + '</select>' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + '您购买的白菜用途' + '</td>' + '<td>' + '<input type="checkbox" name="ys" id="ys1">' + '<label for="ys1">' + '酒店' + '</label>' + '<input type="checkbox" name="ys" id="ys2">' + '<label for="ys2">' + '家庭' + '</label>' + '<input type="checkbox" name="ys" id="ys3">' + '<label for="ys3">' + '养殖' + '</label>' + '<input type="checkbox" name="ys" id="ys4">' + '<label for="ys4">' + '其他用途' + '</label>' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + '请填写一下您的购买要求' + '</td>' + '<td>' + '<textarea>' + '</textarea>' + '</td>' + '</tr>' + '<tr>' + '<td align="right" width="30%">' + '购买的数量' + '</td>' + '<td>' + '<input type="button" id="jian" onclick="shao()" value="-"/>' + '<span id="coun">' + '1' + '</span>' + '<input type="button" id="jia" onclick="duo()" value="+"/>' + '<span>' + '斤' + '</span>' + '</td>' + '</tr>' + '<tr>' + '<td colspan="2">' + '<img src="img/anniu.jpg" style=" 150px;height: 50px;margin-left: 120px;"/>' + '</td>' + '</tr>' + '</table>' + '</form>' + '<div id="close-pop">' + '<img src="img/guanbi.png" style=" 60px;height: 60px;"/>' + '</div>'; document.body.appendChild(pop_login); document.getElementById('close-pop').onclick = function() { document.body.removeChild(mask); document.body.removeChild(pop_login); } mask.onclick = function() { document.body.removeChild(mask); document.body.removeChild(pop_login); } } function shao() { document.getElementById('coun').innerText -= 1; } function duo() { var o = document.getElementById('coun'); o.innerText = parseInt(o.innerText) + 1; }