我有一个带有启动画面的WinJS应用程序,因为我们知道它持续一段时间, 我们假设三秒钟, 我该怎么办才能让它持续五秒钟呢?
编辑:要分享我的代码
.HTML:刚刚将此代码添加到我的隐藏我的内容div或主div中,添加了“隐藏”属性
头
<script src="js/extendedSplash.js"></script>
体
<!-- SPLASH SCREEN DIV-->
<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
<img id="extendedSplashImage" src="images/splashscreen.png" alt="Splash screen image" />
<progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
</div>
<!-- END SPLASH SCREEN DIV-->
.CSS文件:将下一个代码添加到样式表文件
/*SPLASH SCREEN FORMAT*/
.extendedSplashScreen {
background-color:#ea0000;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}
.extendedSplashScreen.hidden {
display: none;
}
#extendedSplashImage {
position: absolute;
}
#extendedSplashDescription
{
position: absolute;
width: 100%;
top: calc(100% - 140px);
text-align: center;
}
#extendedSplashText
{
font-family: 'Segoe UI Semilight';
font-size: 11pt;
text-align: center;
width: 75%;
color: #ffffff;
}
/*END SPLASH SCREEN FORMAT*/
.JS档案 创建一个JS文件(extendedSplash.js)
(function () {
"use strict";
var splash = null; // Variable to hold the splash screen object.
var dismissed = false; // Variable to track splash screen dismissal status.
var coordinates = { x: 0, y: 0, width: 0, height: 0 }; // Object to store splash screen image coordinates. It will be initialized during activation.
function loadSplashScreen(args) {
// Retrieve splash screen object
splash = args.detail.splashScreen;
// Listen for window resize events to reposition the extended splash screen image accordingly.
// This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
window.addEventListener("resize", onResize, false);
// Retrieve the window coordinates of the splash screen image.
coordinates = splash.imageLocation;
// Register an event handler to be executed when the splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);
// Create and display the extended splash screen using the splash screen object.
show(splash);
// Listen for window resize events to reposition the extended splash screen image accordingly.
// This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
window.addEventListener("resize", onResize, false);
}
// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
var extendedSplashImage = document.getElementById("extendedSplashImage");
// Position the extended splash screen image in the same location as the system splash screen image.
extendedSplashImage.style.top = splash.imageLocation.y + "px";
extendedSplashImage.style.left = splash.imageLocation.x + "px";
extendedSplashImage.style.height = splash.imageLocation.height + "px";
extendedSplashImage.style.width = splash.imageLocation.width + "px";
// Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
/*
var extendedSplashProgress = document.getElementById("extendedSplashProgress");
extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
*/
// Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}
// Updates the location of the extended splash screen image. Should be used to respond to window size changes.
function updateImageLocation(splash) {
if (isVisible()) {
var extendedSplashImage = document.getElementById("extendedSplashImage");
// Position the extended splash screen image in the same location as the system splash screen image.
extendedSplashImage.style.top = splash.imageLocation.y + "px";
extendedSplashImage.style.left = splash.imageLocation.x + "px";
extendedSplashImage.style.height = splash.imageLocation.height + "px";
extendedSplashImage.style.width = splash.imageLocation.width + "px";
// Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
/*
var extendedSplashProgress = document.getElementById("extendedSplashProgress");
extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
*/
}
}
// Checks whether the extended splash screen is visible and returns a boolean.
function isVisible() {
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
return !(WinJS.Utilities.hasClass(extendedSplashScreen, "hidden"));
}
// Removes the extended splash screen if it is currently visible.
function remove() {
if (isVisible()) {
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
}
}
function onResize() {
// Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
if (splash) {
// Update the coordinates of the splash screen image.
coordinates = splash.imageLocation;
updateImageLocation(splash);
}
}
function onSplashScreenDismissed() {
// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
dismissed = true;
// Tear down the app's extended splash screen after completing setup operations here...
// In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
//document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
}
//namespace created for accessing to certain methods created inside this JS file from external JS
WinJS.Namespace.define("ExtendedSplash", {
isVisible: isVisible,
remove: remove,
loadSplashScreen: loadSplashScreen
});
})();
在default.js中查找函数或
部分args.detail.kind === activation.ActivationKind.launch
并添加此
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
ExtendedSplash.loadSplashScreen(args); //loads extended splash screen
// Use setPromise to indicate to the system that the splash screen must not be torn down
// until after processAll and navigate complete asynchronously.
args.setPromise(WinJS.UI.processAll().then(function(){
setTimeout(function () {
ExtendedSplash.remove(); //removes splash screen
document.getElementById("content").removeAttribute("hidden"); //shows main screen (content and footer)
document.getElementById("footer").removeAttribute("hidden");
}, 4000);
}));
}
在我的情况下,我添加了4秒的延迟,然后我隐藏了我的splashScreen
ExtendedSplash.remove();
然后我展示了我的两个主要Div(内容和页脚)
的document.getElementById( “内容”)的removeAttribute( “隐藏”);。
//显示主屏幕(内容和页脚) 的document.getElementById( “页脚”)的removeAttribute( “隐藏”);