jquery用于计算点击次数和页面上花费的时间

时间:2016-02-27 16:04:37

标签: javascript jquery html

我正在尝试使用jquery来计算页面上的点击次数以及在页面上花费的时间以及跨页面使用会话存储的时间。当用户点击所需的链接时,它会将他们带到反馈页面。

这是我到目前为止的代码:

    <!DOCTYPE html>
<html lang="en">

<!-- #BeginTemplate "Master.dwt" -->

<head>
<meta charset="utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Home</title>
<link href="css1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="BenchMarking.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-2.2.0.min.js"></script>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
</style>
<script>              
var pageLoadDate;
var benchTime;
var eventDate;
var eDiffpl;

$(document).ready(function() {
    pageLoadDate= new Date();
    $("*").click(function(e) 
    {
        // Stop the function propagating up the DOM tree
        e.stopPropagation();

        // Get the interaction time
        eventDate = new Date();

        // <p data-islink="islink">dduiduihd</p>


        // Check if this is the link we want
        if ($(this).data() !== undefined)
        {
            // The right link has been clicked
            benchTime = benchmarkDate();


            eDiffpl = eventDate.getTime() - pageLoadDate.getTime() - benchTime;        
            sessionStorage.myTester = Number(sessionStorage.myTester) + eDiffpl;

            // Then move to next page of experiment
            window.location.url = "feedback_page.html";
        }                                                                                              

        else
        {
            // An incorrect part of the page has been clicked
            sessionStorage.errorCount = Number(sessionStorage.errorCount)++;
            console.log(sessionStorage.errorCount);
        }
    });
});

</script>
-->

<!-- #EndEditable -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="Footer.css" rel="stylesheet" type="text/css">
</head>

<body>
<nav class="fixed-nav-bar">
  <div id="menu" class="menu">
    <img src="William hill logo.jpg" alt="Vegas" width="100" height="47">
    <!-- Example responsive navigation menu  -->
    <a class="hide" href="#hidemenu">Menu</a>
    <ul class="menu-items">
      <li><a><span onclick="displayBar()">Sports</span></a></li>
      <li><a href="#"><span onclick="displayBar()">Games / Macau</span></a></li>
      <li><a href="#"><span onclick="displayBar()">Scratchcards</span></a></li>
      <li><a href="#"><span onclick="displayBar()">Vegas</span></a></li>
      <li><a href="#"><span onclick="displayBar()">Virtual</span></a></li>
      <li><a href="#"><span onclick="displayBar()">Financials</span></a></li>
      <li><a href="#"><span onclick="displayBar()">Login</span></a></li>
  </ul>
  </div>
</nav>

<nav id="fixed-nav-bar2">
    <div id="menu0" class="menu1">
        <div class="container-fluid">
        <ul class="nav navbar-nav">
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ball Sports<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Football</a></li>
          <li><a href="#">Basketball</a></li>
          <li><a href="#">Golf</a></li>
          <li><a href="#">Handball</a></li>
          <li><a href="#">Rubgy League</a></li>
          <li><a href="#">Rugby Union</a></li>
          <li><a href="#">Tennis</a></li>
          <li><a href="#">Cricket</a></li>
          <li><a href="#">Snooker</a></li>
          <li><a href="#">Pool</a></li>
          <li><a href="#">Volly Ball</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">International Sports<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">American Football</a></li>
          <li><a href="#">Baseball</a></li>
          <li><a href="#">Basket Ball</a></li>
          <li><a href="#">GAA Football</a></li>
          <li><a href="#">GAA Hurling</a></li>
          <li><a href="#">Australian Rules</a></li>

        </ul>
      </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racing<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Formula 1</a></li>
          <li><a href="#">Formula 2</a></li>
          <li><a href="#">Formula E</a></li>
          <li><a href="#">Moterbikes</a></li>
          <li><a href="#">cycling</a></li>
          <li><a href="#">Horse Racing</a></li>
          <li><a href="#">Greyhound Racing</a></li>
        </ul>
      </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racket Sports<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Tennis</a></li>
          <li><a href="#">Squash</a></li>
          <li><a href="#">Badmington</a></li>
          <li><a href="#">RacketBall</a></li>
        </ul>
      </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vitual Sports<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">E-Sports</a></li>
          <li><a href="#">Virtual Greyhound Racing</a></li>
          <li><a href="#">Virtual Horse Racing</a></li>
          <li><a href="#">Virtual Football</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Other<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Boxing</a></li>
          <li><a href="#">UFC / MMA</a></li>
          <li><a href="#">Winter Sports</a></li>
          <li><a href="#">Darts</a></li>

        </ul>
      </li>
     </ul>
    </div>
    </div>
</nav>

<!-- #BeginEditable "body" -->


<div class="container" class="first_body_element">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
      <li data-target="#myCarousel" data-slide-to="5"></li>
      <li data-target="#myCarousel" data-slide-to="6"></li>
      <li data-target="#myCarousel" data-slide-to="7"></li>
      <li data-target="#myCarousel" data-slide-to="8"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <a href="Football.html"><img src="sports%20betting.png" alt="sports betting" width="460" height="345"></a>
      </div>

      <div class="item">
        <a href="http://vegas.williamhill.com/http://vegas.williamhill.com/">
        <img src="Vegas.png" alt="Vegas" width="460" height="345">
        </a>
      </div>

      <div class="item">
        <a href="https://macau.williamhill.com/#!/https://macau.williamhill.com/#!/">
        <img src="Macau.png" alt="Macau" width="460" height="345">
        </a>
      </div>

      <div class="item">
        <a href="https://games.williamhill.com/#!/https://games.williamhill.com/#!/">
        <img src="Games.png" alt="Games" width="460" height="345">
        </a>
      </div>

      <div class="item">
         <a href="https://scratchcards.williamhill.com/#!/https://scratchcards.williamhill.com/#!/">
        <img src="Scratchcards.png" alt="Scratchcards" width="460" height="345">
          </a>

      </div>

      <div class="item">
        <a href="http://bingo.williamhill.com/http://bingo.williamhill.com/">
        <img src="Bingo.png" alt="Bingo" width="460" height="345">
        </a>
      </div>

      <div class="item">
        <a href="http://poker.williamhill.com/http://poker.williamhill.com/">
        <img src="Poker.png" alt="Poker" width="460" height="345">
        </a>
      </div>

      <div class="item">
        <a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
        <img src="Roulette.png" alt="Roulette" width="460" height="345">
        </a>
      </div>

      <div class="item">
        <a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
        <img src="Vegas%20Millions.png" alt="Vegas Millions" width="460" height="345">
        </a>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>


<!-- #EndEditable -->
<script>
function displayBar(){
    document.getElementById("fixed-nav-bar2").style.display = "block";
    document.getElementById("myCarousel").style.paddingTop = "50px";
    }
</script>
<footer>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
   <ul class="nav navbar-nav">
      <li><a href="#">Terms and Conditions</a></li>
      <li><a href="#">Privacy Policy</a></li> 
      <li><a href="#">Rules</a></li> 
      <li><a href="#">Help</a></li> 
   <li><a href="#">Contact us</a></li> 
   <li><a href="#">William Hill Press Office</a></li>
    </ul>
  </div>
</nav>
</footer>
</body>
<!-- #EndTemplate -->
</html>

但是使用上面的代码,我无法打开我想要的链接所在的下拉菜单。

benchmarkDate()方法运行end_date = new Date()999次以获取时间,此时无法更改

0 个答案:

没有答案