2013-04-24 166 views
0

我想弄清楚如何讓每個人每次進入我的網站時顯示一次某個div。我已經看到了使用JavaScript和PHP做這件事的兩種方式,但沒有成功。需要一個div,每個會話只顯示一次

這是我的代碼,我想(如果可能的話)#spinner div(以及其中的所有內容)在每個會話中顯示一次。

<body> 
****This part would only be displayed once**** 
<div id="spinner" style="display: none;"> 
<div class="sketch"> 
<canvas id="canvas" width="1280" height="224"></canvas> 
<script>var canvas = document.getElementById('canvas') 
    , context = canvas.getContext('2d') 
    , img = new Image() 
    , w 
    , h 
    , offset 
    , glitchInterval; 

img.src = 'http://www.bccustommade.com/images/loading.png'; 
img.onload = function() { 
    init(); 
window.onresize = init; 
}; 

var init = function() { 
clearInterval(glitchInterval); 
canvas.width = w = window.innerWidth; 
offset = w * .1; 
canvas.height = h = ~~(175 * ((w - (offset * 2))/img.width)); 
glitchInterval = setInterval(function() { 
    clear(); 
    context.drawImage(img, 0, 110, img.width, 175, offset, 0, w - (offset * 2), h); 
    setTimeout(glitchImg, randInt(250, 1000)); 
}, 500); 
}; 

var clear = function() { 
context.rect(0, 0, w, h); 
context.fill(); 
}; 

var glitchImg = function() { 
for (var i = 0; i < randInt(1, 13); i++) { 
    var x = Math.random() * w; 
    var y = Math.random() * h; 
    var spliceWidth = w - x; 
    var spliceHeight = randInt(5, h/3); 
    context.drawImage(canvas, 0, y, spliceWidth, spliceHeight, x, y, spliceWidth, spliceHeight); 
    context.drawImage(canvas, spliceWidth, y, x, spliceHeight, 0, y, x, spliceHeight); 
} 
}; 

var randInt = function(a, b) { 
return ~~(Math.random() * (b - a) + a); 
};</script> 
</div> 
<div class="loading"> 
    <div class="loading-dot"></div> 
    <div class="loading-dot"></div> 
    <div class="loading-dot"></div> 
<div class="loading-dot"></div> 
</div> 
</div> 
****This part would only be displayed once**** 

+0

你可以縮短代碼的牆到相關的東西,你試過什麼? – 2013-04-24 07:04:09

+0

我會給我一秒,我已經嘗試了一些PHP教程,但沒有工作 – Crazycriss 2013-04-24 07:05:41

+0

你看看https://developer.mozilla.org/en-US/docs/DOM/Storage – 2013-04-24 07:16:30

回答

0

你需要通過JavaScript調用這個PHP腳本或閱讀PHP瓦爾在JavaScript直接在此頁面,但我推薦某種後臺調用。

<?php 
session_start(); 

if(!isset($_SESSION['spinner']) { 
    // Render content 
} 

// Continue with page or other sutff 
?> 
+0

謝謝,我會盡快嘗試這個:) – Crazycriss 2013-04-24 07:41:27

0

寫這些內容,直到一些會話具有值爲true。一旦顯示,將會話值設置爲true。

我不熟悉PHP語法,但頁面邏輯會這樣。

if(session contains key "first_time" && session["first_time"] == false){ 

print "your code here"; 
// set session value to true 
session["first_time"] = true; 

} 

如果你想這是在所有頁面上顯示,包括在每一個PHP頁面