Javascript 当用户不进行交互时，如何使图像返回到屏幕顶部
功能： 用户需要点击“点击此处”图像，以在最快的时间或在计数器内将页面顶部的星星移动到底部。当用户决定将手指从“点击此处”图像上移开时，星星将自动升回到顶部的“原始”位置 已完成的操作： 我已经设法得到了一个脚本，允许用户点击“点击这里”的形象，以移动星下来 问题： 我不知道当用户停止与点击图像交互时，如何自动将星星移回顶部 我已附上代码供您阅读Javascript 当用户不进行交互时，如何使图像返回到屏幕顶部,javascript,jquery,onclick,Javascript,Jquery,Onclick,功能： 用户需要点击“点击此处”图像，以在最快的时间或在计数器内将页面顶部的星星移动到底部。当用户决定将手指从“点击此处”图像上移开时，星星将自动升回到顶部的“原始”位置 已完成的操作： 我已经设法得到了一个脚本，允许用户点击“点击这里”的形象，以移动星下来 问题： 我不知道当用户停止与点击图像交互时，如何自动将星星移回顶部 我已附上代码供您阅读 函数GameStart（）{ 控制台日志（“游戏开始”）； //点击“点击”按钮时使star降低的方法 var阶跃=10； var x=docume
函数GameStart（）{
控制台日志（“游戏开始”）；
//点击“点击”按钮时使star降低的方法
var阶跃=10；
var x=document.getElementById（'GameStar'）.offsetTop；
x=x+步进；
document.getElementById（'GameStar'）.style.top=x+“px”；
}
您的浏览器不支持此音频格式
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="click" onClick=onClick()>Click Here</button>
<p id="xText">X : 0</p>
<script>
//The x value (increased by clicking the button, decreased automatically by timer)
var x = 0;
//Values for the 1st timer (run after the user click the button)
var cTimer = null;
var currentTime = 0; //how many seconds have passed since the button last clicked
var maximumTime = 5; //how many seconds after last click before we start decreasing
//Values for the 2nd timer (run after 1st timer ends)
var dTimer = null;
var dCurrentTime = 0; //how many seconds have passed since the current interval started
var dMaximumTime = 3; //the decreasing interval in seconds
//This is called each time the user clicked the button
function onClick(){
//Increase the value of x by 1
UpdateXValue(1);
//clear out all timer and timer value
currentTime = 0;
dCurrentTime = 0;
clearTimeout(dTimer);
clearTimeout(cTimer);
//start new timer
cTimer = setTimeout(RunTimer, 1000);
}
//This function acts as timer that runs after the button is clicked
function RunTimer(){
currentTime += 1;
//if the time passed since last button clicked is less than "maximumTime" run the timer again
//else stops the timer and start the second timer to decrease x's value
if (currentTime < maximumTime){
cTimer = setTimeout(RunTimer, 1000);
}else{
clearTimeout(cTimer);
dTimer = setTimeout(DecreaseValue, 1000);
}
}
//This function acts as timer to decrease the X value that runs after the 1st timer is done
function DecreaseValue(){
dCurrentTime += 1;
//if the second timer have reach the interval for decreasing value (dMaximumTime)
//else keep running the timer
if (dCurrentTime >= dMaximumTime){
//decrease the value of x by 1
UpdateXValue(-1);
//if x is still larger than 0 run the timer again
//else stops the timer
if (x > 0){
dCurrentTime = 0;
dTimer = setTimeout(DecreaseValue, 1000);
}else{
clearTimeout(dTimer);
}
}else{
dTimer = setTimeout(DecreaseValue, 1000);
}
}
//Update X by the value sent
function UpdateXValue(valueToAdd){
x += valueToAdd;
document.getElementById("xText").innerHTML = "X : " + x.toString();
}
</script>
</body>
</html>
点击这里
X:0
//x值（通过点击按钮增加，通过定时器自动减少）
var x=0；
//第一个计时器的值（在用户单击按钮后运行）
var-cTimer=null；
var currentTime=0//自上次单击按钮以来已过了多少秒
var最大时间=5//上次单击后多少秒，我们才能开始减少
//第二个计时器的值（在第一个计时器结束后运行）
var-dTimer=null；
var dCurrentTime=0//自当前间隔开始以来已过了多少秒
var dMaximumTime=3//以秒为单位的递减间隔
//每次用户单击按钮时都会调用此函数
函数onClick（）{
//将x的值增加1
UpdateXValue（1）；
//清除所有计时器和计时器值
currentTime=0；
dCurrentTime=0；
清除超时（dTimer）；
清除超时（cTimer）；
//启动新计时器
cTimer=设置超时（运行计时器，1000）；
}
//此函数用作在单击按钮后运行的计时器
函数RunTimer（）{
currentTime+=1；
//如果上次单击按钮后经过的时间小于“maximumTime”，请再次运行计时器
//否则，停止计时器并启动第二个计时器以减小x的值
如果（当前时间<最大时间）{
cTimer=设置超时（运行计时器，1000）；
}否则{
清除超时（cTimer）；
dTimer=setTimeout（递减值，1000）；
}
}
//此函数用作计时器，以减少第一个计时器完成后运行的X值
函数DecreaseValue（）{
dCurrentTime+=1；
//如果第二个计时器已达到递减值的间隔（dMaximumTime）
//否则继续计时
如果（dCurrentTime>=dMaximumTime）{
//将x的值减少1
UpdateXValue（-1）；
//如果x仍然大于0，请再次运行计时器
//否则计时器就会停止
如果（x>0）{
dCurrentTime=0；
dTimer=setTimeout（递减值，1000）；
}否则{
清除超时（dTimer）；
}
}否则{
dTimer=setTimeout（递减值，1000）；
}
}
//根据发送的值更新X
函数UpdateXValue（valueToAdd）{
x+=要添加的值；
document.getElementById（“xText”）.innerHTML=“X:+X.toString（）；
}