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

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

javascript jquery html

Javascript jquery用于计算点击次数和在页面上花费的时间,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用jquery来计算在页面上的点击次数，以及在页面上花费的时间和跨页面使用会话存储的时间。当用户单击所需的链接时，它会将他们带到反馈页面以下是我目前掌握的代码： <!DOCTYPE html> <html lang="en">  <head> <meta charset="utf-8" /> <!-- #BeginEditable "

我正在尝试使用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>


家
.carousel-inner>.item>img，
.carousel-inner>.item>a>img{
宽度：70%；
保证金：自动；
}
var pageLoadDate；
var-benchTime；
var事件日期；
var-eDiffpl；
$（文档）.ready（函数（）{
pageLoadDate=新日期（）；
$（“*”）。单击（函数（e）
{
//停止向上传播DOM树的函数
e、 停止传播（）；
//获取交互时间
eventDate=新日期（）；
//dduiduihd
//检查这是否是我们想要的链接
if（$（this）.data（）！==未定义）
{
//右链接已被单击
benchTime=基准日期（）；
eDiffpl=eventDate.getTime（）-pageLoadDate.getTime（）-benchTime；
sessionStorage.myTester=Number（sessionStorage.myTester）+eDiffpl；
//然后转到实验的下一页
window.location.url=“feedback\u page.html”；
}                                                                                              
其他的
{
//已单击页面的不正确部分
sessionStorage.errorCount=编号（sessionStorage.errorCount）+；
日志（sessionStorage.errorCount）；
}
});
});
-->

















































































函数displayBar（）{
document.getElementById（“fixed-nav-bar2”）.style.display=“block”；
document.getElementById（“myCarousel”）.style.paddingTop=“50px”；
}

然而，有了上面的代码，我无法打开我想要的链接所在的下拉菜单

benchmarkDate（）方法运行end_date=new date（）999次以获取时间，这是不能更改的

我可以问一下，当服务器已经收集到此信息时，为什么要在客户端执行此操作吗？它仅用于大学课程作业