gpt4 book ai didi

jquery - 如何在 jQuery 中获取用户输入并在其中使用?

转载 作者:太空宇宙 更新时间:2023-11-04 02:10:01 24 4
gpt4 key购买 nike

我想获取用户输入并在同一个 jQuery 中处理该输入。我该怎么做?

例如,我在 jQuery 中有一个球弹跳动画,我想询问用户球必须弹跳多少次,然后根据他/她的输入,球必须弹跳。我怎样才能做到这一点?我知道如何获取值,但我不知道如何处理该值。

为了获得值(value),我使用:

$("button:#Get").click(function () {

$('input:number').val();

});

这是我尝试使用该函数的示例,

$(function() {

var time = 500;
var bounces = 20;
var top_bounce = 10;

function bounceDown(){
$("#ball").animate({left:10, top: bounces*10}, time, function(){
bounceUp();
});
};



function bounceUp() {
$("#ball").animate({top: top_bounce}, time);
top_bounce = top_bounce + 10;
};

function shadowUp(){
$("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time,
function(){
shadowDown();
});
};

function shadowDown() {
$("#shadow").animate({width: 0, height: 0, left: 15, top: bounces*15, opacity: 0}, time);
};

function finalDown(){
$("#ball").animate({left:10, top: bounces*10}, time);
};

function finalShadow(){
$("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time);
};

$('#Get').click(function () {
for (var i = 0; i < bounces; i++){
setTimeout(function(){
bounceDown();
shadowUp();
}, time*2*i);
setTimeout(function(){
finalDown();
finalShadow();
}, bounces*1000);
};
});



});
body {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}

#container {
position: absolute;
left: 50%;
width: 500px;
height: 600px;
}

#ball {
width: 100px;
height: 100px;
position: absolute;
background-color: #e65454;
border-radius: 50%;
}

#shadow {
position: absolute;
height: 5px;
width: 100px;
bottom:0;
background: radial-gradient(ellipse at center, rgba(91,91,91,1) 0%,rgba(142,142,142,0.84) 16%,rgba(227,228,229,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#00e3e4e5',GradientType=1 );
opacity:0;
}

div.inp{
position:fixed;
bottom:35px;
left:30%;
width:100%;
}

input[type=number] {
width: 200px;
padding: 12px 10px;
margin: 0;
box-sizing: border-box;
border: 2px solid #e65454;
border-radius: 8px;
outline:0;
}

button {
background-color: transparent;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
outline:0;
border: 2px solid #e65454;
}

button:hover {
background-color: #e65454;
color: black;
border: 2px solid transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div class="inp">
<input type="number" value="How Many Bounces?"></input>
<button id="Get">Set</button>
<button id="Reset">Reset</button>
</div>
<div id="container">
<div id="ball"></div>
<div id="shadow"></div>
</div>

现在我想向用户询问值,并根据该值,“弹跳”应该在 jquery 中更新。

最佳答案

定义一个函数而不是匿名函数。

$(function() {
//function body
}

定义为

function bounce(){
//function body
}

您还可以传递确定编号的变量。球的反弹,在你的情况下是“反弹”。

function bounce(var bounces){
//function body
//write everything that you have written in your function except var bounces
//as it is taken from input
}

然后你就可以在你的onClick方法中调用上面的函数了。正如@Franco 所说,您使用的选择器不正确。所以你可以写类似的东西

<input type="number" id="number" value="How Many Bounces?"></input>

以下将是你的最终js

$("#Get").click(function () {
bounces = $('#number').val();
bounce(bounces);
});

function bounce(bounces) {

var time = 500;
var top_bounce = 10;



function bounceDown(){
$("#ball").animate({left:10, top: bounces*10}, time, function(){
bounceUp();
});
};



function bounceUp() {
$("#ball").animate({top: top_bounce}, time);
top_bounce = top_bounce + 10;
};

function shadowUp(){
$("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time,
function(){
shadowDown();
});
};

function shadowDown() {
$("#shadow").animate({width: 0, height: 0, left: 15, top: bounces*15, opacity: 0}, time);
};

function finalDown(){
$("#ball").animate({left:10, top: bounces*10}, time);
};

function finalShadow(){
$("#shadow").animate({width: 100, height: 5, left: 10, top: bounces*15, opacity: 1}, time);
};


for (var i = 0; i < bounces; i++){
setTimeout(function(){
bounceDown();
shadowUp();
}, time*2*i);
setTimeout(function(){
finalDown();
finalShadow();
}, bounces*1000);
};




};

希望这对您有所帮助。

关于jquery - 如何在 jQuery 中获取用户输入并在其中使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39927009/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com