如何在使用jQuery之后更改文本？ [英] How can I change text after time using jQuery?
问题描述
我之前从未使用过jQuery，我想问一下如何做一些对您而言可能看起来很简单的事情。我已经环顾四周，但找不到答案。
好吧，说我有一个HTML文档;
< HTML>
< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< / head>
< body>
< h1> Hello world！< / h1>
< p>以下是一条讯息：< span id =message>< / span>< / p>
< / body>
< / html>
我想问的是如何创建一个字符串列表，并且当页面加载第一个显示一个，并在指定时间的随机时间间隔之后变为下一个，等等，也许大约5条消息之后，它将把用户重定向到不同的页面。
如果我的信息是：
您好！
这是一个网站！
您现在将被重定向。
你准备好了吗？
您现在被重定向...
在我的真实网站中，它会很好如果消息可以从用户隐藏（在页面上，但在css / js文件中就可以），并且当下一条消息进入时它具有很好的淡入淡出效果。
有人可以向我解释如何工作吗？
我只想补充一点，我对jQuery没有经验（只有一个在JavaScript中很少），我不知道脚本/函数的位置。有人可以告诉我怎么做，或者链接到一个初学者指南，告诉我这是什么？
这是一种方法 jsfiddle demo ）：
函数nextMsg（）{
if（messages.length == 0）{
//一旦没有更多消息，做任何你想做的事
alert（redirecting ）;
} else {
//改变消息内容，淡入，等待，淡出并继续下一条消息
$（'＃message'）。html（messages.pop（）） .fadeIn（500）.delay（1000）.fadeOut（500，nextMsg）;
}
};
//要显示的消息列表
var messages = [
Hello！，
这是一个网站！，
你现在要去，
你准备好了吗？，
你现在被重定向了......
。.reverse（）;
//最初隐藏消息
$（'＃message'）。hide（）;
//开始动画
nextMsg（）;
稍加修改后，您应该可以自定义每封邮件的时间间隔。
I've never used jQuery before, and I would like to ask how to do something that may seem simple to you people. I've looked around but couldn't find an answer.
Okay, so say I have a HTML document;
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Here is a message: <span id="message"></span></p>
</body>
</html>
What I want to ask is how to create a list of strings, and when the page loads the first one is displayed, and after a random interval of specified time it changes to the next one, and so on, and maybe about 5 messages later it would redirect the user to a different page.
If my messages were:
Hello!
This is a website!
You are now going to be redirected.
Are you ready?
You're now being redirected...
In my real site it would be nice if the messages could be hidden from the user (on the page, but in a css/js file it would be fine) and that it had a nice sort of fade effect as the next message came in.
Can someone explain to me how to work this?
I'd just like to add, I have no experience in jQuery (only a little in JavaScript) and I have no idea where the scripts/functions go. Could someone show me how, or link to a beginners guide that shows me this?
Here is one way to do it (jsfiddle demo):
function nextMsg() {
if (messages.length == 0) {
// once there is no more message, do whatever you want
alert("redirecting");
} else {
// change content of message, fade in, wait, fade out and continue with next message
$('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg);
}
};
// list of messages to display
var messages = [
"Hello!",
"This is a website!",
"You are now going to be redirected.",
"Are you ready?",
"You're now being redirected..."
].reverse();
// initially hide the message
$('#message').hide();
// start animation
nextMsg();
with a little bit modification, you should be able to customize the interval for each message.
这篇关于如何在使用jQuery之后更改文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
