漂亮實用的商品對比效果js代碼（漂亮實用的商品對比效果js代碼怎麼寫）

本文目錄一覽：

• 1、JQuery或JS實現商品加入對比的代碼
• 2、商品信息對比的js代碼應該怎麼寫？類似於這個網站的http://tech.sina.com.cn/notebook/search.html
• 3、怎麼製作網頁中圖片轉換，就是一幅一幅的顯示，跟淘寶網的商品展示一樣，用到JS代碼，代碼怎麼編寫？
• 4、比較購物網站中比較代碼如何實現?
• 5、關於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）

然後通過定時器 定時改變imp標籤里的src屬性：js如下

var i =1;

funcition setSrc(){

if(i = X){ // 這裡X是你 圖片的數量

i =1 ;

}

var srcStr = “imp” + i +”jpg”; // 嗯，這裡 i 不知道有沒有問題，希望沒有，

// 有的話，我想樓主也能輕易解決的

document.getElementById(“impId”).src=srcStr; (impId 為imp標籤的id屬性)

i++;

}

定時器 以下任選一種即可：

setInterval(“setSrc()”,3000);

setTimeout(“setSrc()”,3000); //需要函數觸發

//如 放置在 body 的 onload事件裡面

希望對你有幫助

比較購物網站中比較代碼如何實現?

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(percent0) 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=#000000form method=’get’ action=’/compare2005.php’ name=’compare’ target=’_blank’tr bgcolor=#cc9900tdcenterinput type=’button’ value=’開始對比’ name=’submits’ onclick=’comparecheck();’ style=’cursor:hand;’br”;

i=1;

for(var m=0;mitem.length;m++) {

if(item[m]){

pid = m;

names = item[m];

ft = “font color=red size=1|/fontbrinput 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(mark2) {

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=#000000tr bgcolor=#cc9900tdcenterinput 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

tdGSM900/1800MHz/GPRS/tdtd05年05月/td

tda href=”/price2005.php?cid=7pid=1859″ target=”_blank”font color=red￥1350/font/a/tdtda href=”” target=”_blank”手機論壇/a/td

tdinput 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

/trtr align=”center”td height=”25″a href=”/product/1817.html” target=”_blank”三星 SCH-M309/a/tdtdCDMA 1X/tdtd05年03月/tdtda href=”/price2005.php?cid=7pid=1817″ target=”_blank”font color=red￥4800 – ￥6875/font/a/tdtda href=”” target=”_blank”手機論壇/a/tdtdinput 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/trtr align=”center”td height=”25″a href=”/product/1821.html” target=”_blank”三星 SGH-E618/a/tdtdGSM900/1800/1900MHz/GPRS/tdtd05年02月/tdtda href=”/price2005.php?cid=7pid=1821″ target=”_blank”font color=red￥2920 – ￥3980/font/a/tdtda href=”” target=”_blank”手機論壇/a/tdtdinput 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/trtr align=”center”td height=”25″a href=”/product/1735.html” target=”_blank”三星 SCH-M339/a/tdtdCDMA 1X/tdtd05年02月/tdtda href=”/price2005.php?cid=7pid=1735″ target=”_blank”font color=red￥7399 – ￥8660/font/a/tdtda href=”” target=”_blank”手機論壇/a/tdtdinput 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

2.建立一個MySQL的資料庫及對比商品的數據表，使用php與js通信得到的參數為準，從MySQL取庫，顯示到頁面即可！

3.說簡單其實很簡單，思路就是這樣！你可以看看《手機之家》的對比欄功能，就大概知道一些了！

記得給分啊！

關於js的頁面跳轉的傳值問題

打不開你所說的網頁，不知道具體情況。但js傳值，無非是兩種情況。一種是用GET或POST的方法把值送給伺服器，然後在伺服器處理後返回新的頁面。另一種是用Cookie保存在本地，下一個頁面讀取上一個頁面留下的Cookie。前者一般用於關鍵性的數據，後者用於輔助性的數據。