比较购物网站中比较代码如何实现

最新推荐文章于 2024-09-27 21:40:46 发布

lwj3025

最新推荐文章于 2024-09-27 21:40:46 发布

阅读量2.7k

点赞数

分类专栏： java 文章标签： function button javascript 手机 action null

本文链接：https://blog.csdn.net/lwj3025/article/details/1676460

版权

java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.建立一个compare.html内含js脚本，以实现与php程序通信，代码如下：（附：手机对比脚本一例)

<html>
<head>
<title>手机对比功能</title>
<script language="JavaScript">
lastScrollY = 0;
function heartBeat() {
diffY = document.body.scrollTop;
percent =.1*(diffY-lastScrollY);

if(percent>0) percent = Math.ceil(percent);
else percent = Math.floor(percent);

document.all.float.style.pixelTop+= percent;
lastScrollY = lastScrollY+percent;
}
window.setInterval("heartBeat()",1);
</script>

<script>
var strCookies = document.cookie;
// document.write (strCookies);
var cookieName = 'JsItem' + "=";
var cookieName2 = 'Jscount' + "=";
var valueBegin, valueEnd, value;
valueBegin = strCookies.indexOf(cookieName);
// document.write (valueBegin);
var item=[];
var item2=[];
if(valueBegin == -1){
var itemtotal=0;
}else{
valueEnd = strCookies.indexOf(cookieName2);
value = strCookies.substring(valueBegin+cookieName.length,valueEnd-2);
// document.write (value);
var item = value.split(',');
// document.write (value.length);
value = strCookies.substr(valueEnd + cookieName2.length,1);
// document.write (value);
var itemtotal= value;
}

function redraw() {
floatstr = "<table height=100% width=100% bgcolor=#000000><form method='get' action='/compare2005.php' name='compare' target='_blank'><tr bgcolor=#cc9900><td><center><input type='button' value='开始对比' name='submits' οnclick='comparecheck();' style='cursor:hand;'><br>";
i=1;
for(var m=0;m<item.length;m++) {
if(item[m]){
pid = m;
names = item[m];
ft = "<font color=red size=1>|</font><br><input type=button name=pid"+i+" value='"+names+"' οnclick=/"del('"+pid+"')/" style='border:1px solid;border-color:red ;background-color:white;height:24;width:120;cursor:hand;color:'black';'><input type='hidden' name='pid"+i+"'' value='"+pid+"'><br>";
floatstr = floatstr+ft;
i++;
}
}
floatstr = floatstr + "</center></td></tr></form></table>";
floater.innerHTML = floatstr;
}

function comparecheck() {
mark=0
if(document.compare.pid1) mark++;
if(document.compare.pid2) mark++;
if(document.compare.pid3) mark++;
if(document.compare.pid4) mark++;
if(document.compare.pid5) mark++;
if(mark<2) {
alert ('请至少选择两款机型进行对比!');
}else {
document.compare.submit();
}
}

function add(pid,names) {
if(!item[pid]) {
if(itemtotal < 5) {
itemtotal++;
item[pid] = names;
redraw();
}else {
alert('抱歉，最多只能有5款机型进行对比!');
}
}else {
alert('您已经选择了'+names+'!');
}
}

function del(pid) {
item2=[];
for(key in item) {
if(key!=pid) item2[key]=item[key];
}
item = item2;
itemtotal=itemtotal-1;
redraw();

}
</script>

<script language="JavaScript">
function SaveItem(){
if(item.length > 0){
var strcookie = 'JsItem' + "=" + item ;
document.cookie = strcookie;
var strcookie1 = 'Jscount' + "=" + itemtotal;
document.cookie = strcookie1;
}
}
</script>
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<style type="text/css">

</style>
</head>
<body onLoad="redraw();" onUnload="SaveItem();">
<script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;

function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}


function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}

if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {

document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
<div id='floater' style='position:absolute;right:1px;top:51px;filter:alpha(opacity=70);z-index:99;width:140;' align=center>
<form method='get' action='/compare2005.php' name='compare' target='_blank'>
<table height=100% width=100% bgcolor=#000000><tr bgcolor=#cc9900><td><center><input type='button' value='开始对比' name='submits' οnclick='comparecheck();' style='cursor:hand;'><br>
</td></tr></form></table>
</div>
<table width="768" border="1" align="center" cellpadding="2" cellspacing="0" bordercolorlight="#cccccc" bordercolordark="#ffffff">
<tbody>
<tr align="center" bgcolor="#E0E0E0">
<td>手机型号</td>
<td>网络类型</td>
<td>上市日期</td>
<td>网店价格</td>
<td>手机论坛</td>
<td>对比功能</td>
</tr>
<tr align="center">
<td height="25"><a href="/product/1859.html" target="_blank">三星 SGH-X138</a></td>
<td>GSM900/1800MHz/GPRS</td><td>05年05月</td>
<td><a href="/price2005.php?cid=7&pid=1859" target="_blank"><font color=red>￥1350</font></a></td><td><a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2859" target="_blank">手机论坛</a></td>
<td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" οnclick="add('1859',' SGH-X138');" type=button value=对比篮 /></td>
</tr>
</tr><tr align="center"><td height="25"><a href="/product/1817.html" target="_blank">三星 SCH-M309</a></td><td>CDMA 1X</td><td>05年03月</td><td><a href="/price2005.php?cid=7&pid=1817" target="_blank"><font color=red>￥4800 - ￥6875</font></a></td><td><a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2817" target="_blank">手机论坛</a></td><td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" οnclick="add('1817',' SCH-M309');" type=button value=对比篮 /></td></tr><tr align="center"><td height="25"><a href="/product/1821.html" target="_blank">三星 SGH-E618</a></td><td>GSM900/1800/1900MHz/GPRS</td><td>05年02月</td><td><a href="/price2005.php?cid=7&pid=1821" target="_blank"><font color=red>￥2920 - ￥3980</font></a></td><td><a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2821" target="_blank">手机论坛</a></td><td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" οnclick="add('1821',' SGH-E618');" type=button value=对比篮 /></td></tr><tr align="center"><td height="25"><a href="/product/1735.html" target="_blank">三星 SCH-M339</a></td><td>CDMA 1X</td><td>05年02月</td><td><a href="/price2005.php?cid=7&pid=1735" target="_blank"><font color=red>￥7399 - ￥8660</font></a></td><td><a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2735" target="_blank">手机论坛</a></td><td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" οnclick="add('1735',' SCH-M339');" type=button value=对比篮></td></tr>
</table>
</body>
</html>

2.建立一个MySQL的数据库及对比商品的数据表，使用php与js通信得到的参数为准，从MySQL取库，显示到页面即可！

3.说简单其实很简单，思路就是这样！你可以看看《手机之家》的对比栏功能，就大概知道一些了！
记得给分啊！

参考资料：http://www.imobile.com.cn/