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">
<!--
body{font-size=9pt}
TH{FONT-SIZE: 9pt}
TD{ FONT-SIZE: 9pt}
#floater {
position: absolute;
right: 0px;
top: 600;
width: 125;
visibility: visible;
z-index: 10;
left: 5px;
}
-->
</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;
<!-- STALKER CODE -->
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;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
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;
}
<!-- DRAG DROP CODE -->
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/

比较购物网站中比较代码如何实现相关推荐

  1. 购物搜索引擎/比较购物网站

    购物搜索引擎/比较购物网站 随着加入比较购物网站的服务商数量和产品数量的迅速增加,比较购物网站已经与搜索引擎具有类似的特征,即作为用户查询商品信息的工具,为制定购买决策提供支持,因此一些网站开始逐渐放 ...

  2. 国外最大的购物搜索/比较购物网站

    原文链接:http://space.flash8.net/space/?105875/viewspace-388595 原帖2008-1-21发布,可能是2007年的数据,仅作参考.需要更新这个列表 ...

  3. 网站关键词html代码,html网站代码+网站关键词如何优化呢

    原标题:html网站代码+网站关键词如何优化呢 html网站代码+网站关键词如何优化呢?为大家讲解一下. 一.h标签优化 1)h标签分为h1-h6标签,h1-h6分为六个层级.权重依次递减 2)h1标 ...

  4. Java EasyExcel在Web网站中读写Excel的方法及示例代码

    使用EasyExcel可以更容易简单在Web网站中读写Excel,本文主要介绍在Java Web网站中读写Excel方法及示例代码. 原文地址:Java EasyExcel在Web网站中读写Excel ...

  5. 微网站中加入一键拨号功能代码

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  6. 在wordpress开发的网站中添加在线客服咨询功能代码教程

    现在主流的PHP建站程序wordpress还是非常的流行,使用的人非常多 如何在wordpress网站中增加在线客服咨询功能 第一步:在唯一客服系统(gofly.v1kf.com)中注册账号,获取到客 ...

  7. 社会化分享bshare代码在网站中的使用(包括https下无效的解决方法)

    一.代码的安装与放置 在bshare中选择好自己喜欢的代码样式之后,将代码复制进网站中 放入代码后,就会出现分享按钮.如果想要关键词和按钮平行显示的话,可利用table进行放置 显示结果如下:乌克兰玛 ...

  8. Konami代码秘密地隐藏在各大网站中,到底是黑客侵入还是恶作剧?

    大家应该能记得,在几个礼拜之前,当有人突发奇想,在ESPN.com网站输入了Konami代码之后(up, up, down, down, left, right, left, right, B, A, ...

  9. 聪明点 比较购物网站SEO分析

    我们知道,比较购物 网站就是依靠庞大的流量,而且能顺利的将流量导向入驻的站点,所以他才能成功的收取佣金. 比较类购物网站中技术最牛的当然要数"聪明点"(smarter.com.cn ...

最新文章

  1. 网上商城系统源代码_多用户系统商城授权有几种方式?
  2. 如何网络推广为你出招解决网站跳出率高问题!
  3. mysql怎么滤空_《MySQL 入门教程》第 08 篇 过滤条件
  4. 新手入门深度学习 | 1-2:编译器Jupyter Notebook
  5. 查看.net frameword版本
  6. MATLAB Floyd算法
  7. RecognizerIntent(语音识别)
  8. 功能安全 李艳文_中国汽车功能安全测试库首次成果发布会成功召开
  9. 软件项目可持续性运作地思考
  10. 法拉科机器人编程软件_【新提醒】FANUC发那科机器人离线编程与设计模拟仿真软件Roboguide 步骤、功能与技巧...
  11. 微信撤回软件安卓版_微信阻止撤回app最新版-微信阻止撤回软件下载v1.0.3 安卓版-腾牛安卓网...
  12. 计算机病毒按破坏性分为哪两类,什么是计算机病毒?按照计算机病毒的链结方式分类,计算机病毒可分为哪几类...
  13. 冰点还原精灵有什么作用
  14. css固定图片大小 vue_img设置图片大小 vue_如何改变图片大小
  15. 布兰迪斯大学计算机美国大学排名,布兰迪斯大学排名多少 美国和世界排名介绍...
  16. k8s入门:存储(storage)
  17. 盘点百位富豪读过的大学:土鳖比海龟更有优势
  18. 使用微搭搭建天气预报小程序
  19. BIO基本介绍以及使用
  20. 穷人和富人的思维方式

热门文章

  1. 关于wangeditor取消自动获取焦点
  2. CSS3------什么是css
  3. sublime text3 gb2312编码文件显示乱码,ConvertToUTF8转码失效
  4. JAVA毕设项目小微企业人事管理系统(java+VUE+Mybatis+Maven+Mysql)
  5. SQLserver --安装程序无法打开注册表项 UNKNOWN\Components\…的解决办法
  6. python输入逗号分隔值文件_Python-从文本文件中读取逗号分隔的值,然后将结果输出到文本fi...
  7. 【操作系统】操作系统的概述
  8. 计算机二级excelcountif函数,COUNTIF函数的16种公式设置
  9. 百度搜索接口api_搜索推广丨oCPC投放API接入方式详解
  10. CSS_文档统筹及样式重置