• Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie einen einfachen Zähler mit JavaScript_Basics

    So erstellen Sie einen einfachen Zähler mit JavaScript_Basics

    WBOY
    WBOYOriginal
    2016-05-16 15:51:091615Durchsuche

    Design-Gedanken

    Der Schlüssel zu dieser Methode ist der umfassende Einsatz von Cookie-Technologie und dynamischen Bildeigenschaften. Mithilfe von Cookies können die Daten des Benutzers auf der Festplatte des Benutzers aufgezeichnet werden. Wenn Sie diese Website das nächste Mal besuchen, können Sie das Cookie auf der Festplatte des Benutzers lesen und direkt die Identität des Besuchers, die Anzahl der Besuche und andere relevante Informationen erfahren. Der Zugriff auf Cookies erfolgt in JavaScript über das Attribut document.cookie, das Name, Ablaufdatum, gültigen Domänennamen, gültigen URL-Pfad usw. umfasst. Der Name und sein Wert, getrennt durch ein Gleichheitszeichen, sind die eigentlichen Daten des Cookies, die in diesem Fall dazu dienen, die Anzahl der Besuche des Besuchers auf der Seite zu speichern. Durch Zuordnen der Bilder auf der Webseite zu einem Bilder-Array und Ändern der Eigenschaften der Array-Elemente unter bestimmten Bedingungen kann eine dynamische Bildanzeige erreicht werden. In diesem Beispiel wird zunächst ein Satz Bilder vorgeladen. Bei jedem Aufruf der Webseite wird ein neuer Satz Bilder zufällig generiert und durch das Überschreiben der Originalbilder wird ein dynamischer und interessanter Effekt erzielt.

    Quellprogramm count.html

     < html>
    
      < head>
    
      < meta http-equiv=″Content-Type″
    
      content=″text/html; charset=gb2312″>
    
      < title>趣味计数器< /title>
    
      < /head>
    
      < body>
    
      < p>< script language=″JavaScript″>
    
      var expdays=60;
    
      var exp=new Date();
    
      exp.setTime(exp.getTime()
    
      (expdays*24*60*60*1000));
    
      function count(info){
    
      //若是该访客的第一次访问,将计数器值赋1,否则加1累积
    
      var wwhcount=getcookie(′wwhcount′);
    
      if (wwhcount==null){
    
      wwhcount=1;
    
      }
    
      else{wwhcount++;}
    
      setcookie(′wwhcount′,wwhcount,exp);
    
      return countdisp(wwhcount)
    
      }
    
      function countdisp(countvar){
    
      //实现随机显示,不足6位以0补全,可以自己调整显示位数
    
      var countvar1=″000000″+countvar;
    
      var howFar1=countvar1.length;
    
      countvar1=countvar1.substring(howFar1, howFar1-1)
    
      var index=″ ″+Math.floor(Math.random()*10);
    
      if (index==″10″){
    
      index=″0″};
    
      for (var icount=0;icount< 6;icount++){
    
      var g=countvar1.substring(icount,icount+1);
    
      document.images[icount].src=″http:
    
      //localhost/images/″+index+g+″.gif″;
    
      }
    
      }
    
      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){
    
      //截取Cookie中的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 argv=setcookie.arguments;
    
      var argc=setcookie.arguments.length;
    
      var expires=(argc>2)&#63;argv[2]:null;var path=(argc>3)&#63;argv[3]:null;
    
      var domain=(argc>4)&#63;argv[4]:null;
    
      var secure=(argc〉5)&#63;argv[5]:false;
    
      document.cookie=name+″=″+escape(value)
    
      +((expires==null)&#63;″ ″:(″;expires=″+expires.toGMTString()))
    
      +((path==null)&#63;″ ″:(″;path=″+path))+((domain==null)&#63;″
    
      ″:(″;domain=″+domain))+((secure==true)&#63;″;secure″:″ ″);
    
      }
    
      function deletecookie(name){
    
      //使该信息行失效,删除该用户关于访问次数的信息
    
      var exp=new Date();
    
      exp.setTime(exp.getTime()-1);
    
      var cval=getcookie(name);
    
      document.cookie=name+″=″+cval+″;expires=″+exp.toGMTString();
    
      }
    
      < /script>< /p>
    
      < ! --预载入图像数组-->
    
      您是第 < img src=″http://localhost/images/00.gif″ height=20 width=20>
    
      < img src=″http://localhost/images/00.gif″
    
      height=20 width=20>
    
      < img src=″http://localhost/images/00.gif″
    
      height=20 width=20>
    
      < img src=″http://localhost/images/00.gif″
    
      height=20 width=20>
    
      < I mg src=″http://localhost/images/00.gif″
    
      height=20 width=20>
    
      < img src=″http://localhost/images/00.gif″
    
      height=20 width=20>次光临!
    
      < script language=″JavaScript″>
    
      //调用count()函数,实现计数器的动态图像显示
    
      count();
    
      < /script>
    
      < /body>
    
      < /html>
    
    

    Wichtige Dinge

    Da die Sprache JavaScript verwendet wird, ist diese Methode unabhängig von der Anwendungsplattform und kann auf Unix, Windows und anderen Plattformen angewendet werden. Darüber hinaus unterscheidet sich dieser Zähler vom allgemeinen Besucherzähler und wird speziell dazu verwendet, die Häufigkeit zu erfassen, mit der ein Besucher eine bestimmte Website besucht.

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn