[英]how to integrate spinner page with rest of HTML
我在一个项目中创建了一个微调器页面,但是在重定向到URL时,我难以集成微调器页面。 基本上我有一个乘法程序。 如果答案正确,则提示正确并转到特定的URL( http://stackoverflow.com ),如果答案不正确,则转到另一个URL( http://yahoo.com )。 在实际转到那些页面之前,我希望我创建的微调器在页面加载时首先显示。 有人可以帮我弄这个吗? 提前致谢。
这是我的主要HTML页面(index1.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta charset="ISO-8859-1">
<title>A Multiplication Game</title>
</head>
**<script>
window.addEventListener("loader", function(){
var spinner=document.getElementById("spinner");
document.body.removeChild(load_screen);
});
</script>**
<body >
<span id="mathprompt">What is <span id="num1">8</span> multiplied by
<span id="num2">E</span>?
</span>
<br>
<span id="inputrow">
<input type="text" id="inputfield">
<button id="submitbutton">Submit</button>
</span>
**<div class="loader" id="spinner"></div>**
<p id="response"></p>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
这是我的JavaScript代码(script.js)。 如您所见,我已经将spinner声明为变量,但是不确定是否应该在此处或在HTML中使用该函数:
var num1;
var num2;
var guess;
var answer;
var response;
$(document).ready(function() {
num1=document.getElementById("num1");
num2=document.getElementById("num2");
guess=document.getElementById("inputfield");
response=document.getElementById("response");
**spinner=document.getElementById("spinner");**
$("#submitbutton").click(function(){
checkAnswer();
redirectPage();
});
setNumbers();
});
function setNumbers(){
num1.innerHTML = Math.floor(Math.random() * 10)+1;
num2.innerHTML = Math.floor(Math.random() * 10)+1;
}
function checkAnswer(){
var n1 = parseInt(num1.innerHTML);
var n2 = parseInt(num2.innerHTML);
answer = n1 * n2;
if (parseInt(guess.value) == answer){
response.innerHTML = "Correct!";
} else
response.innerHTML = "Incorrect!";
}
function redirectPage(){
if (parseInt(guess.value) == answer){
window.location.href = "http://stackoverflow.com";
} else{
window.location.href = "http://yahoo.com";
}
}
这是css(stylesheet.css)中微调器的代码:
@charset "ISO-8859-1";
#inputrow{
background-color:#80ff80;
}
#mathprompt{
font-size: 34px;
color:orange;
text-align: center;
}
#response{
font-size: 34px;
color:white;
text-align: center;
}
body {
background-color: #8080c0;
text-align: center;
}
**.loader{
border:16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 240px;
height: 240px;
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
text-align:center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}**
您似乎想检测到外部网站已加载...您无法检测到此情况,在Javascript中,您将无权访问在浏览器的新标签页中加载的外部网站的“已加载”事件。
您所能做的就是显示负载,然后在javascript中执行“重定向”。 当yahoo / stackoverflow页面将被加载时(已在浏览器选项卡中替换了您的网站),您的加载器显然将消失……这是您想要的吗?
您有3种情况:
如果您在嵌入到页面的iframe中加载yahoo / stackoverflow,是的,您可以显示加载并检测页面是否已在iframe中加载(例如,您在iframe中加载了自己的页面,您可以通过JS访问页面内容...在iframe中加载Yahoo / Stackoverflow,然后在JS中无法访问iframe内容时,意味着外部页面已加载...)
如果您要重定向到yahoo / stackoverflow页面,则只能在外部页面开始加载之前显示加载...
您可以尝试预取外部页面,显示加载,然后在加载页面时重定向到该页面...您的浏览器将缓存我认为(检查)的几乎所有html元素...
var myPrefetchedPage; $.ajax({ url: "test.html", cache: false, success: function(html){ myPrefetchedPage = html; } })
在iframe中预加载代码 :
jQuery(document).ready(function ($) {
$app = $('.app');
$app.addClass('loading');
$iframe = $('<iframe>');
$iframe.attr({src: 'http://www.yahoo.fr/'});
$iframe.appendTo($('body'));
// When <iframe> has been loaded, remove loading spinner to reveal <iframe>
// or redirect to the page in your browser tab.
$iframe.load(function() {
$('.app').remove();
// redirect to the real page
window.location.href='http://www.yahoo.fr/';
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.