New version using jQuery
This commit is contained in:
parent
9ae68db510
commit
bd69e684a8
21
index.html
21
index.html
|
|
@ -11,8 +11,27 @@
|
|||
<body id=new_year_body>
|
||||
<div id=new_year_text class=new_year_text_css><span>Bonne Année dans</span></div>
|
||||
<div id=new_year_count class=new_year_count_css>
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td >
|
||||
<div id=t0 class=t_css>a</div>
|
||||
<div id=t1 class=t_css>b</div>
|
||||
<div id=t2 class=t_css>c</div>
|
||||
<div id=t3 class=t_css>d</div>
|
||||
<div id=t4 class=t_css>e</div>
|
||||
<div id=t5 class=t_css>f</div>
|
||||
<div id=t6 class=t_css>g</div>
|
||||
<div id=t7 class=t_css>h</div>
|
||||
</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td >
|
||||
<div id=tsimple class=tsimple_css>pour les nulls: </div>
|
||||
</td>
|
||||
<tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
|
||||
<script type="text/javascript" src="newyear.js" ></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
28
newyear.css
28
newyear.css
|
|
@ -1,5 +1,6 @@
|
|||
body
|
||||
{
|
||||
text-align:center;
|
||||
background:black;
|
||||
}
|
||||
|
||||
|
|
@ -10,9 +11,34 @@ div.new_year_text_css
|
|||
font-size:50px;
|
||||
}
|
||||
|
||||
table.center {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
div.new_year_count_css
|
||||
{
|
||||
text-align:center;
|
||||
color:red;
|
||||
font-size:250px;
|
||||
width:100%;
|
||||
display:block;
|
||||
}
|
||||
|
||||
div.t_css
|
||||
{
|
||||
/*border: solid 1px;*/
|
||||
float: left;
|
||||
font-size:200px;
|
||||
}
|
||||
div.tsimple_css
|
||||
{
|
||||
/*border: solid 1px;*/
|
||||
font-size:20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
div.unit
|
||||
{
|
||||
/*border: solid 1px;*/
|
||||
float: left;
|
||||
color: green;
|
||||
font-size:120px;
|
||||
}
|
||||
|
|
|
|||
91
newyear.js
91
newyear.js
|
|
@ -1,3 +1,15 @@
|
|||
function gup( name )
|
||||
{
|
||||
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
||||
var regexS = "[\\?&]"+name+"=([^&#]*)";
|
||||
var regex = new RegExp( regexS );
|
||||
var results = regex.exec( window.location.href );
|
||||
if( results == null )
|
||||
return "";
|
||||
else
|
||||
return results[1];
|
||||
}
|
||||
|
||||
function i18n(text)
|
||||
{
|
||||
return text;
|
||||
|
|
@ -27,8 +39,8 @@ function GetTimeStr()
|
|||
|
||||
function ClockInTitle()
|
||||
{
|
||||
document.title = i18n("Happy New Year: ") + GetTimeStr();
|
||||
setTimeout("ClockInTitle()",1000);
|
||||
document.title = i18n("Bonne Ann<6E>e ") + GetTimeStr();
|
||||
//setTimeout("ClockInTitle()",1000);
|
||||
}
|
||||
ClockInTitle();
|
||||
|
||||
|
|
@ -45,35 +57,90 @@ function Pause(time)
|
|||
}
|
||||
|
||||
/*Get controls*/
|
||||
var new_year_text = document.getElementById("new_year_text");
|
||||
var new_year_count = document.getElementById("new_year_count");
|
||||
var new_year_text = $("#new_year_text");
|
||||
var new_year_count = $("#new_year_count");
|
||||
var next_year_val;
|
||||
var next_year;
|
||||
var coef=1000;
|
||||
|
||||
var colors;
|
||||
function resetcolors()
|
||||
{
|
||||
colors = [
|
||||
"#3B0B17",
|
||||
"#610B21",
|
||||
"#8A0829",
|
||||
"#B40431",
|
||||
"#DF013A",
|
||||
"#FF0040",
|
||||
"#FE2E64",
|
||||
"#FA5882",
|
||||
"#F7819F",
|
||||
"#F5A9BC"
|
||||
];
|
||||
}
|
||||
|
||||
resetcolors();
|
||||
|
||||
function calcNextYear()
|
||||
{
|
||||
next_year_val = new Date().getFullYear() + 1;
|
||||
next_year = new Date("01/01/" + next_year_val + " 00:00:00");
|
||||
}
|
||||
|
||||
var loop = 0;
|
||||
var phase = 1;
|
||||
function CountDown()
|
||||
{
|
||||
/*Init years*/
|
||||
var now = new Date();
|
||||
var countdown = Math.round((next_year.getTime() - now.getTime()) / coef);
|
||||
/*remove divs*/
|
||||
|
||||
if(countdown < 1 )
|
||||
{
|
||||
new_year_count.innerHTML = "BONNE ANNE !! YOUPI";
|
||||
if(countdown > -60)
|
||||
{
|
||||
calcNextYear();
|
||||
}
|
||||
new_year_count.text("YOUPI !! Bonne Ann<6E>e !!");
|
||||
setTimeout(calcNextYear, 60000);
|
||||
}
|
||||
else
|
||||
{
|
||||
new_year_count.innerHTML = countdown + " s";
|
||||
var displayunit = (gup("unit") == "1") || (gup("unit") == "");
|
||||
var count_S = countdown+"";
|
||||
var count_T = count_S.split("");
|
||||
|
||||
$(".t_css").text("0");
|
||||
|
||||
for(var j=0;j<8;j++)
|
||||
{
|
||||
$("#t"+j).css("color", colors[j]);
|
||||
}
|
||||
new_year_text.css("color", colors[0]);
|
||||
if(loop < 7 && phase > 0)
|
||||
{
|
||||
loop++;
|
||||
colors.unshift(colors.pop());
|
||||
}
|
||||
else
|
||||
{
|
||||
phase = 1;
|
||||
resetcolors();
|
||||
loop = 0;
|
||||
//loop--;
|
||||
//colors.push(colors.shift());
|
||||
}
|
||||
if(phase < 0 && loop < 0)
|
||||
{
|
||||
phase = 1;
|
||||
}
|
||||
for(var i=count_T.length;i>=0;i--)
|
||||
{
|
||||
$("#t"+(8-(count_T.length-i))).text(count_T[i]);
|
||||
}
|
||||
var formatedCounter = "Nouvel an dans: " + FormatDigit(""+(parseInt(countdown/60/60/24))+" jours "+(parseInt(countdown/60/60))%24) + " heures " +FormatDigit(""+(parseInt(countdown/60))%60)+ " minutes " + FormatDigit(""+countdown%60) + " secondes";
|
||||
document.title = formatedCounter;
|
||||
$("#tsimple").text(formatedCounter);
|
||||
|
||||
}
|
||||
setTimeout("CountDown()",250);
|
||||
setTimeout("CountDown()",1000/8);
|
||||
}
|
||||
|
||||
calcNextYear();
|
||||
|
|
|
|||
Loading…
Reference in New Issue