如何创建一个简单的启动画面/页面？

Question

I want to be able to design/implement a splash screen that originally goes over the home page (index.html).我希望能够设计/实现最初通过主页 (index.html) 的启动画面。 And when the visitor clicks on the enter page, you could say the Splash Screen disappears.当访问者点击进入页面时，您可以说启动画面消失了。 I want to know how to do that without creating another page and without having to redirect.我想知道如何在不创建另一个页面且无需重定向的情况下做到这一点。

I also want to be able to give the user the option to "Do Not Show This Again"...我还希望能够为用户提供“不再显示此内容”的选项...

For example, http://www.runescape.com/例如， http://www.runescape.com/

Thank you very much, Aaron Brewer非常感谢，亚伦布鲁尔

Answer 1

Have the default be that when a user visits a page, it pops up a screen using the Simplemodal jQuery plugin默认情况下，当用户访问一个页面时，它会使用Simplemodal jQuery 插件弹出一个屏幕

When it loads it sets a cookie so that any future pageviews can check for that cookie or not.当它加载时，它会设置一个 cookie，以便将来的任何网页浏览都可以检查该 cookie 是否存在。 If its there, do not show the popup again.如果它在那里，不要再次显示弹出窗口。

Answer 2

I advise having a container that holds both the splash screen (probably a div with the size of the site, assuming it has a defined width and height), and the homepage.我建议使用一个容器来容纳启动画面（可能是具有站点大小的 div，假设它具有定义的宽度和高度）和主页。

The homepage should be hidden ( visibility: hidden ), because some search engines don't really "like" the display: none .主页应该是隐藏的（ visibility: hidden ），因为一些搜索引擎并不真正“喜欢” display: none 。

Then, use a cookie scheme so that when the user already visited the homepage, doesn't have to view the splash screen again.然后，使用 cookie 方案，这样当用户已经访问了主页时，不必再次查看启动画面。

What I've done in the past is via a PHP, read if there is a cookie or not, and if there is (meaning the splash has been seen already) change the class of the splash screen (hiding it) and change the class of the homepage (showing it).我过去所做的是通过 PHP，读取是否有 cookie，如果有（意味着已经看到了飞溅）更改初始屏幕的类（隐藏它）并更改类的主页（显示它）。

Of course this can be done via javascript.当然，这可以通过javascript来完成。

Answer 3

Warning: philosophical rather than practical answer ahead :-)警告：前面的哲学而不是实际的答案:-)

The most satisfactory way to implement a splash screen is to wait a few years until the HTML folk come to their senses and implement a <splash-image> tag that can be put into the <head> section of any page at all.实现启动画面最令人满意的方法是等待几年，直到 HTML 人员意识到并实现一个可以放入任何页面的<head>部分的<splash-image>标签。 It will be purely static (no links from it), completely optional, dismissed with a click or on expiry of a time limit, will support fade/slide/shatter and similar termination effects, won't take considerable effort to have it not look like a popup window, will not have a separate URL and will not mess with search engine robots.它将是纯静态的（没有链接），完全可选，通过单击或在时间限制到期时关闭，将支持淡入淡出/滑动/粉碎和类似的终止效果，不会花费大量精力让它看起来就像一个弹出窗口，不会有单独的 URL，也不会与搜索引擎机器人混淆。 This is the best solution by far.这是迄今为止最好的解决方案。 But it's simply not an option available to anyone.... yet.但这根本就不是任何人都可以使用的选项......还没有。

Despite the comment by Quentin above endorsed by several others, I believe there are useful contexts for splash screens.尽管上面 Quentin 的评论得到了其他几个人的认可，但我相信闪屏有一些有用的上下文。 Some splash screens are NOT just "something pretty" - they can be legitimate content.一些闪屏不仅仅是“漂亮的东西”——它们可以是合法的内容。 I found this question while (somewhat fruitlessly) searching for a way to implement a daily splash screen that could be changed to provide context and emphasis for other website content.我在（有些徒劳地）寻找一种实现每日启动画面的方法时发现了这个问题，该启动画面可以更改为为其他网站内容提供上下文和重点。

