inserimento javascript in pagina html

Angelo93

Nuovo Utente
17 Nov 2010
4
0
0
ciao a tutti raga ho bisogno di un aiuto sono un nuovo iscritto mi è sembrato un forum pieno di persone colte e gentili.
ora vi pongo il mio problema:
sto facendo un sito e vorrei inserire dei gadget come data e ora contatore ecc...
ora vorrei sapere come fare per inserirlo nella pagina..
possibilmente passo passo se non chiedo troppo..grazie in anticipo attendo risposte
 
Solitamente quando vuoi inserire un gadget ti fornisce il codice per inserirlo. Quindi basta che tu modifichi il sorgente della pagina, e copi il codice dove vuoi che appaia lo script in questione. Hai in mente qualche gadget in particolare?
 
uso dreamweaver mx 2004
1: Copy and paste the following style declaration in the HEAD section of your page:
Codice:
<style type="text/css">
.calShadow{
background-color:black;
position:absolute;
top:10px;
left:10px;
-moz-opacity:.5;
filter:alpha(opacity=50);
}

.calMain{
width:275px;
position:absolute;
left:0px;
top:0px;
background-color:#00436e;
border-width:2px;
border-style:outset;
border-color:#0084d8;
padding:3px;
}

.calMonthYear{
font-size:12px;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
background-color:#00436e;
}

.calHdr{
width:35px;
font-size:12px;
font-weight:bold;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
padding:1px;
background-color:#00436e;
}

.calToday{
width:35px;
font-size:12px;
font-family:sans-serif;
font-weight:bold;
color:red;
cursor:default;
border-width:1px;
border-style:inset;
border-color:gray;
padding:1px;
background-color:#ffedcf;
}

.calText{
width:35px;
font-size:12px;
font-family:sans-serif;
color:black;
cursor:default;
border-width:1px;
border-style:inset;
border-color:gray;
padding:1px;
background-color:#ffedcf;
}
</style>
2: Copy and paste the following script in the HEAD section of your page:
Codice:
<script language="javascript">
var w3c=(document.getElementById)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns4=(document.layers)?true:false;
var ns6=(w3c && !document.all)?true:false;
var mi=0; var yi=0;
var calA=new Array();
var cal_m, cal_y, cal, calS, now;

function setMonth(incr){
if(!ns4){
mi+=(incr)?1:-1;
if(mi>11)mi=0;
if(mi<0)mi=11;
now.setMonth(mi);
updateCalender();
}}

function setYear(incr){
if(!ns4){
yi+=(incr)?1:-1;
if(yi>50)yi=0;
if(yi<0)yi=50;
now.setFullYear(yi+1970);
updateCalender();
}}

function updateCalender(){
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
dim[1]=(((now.getFullYear()%100!=0)&&(now.getFullYear()%4==0))||(now.getFullYear()%400==0))?29:28;
cal_m.innerHTML=['January','February','March','April','May','June','July','August','September','October','November','December'][mi];
cal_y.innerHTML=yi+1970;
var offsetD=new Date();
offsetD.setFullYear(yi+1970);
offsetD.setMonth(mi);
offsetD.setDate(1);
offsetD=offsetD.getDay()+1;
for(i=1;i<=42;i++){
if((i-offsetD>=0)&&(i-offsetD<dim[mi])){
calA[i].innerHTML=i-offsetD+1;
calA[i].i=i;
calA[i].o=offsetD;
calA[i].className=((now.ref.getDate()==i-offsetD+1)&&(now.ref.getFullYear()==now.getFullYear())&&(now.ref.getMonth()==now.getMonth()))?"calToday":"calText";
}else{
calA[i].className="calText";
calA[i].innerHTML='*';
}}}

