JS运用一
日期：2014-05-16 浏览次数：20444 次
?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 class="td">日</td>
<td class="td">一</td>
<td class="td">二</td>
<td class="td">三</td>
<td class="td">四</td>
<td class="td">五</td>
<td class="td">六</td>
</tr>
<tr style="background-color:# ;color:#ff00ff; size:16px;">
<td colspan="7"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" 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+1
var 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,
