博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS制作一个通用的商城版历史浏览记录
阅读量:5089 次
发布时间:2019-06-13

本文共 4430 字,大约阅读时间需要 14 分钟。

正在开发一个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 οnclick=\"glog(event)\" href=\"ProductsInfo.aspx?id=" + historyArry[1] + "\"><img id=\"img_" + historyArry[1] + "\" src=\"" + historyArry[2] + "\" οnerrοr=\"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] + "\" οnclick=\"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="#" οnclick="ClearHistory()">Clear History</a></span>Your last viewed items</div>

 

在这个项目之前我开发了一个类似"暴走漫画"搞笑图片制作的网站,现在网上很流行的搞笑图片,大多都来自那个网站,它的图片制作是用flash制作的,由于公司的某些策划和原因,我用asp.net开发了一个类似的,不过总感觉有瑕疵,这也是程序和flash的区别,无解!!.     网址:www.banmx.com    也希望有懂Gid.用asp.net开发过类似项目的朋友能给点意见. QQ357253950

 

 

 

 

 

转载于:https://www.cnblogs.com/xiong-QQ357253950/p/3213802.html

你可能感兴趣的文章
luogu 4240 毒瘤之神的考验 (莫比乌斯反演)
查看>>
SVN服务器配置以及Eclipse使用SVN
查看>>
python爬取股票信息
查看>>
判断是64位操作系统还是32位系统
查看>>
半监督学习
查看>>
微信公众号菜单与应用交互session
查看>>
lavarel5.2官方文档阅读——架构基础
查看>>
Class文件结构
查看>>
学好编程前 先看看这些
查看>>
一本通1641【例 1】矩阵 A×B
查看>>
[CLR via C#]5.4 对象哈希码和dynamic基元类型
查看>>
C++智能指针
查看>>
2012年总结
查看>>
form表单select联动
查看>>
git 快捷键
查看>>
Airtime 2.2 发布,电台管理软件
查看>>
homework2-st
查看>>
centos 安装python3与Python2并存,并解决"smtplib" object has no attribute 'SMTP_SSL'的错误...
查看>>
启动应用程序时发生了一个错误 终端服务授权错误
查看>>
shell笔记
查看>>