我正在尝试几个小时,但我没有得到解决这个问题。
当鼠标移动时,如何将倒计时设置为10? 这是codepen链接:
var timeout = null;
$(document).on('mousemove', function() {
if (timeout !== null) {
}
timeout = setTimeout(function() {
var timer = 10;
var interval = setInterval(function() {
timer--;
$('.timer').text(timer);
if (timer === 0) clearInterval(interval);
}, 1000);
}, 100);
});
.timer {
position: relative;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>
答案 0 :(得分:0)
根据您的预期行为,您可以使用以下代码段:
var interval;
$(document).on('mousemove', function() {
clearInterval(interval);
var coutdown = 10, $timer = $('.timer');
$timer.text(coutdown);
interval = setInterval(function() {
$timer.text(--coutdown);
if (coutdown === 0) clearInterval(interval);
}, 1000);
}).mousemove();
.timer {
position: relative;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timer">10</div>
答案 1 :(得分:0)
看看这个是为了理解...
var interval;
var time;
$(document).on('mousemove', function() {
clearInterval(interval);
time=10;
interval = setInterval(loop, 1000)
})
function loop(){
time--;
$('.timer').text(time);
if (time <=0 ) clearInterval(interval);
}
&#13;
.timer {
position: relative;
font-size: 40px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>
&#13;
答案 2 :(得分:0)
您不一定需要setTimeout,您可以使用setInterval函数执行此操作,该函数检查div中的数字并将其减1,并在数字达到0时自行清除。
然后在mousemove上将文本设置为&#34; 10&#34;再次调用设置间隔的函数。
var timer = null;
function setTimer(){
timer = setInterval(function(){
var countdown = parseInt($('.timer').text());
$('.timer').text((--countdown).toString());
if(countdown===0) clearInterval(timer);
},1000);
}
$(document).on("mousemove",function(){
if(timer) clearInterval(timer);
$('.timer').text("10");
setTimer();
});
setTimer();
&#13;
.timer {
position: relative;
font-size: 40px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>
&#13;
答案 3 :(得分:0)
解决方案1-倒数计时器
首先是一个简单的make倒数计时器,下面给出代码,如果完成,则简单添加windows.location路径(重定向页面地址)。
<sctipt>
var interval;
$(document).on('mousemove', function () {
clearInterval(interval);
var coutdown = 5 * 60, $timer = $('.timer'); // After 5 minutes session expired (mouse button click code)
$timer.text(coutdown);
interval = setInterval(function () {
$timer.text(--coutdown);
if (coutdown === 0) {
alert("Session expired User successfully logout.");
window.location = "UserLogin.aspx";
}
}, 1000);
}).mousemove();
var interval;
$(document).on('keydown', function () {
clearInterval(interval);
var coutdown = 5 * 60, $timer = $('.timer'); // After 5 minutes session expired (keyboard button press code)
$timer.text(coutdown);
interval = setInterval(function () {
$timer.text(--coutdown);
if (coutdown === 0) {
alert("Session expired User successfully logout.");
window.location = "UserLogin.aspx";
}
}, 1000);
}).mousemove();
<sctipt>
如果要在网页上显示时间,请添加此代码。
<html>
<div class="timer">
<p> Session Time</p>
</div>
</html>
解决方案2-带按钮的倒计时计时器
HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<div class="timer">
<span class="hour">00</span>:<span class="minute">00</span>:<span class="second">10</span>
</div>
<div class="control">
<button onClick="timer.start(1000)">Start</button>
<button onClick="timer.stop()">Stop</button>
<button onClick="timer.reset(60)">Reset</button>
<button onClick="timer.mode(1)">Count up</button>
<button onClick="timer.mode(0)">Count down</button>
</div>
CSS:
div.timer {
border:1px #666666 solid;
width:190px;
height:50px;
line-height:50px;
font-size:36px;
font-family:"Courier New", Courier, monospace;
text-align:center;
margin:5px;
}
Javascript:
function _timer(callback)
{
var time = 0; // The default time of the timer
var mode = 1; // Mode: count up or count down
var status = 0; // Status: timer is running or stoped
var timer_id; // This is used by setInterval function
// this will start the timer ex. start the timer with 1 second interval timer.start(1000)
this.start = function(interval)
{
interval = (typeof(interval) !== 'undefined') ? interval : 1000;
if(status == 0)
{
status = 1;
timer_id = setInterval(function()
{
switch(mode)
{
default:
if(time)
{
time--;
generateTime();
if(typeof(callback) === 'function') callback(time);
}
break;
case 1:
if(time < 86400)
{
time++;
generateTime();
if(typeof(callback) === 'function') callback(time);
}
break;
}
}, interval);
}
}
// Same as the name, this will stop or pause the timer ex. timer.stop()
this.stop = function()
{
if(status == 1)
{
status = 0;
clearInterval(timer_id);
}
}
// Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0)
this.reset = function(sec)
{
sec = (typeof(sec) !== 'undefined') ? sec : 0;
time = sec;
generateTime(time);
}
// Change the mode of the timer, count-up (1) or countdown (0)
this.mode = function(tmode)
{
mode = tmode;
}
// This methode return the current value of the timer
this.getTime = function()
{
return time;
}
// This methode return the current mode of the timer count-up (1) or countdown (0)
this.getMode = function()
{
return mode;
}
// This methode return the status of the timer running (1) or stoped (1)
this.getStatus
{
return status;
}
// This methode will render the time variable to hour:minute:second format
function generateTime()
{
var second = time % 60;
var minute = Math.floor(time / 60) % 60;
var hour = Math.floor(time / 3600) % 60;
second = (second < 10) ? '0'+second : second;
minute = (minute < 10) ? '0'+minute : minute;
hour = (hour < 10) ? '0'+hour : hour;
$('div.timer span.second').html(second);
$('div.timer span.minute').html(minute);
$('div.timer span.hour').html(hour);
}
}
// example use
var timer;
$(document).ready(function(e)
{
timer = new _timer
(
function(time)
{
if(time == 0)
{
timer.stop();
alert('time out');
}
}
);
timer.reset(0);
timer.mode(0);
});