[Résolu] Custom Lockscreen diapo : problème HTML

Geiss

Par ,
dans iPhone

 Share

Recommended Posts

Geiss Newbie

Geiss

Posté(e)
Posté(e)

Bonjour,

Pour mon premier post ici (forum que je visite cependant très souvent), un problème de customisation.

J'ai bricolé un LockBackground.html pour avoir un diapo en Lockscreen, cela fonctionne parfaitement, cependant, pour mieux profiter du Lockscreen, j'ai voulu changer de place la date et l'heure. J'ai alors supprimé la date et l'heure existante dans les fichiers en passant en ssh, puis bricolé un nouveau code en m'inspirant de celui d'un thème existant.

Les deux codes fonctionnent...séparément, ce sont deux Lockbackground.

Mes connaissances quasi inexistantes en html ne me permettent pas d'assembler ces deux codes...d'où ma demande d'aide !

Code du diapo :

<?xml version="1.0" encoding="UTF-16"?>

<html><head>

<base href="Private/"/>

<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>

body {

background-color: black;

margin: 0;

padding: 1px 0 0 0;

height: 480px;

width: 320px;

}

img {

-webkit-transition-property: opacity;

-webkit-transition-duration: 2s;

position: absolute;

width: 320px;

height: 480px;

}

img.fade-out {

opacity: 0;

}

img.fade-in {

opacity: 1;

}

</style>

</head><body style="color: black">

<img id="one"/>

<img id="two"/>

<script>

var images = ['1.png', '2.png', '3.png', '4.png'];

var index = 0;

var toggle = 0;

var fade_one = one;

var fade_two = two;

var fade_toggle = ['out', 'in'];

fade_one.src = images[index];

index = (index + 1) % images.length;

fade_two.src = images[index];

var fade = function () {

fade_one.className = 'fade-' + fade_toggle[toggle];

toggle = (toggle + 1) % fade_toggle.length;

fade_two.className = 'fade-' + fade_toggle[toggle];

index = (index + 1) % images.length;

setTimeout(function () { if(fade_one.className == 'fade-out') { fade_one.src = images[index]; } else { fade_two.src = images[index]; } }, 2000);

setTimeout(fade, 3000);

};

fade();

</script>

</body></html>

Code heure + date :

<?xml version="1.0" encoding="UTF-16"?>

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<meta http-equiv="refresh" content="900; url=Wallpaper.html"/></head>

<head><title>Upside Right</title></head><style>

}#Layer {

width: 321px;

height: 481px;

position: absolute;

top: -1px;

right: 0px;

down: 0px;

left: -1px;

}

.stretch {

width:100%;

height:100%;

}

body {

margin: 0;

}

SPAN#clock {

font-family: Heiti TC;

font-weight:bold;

color: #ffffff;

text-shadow: 0px 0px 8px #fff;

font-size: 40px;

text-align: left;

opacity: 0.9;

}

SPAN#ampm {

font-family: Heiti TC;

font-weight:bold;

color: #ffffff;

text-shadow: 0px 0px 10px #fff;

font-size: 20px;

text-align: left;

text-transform: uppercase;

opacity: 0.7;

display:

}

TD#vdate {

float:top;

font-family: Heiti TC;

font-weight: bold;

text-align: right;

color:#ffffff;

text-shadow: 0px 0px 5px #fff;

font-size: 33px;

opacity: 0.9;

text-transform: uppercase;

-webkit-transform: rotate(-90deg);

}

TD#vweek {

font-family: Heiti TC;

font-weight:bold;

color: #ffffff;

text-shadow: 0px 0px 5px #fff;

font-size: 23px;

text-align: left;

text-transform: uppercase;

opacity: 0.9;

-webkit-transform: rotate(-90deg);

}

TD#vmonth {

font-family: Heiti TC;

font-weight:bold;

color: #ffffff;

text-shadow: 0px 0px 5px #fff;

font-size: 25px;

text-align: left;

text-transform: uppercase;

opacity: 0.7;

-webkit-transform: rotate(-90deg);

}

TD#vyear {

float:top;

font-family: Heiti TC;

font-weight: bold;

text-align: right;

color:#ffffff;

font-size: 26px;

text-shadow: 0px 0px 5px #fff;

opacity: 0.7;

-webkit-transform: rotate(-90deg);

display: absolute;

}

<script type="text/javascript">

function updateClock ( )

