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,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>
分享到：
相关推荐
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；...自主研发的一个轻量级超简单的js打印插件。
Ribbon.js是一个仅为1Kb的小巧库，它巧妙地利用了这两项技术，实现了在网页上生成逼真的色带效果。 首先，HTML5 Canvas API是这个知识点的基础。它通过JavaScript提供了一组绘图方法，如`fillRect()`用于填充矩形，...
本文将详细介绍如何使用GPU.js这一库来提升JavaScript应用程序的性能。 #### 二、GPU.js简介 **GPU.js**是一个专为Web和Node.js环境设计的JavaScript加速库。它的核心理念是利用GPU的强大并行处理能力来执行那些...
Eclipse作为一个强大的开源集成开发环境（IDE），广泛用于Java编程，但...使用Eclipse的JavaScript插件JSEditor，意味着你可以在一个专业且功能全面的环境中编写和调试JavaScript代码，享受到高效且便捷的开发体验。
jsdiff是一款基于JavaScript的开源库，它提供了一种高效的方法来比较两个文本字符串之间的差异。这个库被广泛应用于版本控制系统、代码审查工具、协同编辑系统等领域，帮助开发者直观地理解文本内容的变化。jsdiff...
Log4js 是一个受到Java中的log4j启发的日志库，专为JavaScript设计，适用于浏览器和Node.js环境。这份详细资料将引导你了解如何有效利用log4js进行JS调试。 **1. 安装与引入** 在Node.js环境中，你可以通过npm...
Dexie.js是一个轻量级的JavaScript库，它为浏览器中的IndexedDB提供了一个易用且强大的API。IndexedDB是Web浏览器提供的一个原生的本地存储解决方案，允许应用程序在客户端存储大量数据。然而，由于其复杂的API，...
Node.js 是一个基于 Google V8 引擎的 JavaScript 运行环境，专为构建高性能的网络应用程序而设计。它的特点是采用事件驱动、非阻塞 I/O 模型，使其轻量又高效。Node.js 允许开发者使用 JavaScript 编写服务器端代码...
libsignal-protocol-javascript示例有关“如何使用libsignal-protocol-javascript ？”的示例组件server.js index.html和scripts怎么跑使用以下节点运行服务器： node server.js 。 （我认为只需要ws ） 在浏览器中...
1. `uuid-js`库：这是一个基于RFC4122标准实现的JavaScript库，提供了V1到V5的所有版本UUID生成方法。其中，V1基于时间戳和MAC地址生成，V4完全是随机生成，V5则基于命名空间和SHA-1哈希算法。 2. `uuid`库（之前...
在提供的压缩包中，可能包含一个示例（demo），它演示了如何使用FLV.js或FLV.min.js播放FLV视频。通常，这个示例会有一个HTML文件，展示如何配置和初始化播放器，以及如何处理播放事件。你可以将自己的FLV文件替换到...
### JS 音频可视化插件 Wavesurfer.js 的使用教程 #### 一、Wavesurfer.js 概述 Wavesurfer.js 是一款强大的基于 HTML5 Canvas 和 WebAudio API 的音频播放器插件，它提供了简洁易用的 API 接口以及高度可定制化的...
在JavaScript中使用ONNX.js，首先需要准备一个ONNX模型。这些模型通常由Python环境中的框架如TensorFlow、PyTorch或MXNet训练得出，并通过ONNX转换工具导出为ONNX格式。ONNX.js库提供了加载和执行ONNX模型的API，...
综上所述，jstree是一个强大的JavaScript工具，适用于构建互动式的树形菜单和导航，其代码结构清晰，注释丰富，便于学习和使用。对于需要在Web应用中展示层级数据的j2ee开发者来说，jstree是一个非常有价值的资源。
1. **pinyin4js** 是一个JavaScript库，用于将汉字转换为拼音。 2. 该库**无任何外部依赖**，方便集成到任何JavaScript项目中。 3. 它具有**灵活的词库导入和打包**功能，允许用户根据需求调整字典资源，适应不同...
1. **语法高亮**：JSEditor提供了对JavaScript语法的高亮显示，使代码更易读，有助于快速定位错误和理解代码结构。 2. **代码自动完成**：这个插件支持智能代码补全，当用户输入代码时，它可以自动提示可能的函数、...
JS-Git是一款使用纯JavaScript实现Git客户端和服务器端的开源项目。其主要采用模块化设计，可以运行在任何可以运行JavaScript的平台上。 为什么要使用JavaScript重新实现Git？ JavaScript要比其它任何语言都意义...
money.js 是一个货币转换的微型 javascript 库，可在 nodeJS 和浏览器中使用
2. "javascript - 如何使用flv.js 我不会使用node - SegmentFault.url"：这是一个链接，可能指向一个技术论坛上的详细教程，指导用户如何在不使用Node.js的情况下使用flv.js，这对于那些不熟悉Node.js的开发者尤其...
JavaScript 实现写入文件到本地的方法【基于 FileSaver.js 插件】 ...因此，使用 FileSaver.js 插件实现写入文件到本地的方法是一个非常不错的选择，能够满足各种开发需求，且非常易于使用和维护。