When you consider the vast numbers of websites that offer dozens of low-value links that fight for the viewer's attention, 90% of which will never be followed (something even this awesome site is guilty of), it's not hard to imagine that certain pictures could be worth at least a thousand such words.当您考虑到大量提供数十个低价值链接以吸引观众注意力的网站时，其中 90% 将永远不会被关注（即使是这个很棒的网站也有罪），不难想象某些图片至少值一千个这样的词。 On occasions it will even add considerable value for such a picture to be the first thing shown each time a site is visited.有时，在每次访问站点时首先显示这样的图片甚至会增加相当大的价值。

Of course, if you just want a static splash screen to force some marketing message into your viewers' consciousnesses, then please don't - Quentin is right there :-)当然，如果你只是想要一个静态的启动画面来迫使一些营销信息进入你的观众的意识，那么请不要 - Quentin 就在那里 :-)

Answer 4

Here is a sample webpage with a splashscreen and a 'Do Not Show Again' checkbox.这是一个带有启动画面和“不再显示”复选框的示例网页。 When checked, a cookie is created to bypass the splashscreen for the visitor.选中时，会创建一个 cookie 来绕过访问者的启动画面。

<html>
<script language="JavaScript"  type="text/javascript">

function splashTimeout(mymsg,mymsecs)
{
 var myelement = document.createElement("div");
myelement.setAttribute("style","background-color: grey;color:black; width: 450px;height: 220px;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;border: 4px solid black;font-family:arial;font-size:25px;font-weight:bold; align-items: center; justify-content: center; text-align: center;");
 myelement.innerHTML = mymsg;
 setTimeout(function(){
   if (id('bypass').checked){
    //set cookie
    setCookie("splashbox","splashbox")
   }else{
    //clear cookie
    setCookie("splashbox","")
   }
   myelement.parentNode.removeChild(myelement);
 },mymsecs);
 document.body.appendChild(myelement);
}

function getCookie(c_name)
{
var i,x,y,cookies=document.cookie;
  x=cookies.substr(0,cookies.indexOf("="));
  y=cookies.substr(cookies.indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
}

function setCookie(c_name,value)
{
var expiry=new Date();
expiry.setDate(expiry.getDate() + 100);
document.cookie=c_name + "=" + escape(value);
}

function check()
{
var username=getCookie("splashbox");
if (username!=null && username!="")
  {
  return
  }
else
  {
    splashTimeout("Splash 1.0<br><br><br>Welcome to my page...<br><br><br><input type='checkbox' id='bypass'><label for='bypass'>Do not show again</label><br>",5000)
  }
}

function id(myID){return document.getElementById(myID)}
</script>
<html>
<body onload=check()>
This is a sample website that shows a splashscreen when first visited. <br>
If the visitor checks the 'Do not show again' checkbox, 
a cookie is created to bypass the splashscreen.<br>
To demonstrate, click the checkbox when the splash appears.<br>
When you refresh the page, the splash will not appear again.<br><br>
To clear the cookie and reset the splashscreen, click ResetSplash.<br>
<input type=button value=ResetSplash onclick="splashTimeout('Splash 1.0<br><br><br>The splash is reset.<br><input type=checkbox id=bypass hidden><br>',1000)"
</body>
</html>

如何创建一个简单的启动画面/页面？

问题描述

4 个解决方案

解决方案1
5 已采纳 2011-05-15 17:53:06

解决方案2
2 2011-05-15 17:06:47

解决方案3
1 2013-02-17 04:56:40

解决方案4
0 2019-12-21 20:05:32

如何创建一个简单的启动画面/页面？

问题描述

4 个解决方案

解决方案1 5 已采纳 2011-05-15 17:53:06

解决方案2 2 2011-05-15 17:06:47

解决方案3 1 2013-02-17 04:56:40

解决方案4 0 2019-12-21 20:05:32

解决方案1
5 已采纳 2011-05-15 17:53:06

解决方案2
2 2011-05-15 17:06:47

解决方案3
1 2013-02-17 04:56:40

解决方案4
0 2019-12-21 20:05:32