{

var currentHours_name_array = new Array ("12", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12")

var currentMinutes_name_array = new Array ("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28","29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "00")

var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );

var currentMinutes = currentTime.getMinutes ( );

var currentSeconds = currentTime.getSeconds ( );

<!-- Pad the minutes and seconds with leading zeros, if required -->

//currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;

currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

<!-- Defines either "AM" or "PM" as appropriate -->

var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

<!-- Convert hours component of "12" to "24" -->

currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

<!-- Convert hours component from "0" to "12 at Midnight-->

currentHours = ( currentHours == 0 ) ? 12 : currentHours;

<!-- Compose the string for display-->

var currentTimeString = currentHours + ":" + currentMinutes;

<!-- Update the time display-->

document.getElementById("clock").firstChild.nodeValue = currentTimeString;

}

function amPm ( )

{

var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );

<!-- Defines either "AM" or "PM" as appropriate -->

var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

<!-- Convert hours component of "12" to "24" -->

currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

<!-- Convert hours component from "0" to "12 at Midnight-->

currentHours = ( currentHours == 0 ) ? 12 : currentHours;

<!-- Compose the string for display-->

var currentTimeString = timeOfDay;

<!-- Update the string for display of AM/PM-->

document.getElementById("ampm").firstChild.nodeValue = currentTimeString;

}

function calendarDate ( )

{

var this_date_name_array = new Array ("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27" ,"28", "29" ,"30", "31")

var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

var this_month_name_array = new Array("January","February","March","April","May","Jun","July","August","September","October","November","December")

var this_date_timestamp = new Date()

var this_weekday = this_date_timestamp.getDay()

var this_date = this_date_timestamp.getDate()

var this_month = this_date_timestamp.getMonth()

var this_year = this_date_timestamp.getYear()

if (this_year < 1000)

this_year+= 1900;

if (this_year==101)

this_year=2001;

var month = this_date_timestamp.getMonth();

document.getElementById("date").firstChild.nodeValue = this_date_name_array[this_date]

document.getElementById("calendar_weekday").firstChild.nodeValue = this_weekday_name_array[this_weekday]

document.getElementById("calendar_month").firstChild.nodeValue = this_month_name_array[this_month]

document.getElementById("calendar_year").firstChild.nodeValue = this_year

}

</script>

<body bgcolor="Transparent" onload="onLoad()">

<table style="position: absolute; top: 25px; left: 15px; width: 320x; height: 461px; z-index: 14;">

<tr align="center" valign="top" border="0" cellpadding="0">

<td height="0" valign="top" margin-left="0">

<span id="clock">

<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script>

</span>

</td>

</tr>

</table>

<table style="position: absolute; top: 70px; left: -10px; width: 150px; height: 461px;">

<tr align="center" valign="top" border="0" cellpadding="0">

<td height="12" valign="top" margin-left="20" >

<span id="ampm">

<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>

</span>

</td>

</tr>

</table>

<table style="position: absolute; top: 130px; left: 354px; width: 320px; height: 480px;">

<td id=vdate width="254" height="12" align="center" valign="top" margin-left="20">

<span id="date">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

</td>

</tr>

</table>

<table style="position: absolute; left: 328px; top: -120px; width: 320px; height: 480px;">

<td id=vweek width="254" height="12" align="center" valign="top" margin-left="20">

<span id="calendar_weekday">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

</td>

</tr>

</table>

<table style="position: absolute; top: -195px; left: 355px; width: 320px; height: 480px;">

<tr>

<td id=vmonth width="254" height="12" align="center" valign="top" margin-left="20">

<span id="calendar_month">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

</td>

</tr>

</table>

<table style="position: absolute; top: 175px; left: 355px; width: 320px; height: 480px">

<tr>

<td id=vyear width="254" height="12" align="center" valign="top" margin-left="20">

<span id="calendar_year">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

</td>

</tr>

</table>

</body>

</html>

Merci pour votre aide :)

Lien vers le commentaire
Partager sur d’autres sites
stiker33 Newbie

stiker33

Posté(e)
Posté(e)

L'équipe d'iPhone4.fr est ravie d'avoir pu vous aider. N'hésitez pas à ouvrir un nouveau sujet dans les forums du Support Technique si vous avez d'autres questions.

Merci et à bientôt sur iPhone4.fr

Lien vers le commentaire
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.
 Share
Aller sur la liste des sujets