您的位置:

漂亮实用的商品对比效果js代码(漂亮实用的商品对比效果js代码怎么写)

漂亮实用的商品对比效果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)

然后通过定时器 定时改变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。前者一般用于关键性的数据,后者用于辅助性的数据。

漂亮实用的商品对比效果js代码(漂亮实用的商品对比效果js代

本文目录一览: 1、JQuery或JS实现商品加入对比的代码 2、商品信息对比的js代码应该怎么写?类似于这个网站的http://tech.sina.com.cn/notebook/search.ht

2023-12-08
产品分类js代码(js实现商品分类)

本文目录一览: 1、这个是易迅的商城产品分类菜单,请问JS代码怎么实现如下描述的功能,谢谢 2、商品信息对比的js代码应该怎么写?类似于这个网站的http://tech.sina.com.cn/not

2023-12-08
顶漂js代码,js购物车代码

2022-11-23
js代码高亮原理,代码高亮怎么实现

本文目录一览: 1、js中前后内容比较实现高亮怎么做的啊 2、在网上找了个js判断当前栏目高亮的代码,有懂js的能给我翻译一下每行代码的意识吗,我想学习一下。代 3、js分页高亮问题 4、JS中高亮层

2023-12-08
code高亮js,codeblocks代码高亮

2022-11-24
js好看效果源代码大全下载,js特效素材网

本文目录一览: 1、关于Javascript 特效代码 2、求js代码,效果是“点击图片缓慢消失,然后进入网站” 3、网页制作:谁给我发个js实现图片横向滚动的源代码? 4、请问怎么下载网页中的js,

2023-12-08
csdnjs代码高亮,js 高亮

本文目录一览: 1、js分页高亮问题 2、Visual Studio Code中的JS代码一直是黑色的,怎么设置高亮 3、jQuery JS 如何高亮页面上的所有数字 4、JS中高亮层是什么 js分页

2023-12-08
轻松制作漂亮的Python文字效果

2023-05-13
js代码高亮加复制代码(js代码高亮加复制代码不显示)

本文目录一览: 1、用JS将搜索的关键字高亮显示实现代码 2、notepad++怎么让js代码高亮显示 3、js 给页面内文字高光特效 用JS将搜索的关键字高亮显示实现代码 用JS让文章内容指定的关键

2023-12-08
仿淘宝商城伸缩js广告代码的简单介绍

2022-11-25
js代码对比工具,代码比较器

本文目录一览: 1、用javascript如何比较10本书价格高低 2、北大青鸟java培训:JavaScript代码测试必备的12款工具? 3、JQuery或JS实现商品加入对比的代码 4、JS代码

2023-12-08
页面代码高亮度显示js代码(页面代码高亮度显示js代码怎么办

本文目录一览: 1、HTML 页面查找关键词,显示高亮,代码怎么写?谢谢!!!!!! 2、真心求教JS使得当前网页全屏的代码啊! 3、android 富文本编辑器+webview 显示 高亮 4、我要

2023-12-08
简单实用的js库免费源代码下载(js资源库)

本文目录一览: 1、求个简单javascript代码 谢谢,网站菜单功能 2、求《代码逆袭:超实用的Node.js代码段》全文免费下载百度网盘资源,谢谢~ 3、哪些JavaScript 框架的源代码最

2023-12-08
js高亮php代码,代码高亮 js

2022-11-25
js开发代码(js代码编写)

本文目录一览: 1、如何编写高效的js代码 2、做为一名前端开发人员,有哪些值得一读的JS代码 3、Web前端新手应该知道的JavaScript开发技巧有哪些? 4、简单的js代码编程 5、前端开发,

2023-12-08
虚拟商品php,虚拟商品淘宝介入一般是谁赢

2023-01-04
js导航漂浮代码(html漂浮代码)

本文目录一览: 1、求段网页右下角漂浮的JS代码,放广告用的! 2、求一段JS广告底部漂浮代码 3、浮动窗口的代码 (html/js) 求段网页右下角漂浮的JS代码,放广告用的! !DOCTYPE h

2023-12-08
js代码对齐工具(对齐代码快捷键)

本文目录一览: 1、怎么让JS文件代码对齐 2、2019年27个神奇的VSCode工具 3、mac系统下怎样利用好sublime text 2编写html,css,js代码 怎么让JS文件代码对齐 下

2023-12-08
php写商品收藏功能怎么写啊(php开发收藏功能)

2022-11-09
经典效果js源码,源代码特效

本文目录一览: 1、问下在哪有js特效的源码那些,怎么弄? 2、看有些网站的jquery和js的效果比较好,如何能看到这些js的源码的?谢谢指教 3、用js源码做出缓动效果,关于for循环和setti

2023-12-08