功能性:
创建了一个简单的浏览页面导航功能。这就是函数应该如何工作:
1。)当用户点击第1页的“开始”按钮时,它会将用户导航到第2页
2。)第二页是一个游戏页面,当从第一页导航时,开始倒数计时器将自动显示以通知用户游戏在3秒内开始。因此,导航到第2页时的显示应该有4个单独的幻灯片,每个幻灯片将显示“3”,“2”,“1”和“开始”。
因此我想请求帮助如何将淡入计数器代码合并到我现有的<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>
答案 0 :(得分:0)
以下是淡入/淡出计时器。 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>