login  Naam:   Wachtwoord: 
Registreer je!
 Forum

opmaak van javascript var (Opgelost)

Offline tomh90 - 27/07/2016 09:39 (laatste wijziging 27/07/2016 15:08)
Avatar van tomh90Nieuw lid beste masters,

ik heb een countdownklok script onderverdeeld in:
- javascript => berekening
- css => style
- html => getallen (dagen/uren/minuten/seconden)

in het javascript staat een datum waar naar toe afgeteld wordt alleen als deze datum is behaald komt er een tekst te staan, ik wil deze alleen opmaken met het CSS bestand, hier kom ik alleen niet uit

Javascript:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // JavaScript Document
  2.  
  3. var current="LET THE GAMES BEGIN";   //-->enter what you want the script to display when the target date and time are reached, limit to 20 characters
  4. var year=2016;    //-->YEAR
  5. var month=8;      //-->MONTH
  6. var day=18;       //-->DAY
  7. var hour=17;      //-->HOUR (24 hour clock)
  8. var minute=00;    //-->MINUTE
  9. var tz=1;        //-->Offset for your timezone in hours from UTC 
  10.  
  11. var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  12.  
  13. function countdown(yr,m,d,hr,min){
  14.     theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
  15.     var today=new Date();
  16.     var todayy=today.getYear();
  17.     if (todayy < 1000) {todayy+=1900;}
  18.     var todaym=today.getMonth();
  19.     var todayd=today.getDate();
  20.     var todayh=today.getHours();
  21.     var todaymin=today.getMinutes();
  22.     var todaysec=today.getSeconds();
  23.     var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
  24.     var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
  25.     var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
  26.     var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
  27.     var dd=futurestring-todaystring;
  28.     var dday=Math.floor(dd/(60*60*1000*24)*1);
  29.     var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
  30.     var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
  31.     var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
  32.     if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
  33.         document.getElementById('count2').innerHTML=current;
  34.         document.getElementById('count2').style.display="block";
  35.         document.getElementById('count2').style.width="390px";
  36.         document.getElementById('dday').style.display="none";
  37.         document.getElementById('dhour').style.display="none";
  38.         document.getElementById('dmin').style.display="none";
  39.         document.getElementById('dsec').style.display="none";
  40.         document.getElementById('days').style.display="none";
  41.         document.getElementById('hours').style.display="none";
  42.         document.getElementById('minutes').style.display="none";
  43.         document.getElementById('seconds').style.display="none";
  44.         document.getElementById('spacer1').style.display="none";
  45.         document.getElementById('spacer2').style.display="none";
  46.         return;
  47.     }
  48.     else {
  49.         document.getElementById('count2').style.display="none";
  50.         document.getElementById('dday').innerHTML=dday;
  51.         document.getElementById('dhour').innerHTML=dhour;
  52.         document.getElementById('dmin').innerHTML=dmin;
  53.         document.getElementById('dsec').innerHTML=dsec;
  54.         setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
  55.     }
  56. }


CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. body {
  5. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009cde+0,002d59+100 */
  6. background: rgb(0,156,222); /* Old browsers */
  7. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  8. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOWNkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDJkNTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  9. background: -moz-linear-gradient(top,  rgb(0,156,222) 0%, rgb(0,45,89) 100%); /* FF3.6-15 */
  10. background: -webkit-linear-gradient(top,  rgb(0,156,222) 0%,rgb(0,45,89) 100%); /* Chrome10-25,Safari5.1-6 */
  11. background: linear-gradient(to bottom,  rgb(0,156,222) 0%,rgb(0,45,89) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  12. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009cde', endColorstr='#002d59',GradientType=0 ); /* IE6-8 */
  13. }
  14.  
  15. @font-face {
  16.     font-family: 'GoodPro-Normal';
  17.     src: url('GoodPro-Normal.eot');
  18.     src: url('GoodPro-Normal.eot?#iefix') format('embedded-opentype'),
  19.          url('GoodPro-Normal.woff') format('woff'),
  20.          url('GoodPro-Normal.ttf') format('truetype'),
  21.          url('GoodPro-Normal.svg#GoodPro-Normal') format('svg');
  22.     font-weight: normal;
  23.     font-style: normal;
  24. }
  25.  
  26.  
  27. #table {
  28.     width: 100%;
  29.     border: none;    
  30.     margin: 0px;
  31.     position: relative;    
  32. 	height: 100%;
  33.     left: 0px;        
  34. }
  35.  
  36. .numbers {
  37. 	border: none; 
  38.     padding: 0px;
  39.     text-align: center; 
  40. 	font-family: 'GoodPro-Normal';
  41. 	font-size: 624px;
  42.     font-style: normal;   
  43.     color: #ffffff; 
  44. }
  45.  
  46. .title {    
  47.     border: none;    
  48.     padding: 0px;
  49.     text-align: center; 
  50. 	font-family: 'GoodPro-Normal';
  51.     font-size: 78px;
  52.     text-transform: uppercase;
  53.     letter-spacing: 12px;   
  54.     color: #ffffff;       
  55. }
  56.  
  57. .hide {
  58. 	display: none;
  59. 	width:0px;
  60. }


HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  3. <link rel="stylesheet" type="text/css" href="css/style.css">
  4. <script src="js/clock.js"></script>
  5.  
  6. </head>
  7.  
  9. <table id="table" border="0">
  10.     <tr id="spacer1">
  11.   		<div id="count2" ></div>
  12.         <td align="center" ><div class="numbers" id="dday"></div><div class="title" id="days">Days</div></td>
  13.         <td align="center" ><div class="numbers hide" id="dhour"></div><div class="title hide" id="hours">Hours</div></td>
  14.         <td align="center" ><div class="numbers hide" id="dmin"></div><div class="title hide" id="minutes">Minutes</div></td>
  15.         <td align="center" ><div class="numbers hide" id="dsec"></div><div class="title hide" id="seconds">Seconds</div></td>
  16.     </tr>       
  18.  
  19. </body>
  20.  
  21. <body onload="countdown(year,month,day,hour,minute)">

mod edit: code tags

7 antwoorden

Gesponsorde links
Offline Wijnand - 27/07/2016 13:57
Avatar van Wijnand Moderator Welke tekst komt er te staan?
Offline Thomas - 27/07/2016 15:05
Avatar van Thomas Moderator Werkt prima hier met wat aanpassingen:
- zorg dat je HTML document kloppend is, voeg een <!DOCTYPE html> en <html> tag toe, en tevens een </html> tag aan het einde
- je body-tag dient een concrete doel-tijd te hebben, dus bijvoorbeeld countdown(2016,7,27,15,00) en niet countdown(year,month,day,hour,minute); houd hierbij ook rekening met het feit dat dit UTC-tijd is (geloof ik), deze loopt een uur achter ten opzichte van CEST (de "Europe/Amsterdam" tijdszone)
- verwijder de "hide" klasses om de andere velden ook te zien, nu zie je enkel de "Days" teller, misschien kun je je JavaScript zo uitbreiden dat deze tijdseenheden verdwijnen als deze afgelopen zijn?

Gelieve in het vervolg [code] tags te gebruiken.
Offline tomh90 - 27/07/2016 16:04
Avatar van tomh90 Nieuw lid De klok doet het goed, alleen het stuk wanneer deze klaar is met tellen

Dan komt er in niet opgemaakte tekst "LET THE GAMES BEGIN" te staan. Dit zou opgemaakt moeten worden door het CSS bestand.
Offline Wijnand - 27/07/2016 16:53 (laatste wijziging 27/07/2016 16:58)
Avatar van Wijnand Moderator In CSS:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #count2 {
  2.     background-color:red;
  3.     /* overige css bende */
  4. }



Overigens is je HTML ook niet goed. Nu staat er een <tr> met daarin een <div>. Dat mag niet :-).
Zo zitten er wel meer dingen in die eigenlijk niet mogen en fouten kunnen opleveren op verschillende browsers.
Offline tomh90 - 28/07/2016 10:15 (laatste wijziging 28/07/2016 10:15)
Avatar van tomh90 Nieuw lid nouja, de klok doet het goed wil niet zeggen dat alles netjes is geschreven 

ik krijg de tekst alleen niet goed uitgelijnd, blijft beetje linksboven hangen....iemand nog een idee.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #count2 {
  2. 	border: none;
  3.  
  4.    	padding: 0px;
  5.  
  6.     	text-align: center;
  7.  
  8. 	font-family: 'GoodPro-Normal';
  9.  
  10. 	font-size: 98px;
  11.  
  12.    	font-style: normal;
  13.  
  14.    	color: #ffffff;
  15. }
Offline Thomas - 28/07/2016 12:54
Avatar van Thomas Moderator Je stelt een heleboel CSS-meuk in via JavaScript, als je deze nu eens verplaatst naar CSS en enkel een class toevoegt? Hoe dan ook, wellicht helpt het als je een margin toevoegt met waarde "0 auto", dit zorgt ervoor dat de div horizontaal gecentreerd wordt, als dit je doel is.
Offline Wijnand - 28/07/2016 13:04
Avatar van Wijnand Moderator Heb je de pagina ergens online staan?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.397s