本文目录一览:
- 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。前者一般用于关键性的数据,后者用于辅助性的数据。