首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JS运用一

2013-01-06 
JS使用一?1、学习js,要先了解html,比如说html加载,html中的所有元素都存在于document中,所以我用document.g

JS使用一

?1、学习js,要先了解html,比如说html加载,html中的所有元素都存在于document中,所以我用document.getElementById(id)这个方法才能取到我们想要的元素。

2、在页面运行时加载对象是顺序执行的,比如我们的javascript写在head中,那么页面就会先加载head中的脚本,然后再加载body中的元素,所以就会出现我们在脚本刚开始加载就用document取值,导致出现未定义或者取值为空的错误,但是我们必须要在脚本加载时取元素的话,有三种方法:(1)window.onload=function() {取body中的元素},这个就是等页面加载完成后执行。(2)在body中定义onload方法,例如<body onload="js函数()"></body>,这个是在body加载完成后执行,也可以在刚开始取到元素。(3)把脚本写在body下方,这样html顺序加载时,就可以先加载body后加载脚本,同样可以取到body中的元素。

下面是一个日历控件的例子

<html><head><title>日历控件</title><style type="text/css">.td{width:200px;text-align:center;background-color:#e5e5e5;;font-size:25px;}</style></head><body onload=""><form id="form1"><table id="tb" name="tb" width="500" style="border:0px; margin:10px; padding:10px;"> <tr>                <td colspan="3"><select id="selectYear" name="selectYear" size="1" onchange="showYearDate(document.getElementById('selectYear').value);"> </select><span>年</span></td><td colspan="3"><input id="showMonth" type="text" onclick="showDialog(this.id);"/></td>            </tr><tr style="background-color:#e5e5e5;"><td Language="Javascript">document.write("<div id="showDate"  style="display: none;  Z-INDEX: 2; BACKGROUND: #effaff; FILTER: Alpha(opacity=85); position: absolute; WIDTH: 200px; LINE-HEIGHT: 22px; padding:6px; border: 1px solid #bae1f0; font-size:14px;"></div>");var date=new Date();var month=date.getMonth();var year=date. getFullYear ();var day=date.getDate();var isLeapYear=false;var monthArray=new Array();var dayCountArray=new Array();var id="";//这个月1号是星期几var firstDay = new Date((month+1) + "-1-" + year.toString()).getDay(); var table = document.getElementById('tb');for(var i=0;i<12;i++){monthArray[i]=(i+1)+"月";}isLeapYearFunction();getDayCountOfMonth();insertToTable();insertSelectYear();function insertSelectYear(){var selectYear=document.getElementById("selectYear");var result="";for(var i=1970;i<2050;i++){if(i==year){result+="<option selected>"+i+"</option> ";}else{result+="<option>"+i+"</option> ";}}selectYear.innerHTML=result;}//向日历中插入日期信息function insertToTable(){for(var i=2;i<8;i++){var tRow = table.insertRow(i);for(var j=0;j<7;j++){var d=(i-2)*7-parseInt(firstDay)+j+1var tCell = tRow.insertCell(j);if(d<=0){if(month>0){d=dayCountArray[month-1]+d;tCell.innerHTML=d;}else{d=31+d;tCell.innerHTML=d;}setFont(tCell,j,false);continue;}if(d>0){tCell.innerHTML=d;}if(d>dayCountArray[month]){d=d-dayCountArray[month];tCell.innerHTML=d;setFont(tCell,j,false);continue;}if(d==day){tCell.innerHTML="<a href>"+d+"</a>";}setFont(tCell,j,true);}}}//为日期设置不同的字体颜色function setFont(cell,week,curMonth){cell.style.fontSize="25px";cell.style.textAlign="center";if(week%6==0){cell.style.color="red";}else {cell.style.color="blue";}if(!curMonth){//cell.style.backgroundColor="gray";cell.style.color="gray";}//backgroundColor}//获取当前年的所有月份的天数function getDayCountOfMonth(){for(var i=0;i<12;i++){if(i==0||i==2||i==4||i==6||i==7||i==9||i==11){dayCountArray[i]=31;}else if(i==1){if(isLeapYear){dayCountArray[i]=29;}else{dayCountArray[i]=28;}}else{dayCountArray[i]=30;}}}//是否是闰年,4年一闰,400年一闰,百年不闰function isLeapYearFunction(){if(year%4==0){isLeapYear=true}if(year%100==0){isLeapYear=false;}if(year%400==0){isLeapYear=true;}}function showDialog(textId){id = textId;var divVal = document.getElementById("showDate");var text=document.getElementById(textId);var clickX = event.clientX;var clickY = event.clientY;//alert(clickX+","+clickY);// 加px 兼容火狐divVal.style.left = (clickX + 1) + "px"; divVal.style.top = (clickY + 1) + "px"; // 得到系统日期var nowDate = new Date();divVal.innerHTML=showAllMonth();divVal.style.display = "block";//改变鼠标进入月份选择区域时变化样式divVal.style.cursor="hand";}function showAllMonth(){var result="";result+="<table>";for(var i=0;i<3;i++){result+="<tr>";for(var j=0;j<4;j++){var flag=i*4+j;result+="<td onclick='showMonthDate("+flag+")'>"+monthArray[flag]+"</td>"}result+="</tr>"}return result;}function showMonthDate(MM){var divVal = document.getElementById("showDate");divVal.style.display = "none";for(var i=7;i>1;i--){table.deleteRow(i);}month=MM;firstDay = new Date((month+1) + "-1-" + year.toString()).getDay(); getDayCountOfMonth();insertToTable();var temp=document.getElementById(id);temp.value=monthArray[month];}function showYearDate(yyyy){for(var i=7;i>1;i--){table.deleteRow(i);}year=yyyy;firstDay = new Date((month+1) + "-1-" + year.toString()).getDay(); getDayCountOfMonth();insertToTable();}</script></html>

?

?

热点排行