漂亮实用的商品对比效果js代码（漂亮实用的商品对比效果js代码怎么写）
更新：2022-11-08 16:44
本文目录一览：
- JQuery或JS实现商品加入对比的代码
- 商品信息对比的js代码应该怎么写？类似于这个网站的http://tech.sina.com.cn/notebook/search.html
- 怎么制作网页中图片转换，就是一幅一幅的显示，跟淘宝网的商品展示一样，用到JS代码，代码怎么编写？
- 比较购物网站中比较代码如何实现?
- 关于js的页面跳转的传值问题
JQuery或JS实现商品加入对比的代码
如果是用cookie记录的话，在显示的页面应该是有个定时器不断的读取cookie然后更新页面的，也就是说cookie的写（更新）操作是要等用户做了某个操作之后触发的，比如添加、删除，而读是在有对比栏呈现的时候（不管是新开页面还是一个弹出层的形式）定时读取然后更新UI即可，总之，纯js实现的话定时器是必须的
商品信息对比的js代码应该怎么写？类似于这个网站的http://tech.sina.com.cn/notebook/search.html
可以创建一个对象，如
function Goods(id, name, other...) {
this.id = id,
this.name = name
.......
}
也可以用这种方式添加一个属性
Goods.prototype.id = ''
在对比的时候每添加一个对比物品，可以 var goods1 = new Goods() 一下，然后对 goods1 的各个属性进行赋值，然后对每个对象进行按着不同的属性进行对比，你可以按着这个思路试试看看
怎么制作网页中图片转换，就是一幅一幅的显示，跟淘宝网的商品展示一样，用到JS代码，代码怎么编写？
你可以存有 X 张图片，名字差不多，（类似于 imp1.jpg, imp2.jpg……impX.jpg）
然后通过定时器 定时改变 img 标签里的 src 属性：js如下
var i = 1;
function setSrc() {
if (i == X) { // 这里X是你 图片的数量
i = 1;
}
var srcStr = "imp" + i + "jpg"; // 嗯，这里 i 不知道有没有问题，希望没有，
// 有的话，我想楼主也能轻易解决的
document.getElementById("impId").src = srcStr; // (impId 为img标签的id属性)
i++;
}
定时器 以下任选一种即可：
setInterval("setSrc()", 3000);
setTimeout("setSrc()", 3000); //需要函数触发
//如 放置在 body 的 onload事件里面
希望对你有帮助
比较购物网站中比较代码如何实现?
- 建立一个
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 align=center><input type='button' value='开始对比' name='submits' onclick='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 + "' onclick=\"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 align=center><input type='button' value='开始对比' name='submits' onclick='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="" target="_blank">手机论坛</a></td>
<td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="add('1859',' SGH-X138');" type=button value=对比篮 /></td>
</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="" target="_blank">手机论坛</a></td>
<td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="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="" target="_blank">手机论坛</a></td>
<td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="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="" target="_blank">手机论坛</a></td>
<td><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="add('1735',' SCH-M339');" type=button value=对比篮 /></td>
</tr>
</table>
</body>
</html>
- 建立一个 MySQL 的数据库及对比商品的数据表，使用 php 与 js 通信得到的参数为准，从 MySQL 取库，显示到页面即可！
- 说简单其实很简单，思路就是这样！你可以看看《手机之家》的对比栏功能，就大概知道一些了！ 记得给分啊！
关于js的页面跳转的传值问题
打不开你所说的网页，不知道具体情况。但 js 传值，无非是两种情况。一种是用 GET 或 POST 的方法把值送给服务器，然后在服务器处理后返回新的页面。另一种是用 Cookie 保存在本地，下一个页面读取上一个页面留下的 Cookie。前者一般用于关键性的数据，后者用于辅助性的数据。
