$(document).ready(function() {
var score = 0;
$("body").mousemove(function() {
score++;
$("#result").val(score);
console.log(score);
});
});
The score will increase every time when I move the mouse, but how should I add a function to decrease the score until 0 when the mouse is not moving?
You could set an interval that decreases the value if the mouse does not move, and clear it when it moves, and reset it, something like this:
$(document).ready(function() {
var score = 0, decreaseInterval, intervalTime = 1000;
function decrease() {
if (score > 0) score--;
$("#result").val(score);
};
decreaseInterval = setInterval(decrease, intervalTime);
$("body").mousemove(function(){
clearInterval(decreaseInterval);
score ++;
$("#result").val(score);
decreaseInterval = setInterval(decrease, intervalTime);
console.log(score);
});
});
Here is a fiddle to demonstrate it working: https://jsfiddle.net/0swrae76/1/
Option: Use elapsed time. When the mouse is moved, check now() vs last time mouse was moved. Use elapsed time to decrease the score in a chunk.
Related
I need to make it so that the event here removes the element after it fades out but how would I do that? I got it so that the element fades out from a grid that I am using but I want it to be removed completely as well.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
You just need to .remove() it, but you'd want the interval to go for 50 more ms so that there's time for the element to be visible at 0.1 opacity, else it might look a bit off:
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (!op){
clearInterval(timer);
event.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
see this article
you can use
elementID.parentNode.removeChild(elementID);
You are catching the event here. Thats means you can get the target. You can use ev.target.remove() to remove it. Hope its work for you.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
event.target.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
I have a section of code that I have been fooling around with. The goal of the code is to have four buttons, when you press the open button a window is opened in the top left corner of the screen, when you press the move button the window is supposed to move in an infinite loop around the screen starting in the positive X direction and moving clockwise. I am having an issue with the window moving in the negative X direction. Whenever the widow reaches the bottom righthand corner of my computer screen it will just stop. I do not know how to fix it, I just figured I would put a negative symbol before the direction that I want it to move. The moving function is under var moveWindow.
<html>
<head>
<script>
var aWindow;
var current = 0;
function openWindow() {
aWindow = window.open("", "", "width=400, height = 200");
aWindow.document.write("This is my new Window");
}
function closeWindow(){
if(aWindow) {
aWindow.close();
}
}
var moveWindow = function windowMove() {
var rightLimit = screen.width -400;
var topLimit = screen.height - screen.availHeight;
var bottomLimit = screen.height - 200;
if (aWindow) {
if (aWindow.screenY <= topLimit && aWindow.screenX != rightLimit) {
aWindow.moveBy(100, 0)
}
else if (aWindow.screenX <= rightLimit && aWindow.screenY != topLimit) {
aWindow.moveBy(0, 100)
}
else if (aWindow.screenY <= topLimit && aWindow.screenX != rightLimit) {
aWindow.move(-100, 0)
}
else if (aWindow.screenX <= rightLimit && aWindow.screenX != topLimit) {
aWindow.move(0, -100)
}
}
}
function startWindow(){
timer = setInterval(moveWindow, 350);
}
function stopWindow() {
clearInterval(startWindow)
}
</script>
</head>
</script>
</head>
<body>
<button onclick="openWindow();">Open</button>
<button onclick="closeWindow();">Close</button>
<button onclick="startWindow();">Move</button>
<button onclick="stopWindow();">Stop</button>
</body>
</html>
There are several issues with your conditions:
The inequality (!=) will often be true also when you reached the border. This is because the window does not stop exactly at the offset you had planned for it.
The outer window size is greater than 400x200 pixels, as there are borders. This makes the values you currently have for rightLimit (and other such variables) too tight.
You are testing for topLimit but never for bottomLimit. Also there is no provision for something like leftLimit.
You pass the wrong variable to clearInterval
Because of several metrics which influence the position of the popup window (like border, minimum distance from the screen's end, ...etc), it will be hard to determine where exactly it bumps into a side. As Windows will not let the popup window go outside of the screen, it will be easier to just let the popup window move and see if it actually did move. In case it didn't, then you know the side was reached and the direction should change.
It will also be easier the maintain the current direction in a variable instead of trying to detect what the current direction is based on the coordinates.
For detecting whether the window actually moved, you need a small time delay to allow the move to happen, so I would introduce a setTimeout for that. But otherwise the code can be much simplified:
var aWindow;
var current = 0; // We will use this to denote the current direction
function openWindow() {
aWindow = window.open("", "", "width=400, height = 200");
aWindow.document.write("This is my new Window");
}
function closeWindow(){
if (aWindow) {
aWindow.close();
}
}
var moveWindow = function windowMove() {
if (aWindow) {
var x = aWindow.screenX;
var y = aWindow.screenY;
aWindow.moveBy([100,0,-100,0][current], [0,100,0,-100][current]);
setTimeout(function () {
if (x === aWindow.screenX && y === aWindow.screenY) { // nothing moved
current = (current + 1) % 4; // next direction
windowMove(); // call an extra time to make the move in the next direction
}
}, 50);
}
}
var timer; // better declare it
function startWindow(){
timer = setInterval(moveWindow, 350);
}
function stopWindow() {
clearInterval(timer); // <--- timer
}
//change the speed at which the animations are moving
function spd()
{
var stuff = document.getElementById("speed");
//if start is enabled
//change speed
if ((document.getElementById("stop").disabled == false) && (turbochecker == 0))
{
speed = 50;
interval = setInterval(function(){next(currani);}, speed);
turbochecker = 1;
}
else
{
speed = 250;
interval = setInterval(function(){next(currani);}, speed);
}
}
setting interval the second time keeps increasing the speed by 50. Anyway to make the speed reset back to 250 rather than keep increasing for every 50?
When you want to change the interval frequency, you should clear it first, then set it again:
clearInterval(interval)
interval = setInterval(function(){next(currani);}, speed);
I'm trying to animate a sprite using the below code but instead of waiting about 1 second before going to the next iteration of the loop, the animation seems to jump from the first image in the sprite to the last within about a second. Can anyone tell me how I might be able to alter the code to make it work the way I have in mind? Thanks!
preview = setInterval(animation,1000);
counter = 0;
function animation() {
while (counter < 81){
position = counter * 1.25;
$('#ad_1').css({"background-position" : position + "% 0%"});
counter ++;
}
};
preview;
Your while loop is causing everything to happen in the first interval call.
Remove it, and you'll be depending solely on intervals:
preview = setInterval(animation,1000);
counter = 0;
function animation() {
position = counter * 1.25;
$('#ad_1').css({"background-position" : position + "% 0%"});
counter ++;
};
preview;
Live example:
var preview = setInterval(animation,100);
var counter = 0;
function animation() {
position = counter * 1.25;
$('#ad_1').css({"background-position" : position + "% 0%"});
counter ++;
};
div {
height: 317px;
width: 50px;
display: inline-block;
background: url(https://pbs.twimg.com/profile_images/2186972673/super_mario.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad_1"></div>
Take the while portion of the loop out.
function animation() {
if (counter < 81){
position = counter * 1.25;
$('#ad_1').css({"background-position" : position + "% 0%"});
counter ++;
} else {
clearInterval(preview); /* this will stop the interval timer, since you won't need it after 80 repetitions. */
preview = null;
}
}
I am working on a project to create a wheel of fortune type site for my job. I have successfully got a PNG wheel spinning continuously, however I can not get it to stop on button click. I have tried to clearInterval(interval), I have also tried .stopRotate(). Nothing has worked! This is getting to be frustrating. Any help would be greatly appreciated!
This is my JQuery code:
var angle = 1; //Set angle to move in 1 degree increments
$(document).ready(function () {
$("#spin").click(function () {
setInterval(function () {
angle += 5; //keep angle increments at 5 degrees to keep moving
$("#wheel").rotate(angle);
});
});
$("#stop").click(function () {
$("#wheel").stopRotate();
});
});
Yup, You didn't stop the rotate functionality on setInterval. You need to Clear the setInterval using clearInterval in javascript
var angle = 1; //Set angle to move in 1 degree increments
var timer;
$(document).ready(function () {
$("#spin").click(function () {
timer = setInterval(function () {
angle += 5; //keep angle increments at 5 degrees to keep moving
$("#wheel").rotate(angle);
});
});
$("#stop").click(function () {
clearInterval(timer);
});
});