Question

如果浏览器上没有活动4秒钟，我已经编写了javascript警告。如果没有浏览器事件，则应出现一个对话框，要求扩展会话。如果4秒内没有事件，通知应该消失。如果用户单击continue session，则应重置计数器并检查是否不活动。代码如下。在页面加载时，它正常工作，但一旦有一些活动，此脚本无法正常工作。我哪里错了？

var countDownDate = dateAdd(new Date(), 4);
var flag = false;

var x = setInterval(function() {
  callFun(countDownDate);
}, 1000);


var contin = function() {
  flag = true;
  document.getElementById("dialogBox").style.display = "none";
  document.getElementById("demo").style.display = "block";
}

function dateAdd(date, units) {
  var ret = new Date(date);
  ret.setTime(ret.getTime() + units * 1000);
  return ret;
}

var callFun = function(countDownDate) {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance <= 0) {
    document.getElementById("demo").style.display = "none";
    clearInterval(x);
    document.getElementById("dialogBox").style.display = "block";

  }
}

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) {
  countDownDate = dateAdd(new Date(), 4);
  flag = true;
});

if (flag) {
  var z = setInterval(function() {
    alert('will logout now....');
    document.getElementById("dialogBox").style.display = "none";
    clearInterval(z);
  }, 8000);
}

body {
  margin: 0px;
  padding: 0px;
}

#main {
  margin: 0px auto;
  padding: 0px;
  width: 900px;
  position: relative;
}

pre {
  background: #F8F8D2;
  padding: 10px;
  border: 2px solid #673E3E;
  border-radius: 3px;
  color: #222222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="main">
    <p id="demo"></p>
    <div id="dialogBox" style="display:none;">
      <h3>Do you want to be logged in?</h3>
      <button value="Continue" onclick="contin();">Continue</button>
      <button value="Logout">Logout</button>
    </div>


  </div>
</body>

Answer 1

希望以下解决方案有所帮助。当显示对话框时，我会检查另外3秒钟的活动，如果没有活动，那么我会调用logout功能。对contin，callFun和logout函数进行了更改。

var countDownDate = dateAdd(new Date(), 4);
var flag = false;
var idleInterval, buttonInterval;

var x = setInterval(function () {
	callFun(countDownDate);
}, 1000);

var contin = function () {
	flag = true;
	document.getElementById("dialogBox").style.display = "none";
	document.getElementById("demo").style.display = "block";
	document.getElementById("demo").innerHTML = "0m 0s";
	clearInterval(idleInterval);
	buttonInterval = setInterval(function () {
		callFun(countDownDate);
	}, 1000);
}

function dateAdd(date, units) {
	var ret = new Date(date);
	ret.setTime(ret.getTime() + units * 1000);
	return ret;
}

var callFun = function (countDownDate) {
	// Get todays date and time
	var now = new Date().getTime();

	// Find the distance between now an the count down date
	var distance = countDownDate - now;

	var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
	var seconds = Math.floor((distance % (1000 * 60)) / 1000);

	// Display the result in the element with id="demo"
	document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

	clearInterval(idleInterval);

	// If the count down is finished, write some text 
	if (distance <= 0) {
		document.getElementById("demo").style.display = "none";
		document.getElementById("dialogBox").style.display = "block";
		clearInterval(x);
		clearInterval(buttonInterval);
		flag = false;

		idleInterval = setInterval(logOut, 3000);
	}
}

function logOut() {
	if (!flag){
		console.log("Log out");
		document.getElementById("dialogBox").style.display = "none";
		clearInterval(idleInterval);
	}

}

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function (x1) {
	countDownDate = dateAdd(new Date(), 4);
	flag = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
	body {
		margin: 0px;
		padding: 0px;
	}

	#main {
		margin: 0px auto;
		padding: 0px;
		width: 900px;
		position: relative;
	}

	pre {
		background: #F8F8D2;
		padding: 10px;
		border: 2px solid #673E3E;
		border-radius: 3px;
		color: #222222;
	}
</style>

 <div id="main">
	<p id="demo"></p>
	<div id="dialogBox" style="display:none;">
		<h3>Do you want to be logged in?</h3>
		<button value="Continue" onclick="contin();">Continue</button>
		<button value="Logout">Logout</button>
	</div>
</div>

Answer 2

好像你需要再次使用“Contin”功能中的新日期来调用“callFun”函数。

Answer 3

停止后忘记重新启动间隔。

var countDownDate = dateAdd(new Date(), 4);
var flag = false;

var x = setInterval(function() {
  callFun(countDownDate);
}, 1000);


var contin = function() {
  flag = true;
  document.getElementById("dialogBox").style.display = "none";
  document.getElementById("demo").style.display = "block";
  countDownDate = dateAdd(new Date(), 4); 

  var flag = false;

  var x = setInterval(function() {
    callFun(countDownDate);
  }, 1000);
}

function dateAdd(date, units) {
  var ret = new Date(date);
  ret.setTime(ret.getTime() + units * 1000);
  return ret;
}

var callFun = function(countDownDate) {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance <= 0) {
    document.getElementById("demo").style.display = "none";
    clearInterval(x);
    document.getElementById("dialogBox").style.display = "block";

  }
}

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) {
  countDownDate = dateAdd(new Date(), 4);
  flag = true;
});

if (flag) {
  var z = setInterval(function() {
    alert('will logout now....');
    document.getElementById("dialogBox").style.display = "none";
    clearInterval(z);
  }, 8000);
}

body {
  margin: 0px;
  padding: 0px;
}

#main {
  margin: 0px auto;
  padding: 0px;
  width: 900px;
  position: relative;
}

pre {
  background: #F8F8D2;
  padding: 10px;
  border: 2px solid #673E3E;
  border-radius: 3px;
  color: #222222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="main">
    <p id="demo"></p>
    <div id="dialogBox" style="display:none;">
      <h3>Do you want to be logged in?</h3>
      <button value="Continue" onclick="contin();">Continue</button>
      <button value="Logout">Logout</button>
    </div>


  </div>
</body>

检查javascript中的浏览器不活动状态

3 个答案: