Javascript는 쿠키를 결합하여 검색 기록_javascript 기술을 실현합니다.-JS 튜토리얼-php.cn

Javascript는 쿠키를 결합하여 검색 기록_javascript 기술을 실현합니다.

PHP中文网

풀어 주다： 2016-05-16 19:01:23

원래의

1038명이 탐색했습니다.

최근 직장에서 문제가 발생했습니다. 특히 이 웹사이트에서 사용자의 클릭 기록을 기록하고 내림차순으로 정렬해야 합니다(처음 6개만 탐색 기록). 표시되며 반복할 수 없습니다.)

저는 JavaScript를 잘 몰랐기 때문에 한동안 헤매었습니다.
나중에 두 명의 스승님의 지도를 받고(이 두 동료에 대한 존경심은 끝없이 흐르는 강물과도 같군요...) 문득 깨닫고 깨달음을 얻었습니다.
이 기능 추가가 성공적으로 완료되었습니다.

먼저 JavaScript에서 이 기능에 대한 몇 가지 개체와 메서드를 소개하겠습니다.

1. window.event 객체:
이벤트는 이벤트 객체를 발생시킨 요소, 마우스의 위치와 상태, 누른 키 등 이벤트의 상태를 나타냅니다.
이벤트 대상은 이벤트 기간에만 유효합니다.

2.event.srcElement：
은 평신도 입장에서는 이벤트가 발생하는 곳을 의미합니다.

3.srcElement.parentNode:
은 이벤트 소스의 상위 노드를 나타냅니다.

4. srcElement.태그이름:
이벤트 소스의 태그 이름을 나타냅니다.

5. 대문자():
해당 문자열을 대문자로 표기하는 방법

기본적으로 이러한 속성과 메서드는 JavaScript를 처음 접한 친구나 이러한 기능을 거의 사용해 본 적이 없는 친구에게는 다소 생소할 수 있지만 이해하고 나면 별 문제가 되지 않습니다. , JavaScript 유효성 검사 양식 등과 크게 다르지 않습니다.

다음은 시술에 따른 차근차근 설명입니다. (시술은 불가피하게 무리한 부분이 있을 수 있으니 다들 바로잡아주시고 함께 진행하시길 바라겠습니다.)

1부: JavaScript는 탐색 작업을 기록합니다.

코드 복사 코드는 다음과 같습니다.

function glog(evt) //마우스 클릭 동작을 기록하는 함수 정의
{
evt=evt?evt:window.event;var srcElem=(evt.target)?evt.target:evt.srcElement;
시도해보세요
{
while(srcElem.parentNode&&srcElem!=srcElem.parentNode)
//위 명령문은 사용자의 무효 클릭이 기록되지 않도록 유효한 영역에서 마우스 동작이 발생하는지 여부를 결정합니다.
{
if(srcElem.tagName&&srcElem.tagName.toUpperCase()=="A")//사용자가 클릭한 개체가 링크인지 확인
{
linkname=srcElem.innerHTML; //링크 이름인 사이의 텍스트인 이벤트 소스 이름을 가져옵니다.
address=srcElem.href "_www.achome.cn_"; //링크 주소인 이벤트 소스의 href 값을 가져옵니다.
wlink=linkname " " address; //링크 이름과 링크 주소를 하나의 변수로 통합합니다.
old_info=getCookie("history_info"); //쿠키에서 이전에 기록된 검색 기록을 가져옵니다. 이 함수 뒤에 명령문이 있습니다.
//다음 프로그램은 이전 6개의 이전 작업과 함께 새로운 탐색 작업이 반복되는지 확인하기 시작합니다. 반복되지 않으면 쿠키에 기록됩니다.
var insert=true;
if(old_info==null) //쿠키가 비어 있는지 확인
{
삽입=true;
}
그밖에
{
var old_link=old_info.split("_www.achome.cn_");
(var j=0;j<=5;j )
{
if(old_link[j].indexOf(링크 이름)!=-1)
삽입=false;
if(old_link[j]=="null")
휴식;
}
}
if(삽입)
{
wlink =getCookie("history_info");
setCookie("history_info",wlink); //쿠키 작성, 이 함수 뒤에 명령문이 있습니다.
history_show().reload();
휴식;
}
}
srcElem = srcElem.parentNode;
}
}
잡기(e){}
참을 반환합니다.
}
document.onclick=glog; // 페이지를 클릭할 때마다 glog 기능을 실행합니다.

function History_show()
{
var History_info=getCookie("history_info"); //쿠키에서 기록 기록 가져오기
var content=""; //표시 변수 정의
if(history_info!=null)
{
history_arg=history_info.split("_www.achome.cn_");
var i;
(i=0;i<=5;i )
{
if(history_arg[i]!="null")
{
var wlink=history_arg[i].split(" ");
content =("↑" "" wlink[0 ] "
");
}
document.getElementById("history").innerHTML=content;
}
}
그밖에
{document.getElementById("history").innerHTML="죄송합니다. 검색 기록이 없습니다.";}
}

효과 보기:

<html> 

<body> 

   

<script> 

//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) 

{ 

   

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") 

{ 

linkname=srcElem.innerHTML; 

address=srcElem.href+"_www.achome.cn_"; 

wlink=linkname+"+"+address;   

old_info=getCookie("history_info"); 

var insert=true;   

//////////////////////// 

if(old_info==null) //判断cookie是否为空 

{ 

  insert=true; 

} 

else 

{   

var old_link=old_info.split("_www.achome.cn_"); 

for(var j=0;j<=5;j++) 

{ 

  if(old_link[j].indexOf(linkname)!=-1) 

  insert=false; 

  if(old_link[j]=="null") 

  break; 

  } 

  } 

///////////////////////////// 

if(insert) //如果符合条件则重新写入数据 

{ 

wlink+=getCookie("history_info"); 

setCookie("history_info",wlink); 

history_show().reload(); 

break; 

} 

} 

srcElem = srcElem.parentNode; 

} 

} 

catch(e){} 

return true; 

} 

document.onclick=glog; 

//////////////////////////////////////////////////////////////////////////////// 

function history_show() 

{       

  var history_info=getCookie("history_info"); 

  var content="";   

  if(history_info!=null) 

  { 

  history_arg=history_info.split("_www.achome.cn_"); 

  var i; 

  for(i=0;i<=5;i++) 

  { 

    if(history_arg[i]!="null") 

    { 

     var wlink=history_arg[i].split("+"); 

      content+=("<font color=&#39;#ff000&#39;>↑</font>"+"<a href=&#39;"+wlink[1]+"&#39; target=&#39;_blank&#39;>"+wlink[0]+"</a>
"); 

      } 

      document.getElementById("history").innerHTML=content; 

      } 

} 

else 

  {document.getElementById("history").innerHTML="对不起，您没有任何浏览纪录";} 

} 

// JavaScript Document 

</script> 

<div>浏览历史排行（只显示6个最近访问站点并且没有重复的站点出现）</div> 

<div id="history"> 

<script> 

history_show(); 

</script> 

</div> 

<div> 


 


 

点击链接： 

<a href="#">网站1</a> 

<a href="#">网站2</a> 

<a href="#">网站3</a> 

<a href="#">网站4</a> 

<a href="#">网站5</a> 

<a href="#">网站6</a> 

<a href="#">网站7</a> 

<a href="#">网站8</a> 

<a href="#">网站9</a> 

</div> 

<div>如果有其他疑问请登陆<a href=http://www.jb51.net>脚本之家</a>与我联系</div> 

</body> 

</html>

로그인 후 복사