JS制作一个通用的商城版历史浏览记录
正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下.
JS:
//cookie相关函数
function getCookieVal(offset) {
var endstr = document.cookie.indexOf(";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function setCookie(name, value) {
var exp = new Date();
exp.setTime(exp.getTime() + 3600000000);
document.cookie = name + "=" + value + "; expires=" + exp.toGMTString();
}
function glog(evt) {
var evt = evt ? evt : window.event;
var srcElem = (evt.target) ? evt.target : evt.srcElement;
try {
while (srcElem.parentNode && srcElem != srcElem.parentNode) {
if (srcElem.tagName && srcElem.tagName.toUpperCase() == "A") {
addressCookie = srcElem.href;
var ProductId = addressCookie.substr(addressCookie.indexOf("id=") + 3);
var imgUrl = document.getElementById("img_" + ProductId + "").src;
var productNameTitle = document.getElementById("Name_" + ProductId + "").text;
var productName;
if (productNameTitle.length > 28) {
productName = productNameTitle.substr(0, 25) + "...";
}
else {
productName = productNameTitle;
}
var productPrice = document.getElementById("Price_" + ProductId + "").textContent;
address = srcElem.href + "+" + ProductId + "+" + imgUrl + "+" + productNameTitle + "+" + productName + "+" + productPrice + "|";
wlink = address;
old_info = getCookie("history_info");
var insert = true;
if (old_info == null) {//判断cookie是否为空
insert = true;
}
else {
var old_link = old_info.split("|");
for (var j = 0; j <= 5; j++) {
if (old_link[j].indexOf(addressCookie) != -1) //存在这个cookie
insert = false;
if (old_link[j] == "null")
break;
}
}
if (insert) {
wlink += getCookie("history_info");
setCookie("history_info", wlink);
history_show().reload();
break;
}
else {
var old_link1 = old_info.split("|");
var length = old_link1.length;
var newcookie = '';
for (var j = 0; length <= 6 ? j <= length - 1 : j <= 5; j++) {
if (old_link1[j].indexOf(addressCookie) == -1) {
if (j == length - 1 || j == 5) {
newcookie = newcookie + old_link1[j]
}
else {
newcookie = newcookie + old_link1[j] + '|'
}
}
}
newcookie = wlink + newcookie
setCookie("history_info", newcookie);
history_show().reload();
break;
}
}
srcElem = srcElem.parentNode;
}
}
catch (e) { }
return true;
}
function history_show() {
var history_info = getCookie("history_info");
if (history_info != null) {
history_arg = history_info.split("|");
var content = "";
for (var i = 0; history_arg.length >= 6 ? i<=5 : i<=history_arg.length - 1; i++) {
if (history_arg[i] != "null") {
historyArry = history_arg[i].split("+");
content += "<li><div class=\"products_scan_pic\"><a onclick=\"glog(event)\" href=\"ProductsInfo.aspx?id=" + historyArry[1] + "\"><img id=\"img_" + historyArry[1] + "\" src=\"" + historyArry[2] + "\" onerror=\"javascript:this.src='images/Product/nophoto.jpg'\" width=\"47\" height=\"47\" /></a></div><div class=\"products_scan_txt\"><a href=\"ProductsInfo.aspx?id=" + historyArry[1] + "\" onclick=\"glog(event)\" id=\"Name_" + historyArry[1] + "\" title=\"" + historyArry[3] + "\">" + historyArry[4] + "</a><br/><div id=\"Price_" + historyArry[1] + "\"><div class=\"products_seller_t2\">" + historyArry[5] + "</div></div></div></li>";
}
}
document.getElementById("history").innerHTML = content;
}
else {
document.getElementById("history").innerHTML = "<span style=\"color:#DE8500\">You have no recently viewed items or searches</span>";
}
}
//清空cookies
function ClearHistory() {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie = "history_info=;expires=" + exp.toGMTString() + "";
document.getElementById("history").innerHTML = "<span style=\"color:#DE8500\">Cleared view history successfully</span>";
}
前台调用方式:
<script type="text/javascript" defer="defer">history_show();</script>
效果图:
清除历史浏览记录:
<div class="products_scan_title"><span><a href="#" onclick="ClearHistory()">Clear History</a></span>Your last viewed items</div>
在这个项目之前我开发了一个类似"暴走漫画"搞笑图片制作的网站,现在网上很流行的搞笑图片,大多都来自那个网站,它的图片制作是用flash制作的,由于公司的某些策划和原因,我用asp.net开发了一个类似的,不过总感觉有瑕疵,这也是程序和flash的区别,无解!!. 网址:www.banmx.com 也希望有懂Gid.用asp.net开发过类似项目的朋友能给点意见. QQ357253950
JS制作一个通用的商城版历史浏览记录的更多相关文章
- php中如何实现网上商城用户历史浏览记录的代码
/如是COOKIE 里面不为空,则往里面增加一个商品ID if (!empty($_COOKIE['SHOP']['history'])){ //取得COOKIE里面的值,并用逗号把它切割成一个数组 ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 使用Cookie实现用户商品历史浏览记录
该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...
- Django之使用redis缓存session,历史浏览记录,首页数据实现性能优化
Redis缓存session 配置Django缓存数据到redis中 # diango的缓存配置 CACHES = { "default": { "BACKEND&quo ...
- Redis添加历史浏览记录
参考资料 http://redisdoc.com/index.html http://redis-py.readthedocs.io/en/latest/#indices-and-tables 1.什 ...
- position:搜索框显示历史浏览记录
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "righ ...
- destoon系统开发-最新利用浏览器的cookie 做历史浏览记录
注意: 代码 放在要显示的为 (一般放在详情页),注意本教程不入库,直接利用浏览器的 cookie 缓存判断 <!--历史浏览记录 S--> <div class=&quo ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
随机推荐
- CentOS忘记root密码解决办法
如果是忘记普通的用户密码,那还好说,用root登录命令行界面,修改即可. 但如果是root的话,那就需要这样修改了. 记住,这几篇文章说的都是对的,只是我复杂了,实际只需要将光标移到最后" ...
- vue结合Promise及async实现高效开发。
在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import a ...
- OZ Report 오즈 리포트 개발
//这只单元格数据颜色 if( (int)getattr("caption") > 100) setattr("bgcolor", "$0,0, ...
- JUC组件扩展(二)-JAVA并行框架Fork/Join(四):监控Fork/Join池
Fork/Join 框架是为了解决可以使用 divide 和 conquer 技术,使用 fork() 和 join() 操作把任务分成小块的问题而设计的.主要实现这个行为的是 ForkJoinPoo ...
- 未设置BufferSize导致FTP下载速度过慢的问题
開始下载前设置BufferSize就可以解决: ftpClient.setBufferSize(1024*1024); 查看commons-net的源代码.能够发现假设未设置该參数.将会一个字节一个字 ...
- https证书最佳实战目录
[svc]openssl对称加密,非对称加密最佳实战 http://blog.csdn.net/iiiiher/article/details/78593464 [svc]证书的生成和各个字段的含义 ...
- maven打包classes为jar
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-p ...
- c语言循环单链表
/************************************************************************* > File Name: singleLin ...
- HTML5 多图上传
HTML5 多图上传 时间 2014-06-05 16:06:29 月小升博客 原文 http://java-er.com/blog/html5-many-image-upload/ 主题 HTM ...
- poj 1806 Frequent values(RMQ 统计次数) 详细讲解
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1806 题目大意:给你一个非降序排列的整数数组,你的任务是对于一系列的询问,(i,j),回答序列中出现次 ...