window.onload=function(){
if(!ns4){
for(i=1;i<=42;i++)calA[i]=(ie4)?document.all['cal'+i]:document.getElementById('cal'+i);
cal_m=(ie4)?document.all["calender_m"]:document.getElementById("calender_m");
cal_y=(ie4)?document.all["calender_y"]:document.getElementById("calender_y");
cal=(ie4)?document.all["calender"]:document.getElementById("calender");
calS=(ie4)?document.all["calenderS"]:document.getElementById("calenderS");
calS.style.height=((ie4||ie5)?cal.clientHeight:(w3c)?cal.offsetHeight:200)+'px';
calS.style.width=((ie4||ie5)?cal.clientWidth:(w3c)?cal.offsetWidth:300)+'px';
cal.parentNode.style.width=parseInt(calS.style.width)+10+'px';
cal.parentNode.style.height=parseInt(calS.style.height)+10+'px';
now=new Date(); now.ref=new Date();
mi=now.getMonth(); yi=now.getFullYear()-1970;
updateCalender();
}
// ADD OTHER WINDOW ONLOAD EVENTS HERE...

</script>
3: Copy and paste the following HTML in the BODY section of your page wherever you want the calender to appear:
Codice:
<layer visibility="hide"><div style="position:relative; width:200px">
<div id="calenderS" class="calShadow"></div>
<div id="calender" class="calMain"><center>
<table cellpadding=0 border=0 cellspacing=0 width="100%" class="spanText"><tr align="center" valign="bottom">
<td class="calMonthYear"><img src="back.jpg" border="none" width=13 height=13 onmousedown="setMonth(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_m" class="calMonthYear">*</span></td>
<td class="calMonthYear"><img src="next.jpg" border="none" width=13 height=13 onmousedown="setMonth(true)"></td>
<td class="calMonthYear">****</td>
<td class="calMonthYear"><img src="back.jpg" border="none" width=13 height=13 onmousedown="setYear(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_y" class="calMonthYear">*</span></td>
<td class="calMonthYear"><img src="next.jpg" border="none" width=13 height=13 onmousedown="setYear(true)"></td>
</tr></table><hr>
<table cellpadding=0 border=0 cellspacing=0>
<tr align="center">
<td><div class="calHdr">S</div></td>
<td><div class="calHdr">M</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">W</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">F</div></td>
<td><div class="calHdr">S</div></td>
</tr><tr align="center">
<td><div id="cal1" class="calText">*</div></td>
<td><div id="cal2" class="calText">*</div></td>
<td><div id="cal3" class="calText">*</div></td>
<td><div id="cal4" class="calText">*</div></td>
<td><div id="cal5" class="calText">*</div></td>
<td><div id="cal6" class="calText">*</div></td>
<td><div id="cal7" class="calText">*</div></td>
</tr><tr align="center">
<td><div id="cal8" class="calText">*</div></td>
<td><div id="cal9" class="calText">*</div></td>
<td><div id="cal10" class="calText">*</div></td>
<td><div id="cal11" class="calText">*</div></td>
<td><div id="cal12" class="calText">*</div></td>
<td><div id="cal13" class="calText">*</div></td>
<td><div id="cal14" class="calText">*</div></td>
</tr><tr align="center">
<td><div id="cal15" class="calText">*</div></td>
<td><div id="cal16" class="calText">*</div></td>
<td><div id="cal17" class="calText">*</div></td>
<td><div id="cal18" class="calText">*</div></td>
<td><div id="cal19" class="calText">*</div></td>
<td><div id="cal20" class="calText">*</div></td>
<td><div id="cal21" class="calText">*</div></td>
</tr><tr align="center">
<td><div id="cal22" class="calText">*</div></td>
<td><div id="cal23" class="calText">*</div></td>
<td><div id="cal24" class="calText">*</div></td>
<td><div id="cal25" class="calText">*</div></td>
<td><div id="cal26" class="calText">*</div></td>
<td><div id="cal27" class="calText">*</div></td>
<td><div id="cal28" class="calText">*</div></td>
</tr><tr align="center">
<td><div id="cal29" class="calText">*</div></td>
<td><div id="cal30" class="calText">*</div></td>
<td><div id="cal31" class="calText">*</div></td>
<td><div id="cal32" class="calText">*</div></td>
<td><div id="cal33" class="calText">*</div></td>
<td><div id="cal34" class="calText">*</div></td>
<td><div id="cal35" class="calText">*</div></td>
</tr><tr align="center">
<td><div id="cal36" class="calText">*</div></td>
<td><div id="cal37" class="calText">*</div></td>
<td><div id="cal38" class="calText">*</div></td>
<td><div id="cal39" class="calText">*</div></td>
<td><div id="cal40" class="calText">*</div></td>
<td><div id="cal41" class="calText">*</div></td>
<td><div id="cal42" class="calText">*</div></td>
</table></center>
</div></div></layer>

questo c'è scritto ke devo mettere e esce fuori un calendario
se hai altri script x ora e calendario posso usare anke il tuo nn c'è problema basti ke funzioni
 
Ultima modifica:

Discussioni simili