功能:
创建了一个简单的浏览页面导航功能。这就是该功能的工作方式:
1.)当用户点击第1页中的"开始"按钮时,它会将用户导航到第2页
2.)第二页面是游戏页面,在从第一页面导航时,启动倒计时计时器将自动显示,以通知用户游戏将在3秒内启动。因此,导航到第2页时的显示应该有4个单独的幻灯片,每个幻灯片将显示"3"、"2"、"1"one_answers"开始"。
因此,我想寻求帮助,我如何将淡入计数器代码合并到我现有的<script>
中??
感谢
代码:
function fadeInCounter() {
// Define "slides" and the "state" of the animation.
var State = "Start1";
// Global parameters for text.
textSize(20);
fill(139, 69, 19);
var draw = function() {
// Slide 1.
if (State === "Start1") {
background(205, 201, 201);
text("3", 200, 200);
Slide1 -= 5;
if (Slide1 <= 0) {
background(205, 201, 201);
State = "Start2";
}
}
// Slide 2.
if (State === "Start2") {
background(205, 201, 201);
text("2", 200, 200);
Slide2 -= 5;
if (Slide2 <= 0) {
background(205, 201, 201);
State = "Start3";
}
}
// Slide 3.
if (State === "Start3") {
background(205, 201, 201);
text("1", 200, 200);
Slide3 -= 5;
if (Slide3 <= 0) {
background(205, 201, 201);
State = "End";
}
}
// Ending frame.
if (State === "End") {
background(205, 201, 201);
text("Start.", 180, 200);
}
};
}
<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;">
<div id="fadeinCountDown"></div>
<canvas id="canvas" width="300" height="300">
</canvas>
<canvas id="Counter" width="300" height="300">
</canvas>
<img id="roller" style="position:relative; top:1250px;" src="Image/Roller.png">
<img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="Image/Scroll.png">
</div>
下面是一个淡入/淡出计时器。JSFiddle。
此外,我还自由地使用了单个div,而不是多个div。
var count = 3;
function updateTimer(){
if(count > 0){
$("#content").fadeOut('slow', function(){
$("#content").text(count);
$("#content").fadeIn();
count--;
});
}
else if(count == 0){
$("#content").fadeOut('slow', function(){
$("#content").text("Start");
$("#content").fadeIn();
count--;
});
}
else {
$("#content").fadeOut();
clearInterval(interval);
}
}
var interval = setInterval(function(){updateTimer()},2000)
#content{
font-size:26px;
color:red;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>