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打印插件。
RSA加密脚本 JavaScript 参考:Blackberry10 使用js+...1,加密非常的简单代码机会上没怎么修改,另外js加密可能出现的问题在BB10 AES加密中已经说过,js RSA加密需要导入3个js文件 分别是Barrett.js,BigInt.js,RSA.js
libsignal-protocol-javascript示例有关“如何使用libsignal-protocol-javascript ?”的示例组件server.js index.html和scripts怎么跑使用以下节点运行服务器: node server.js 。 (我认为只需要ws ) 在浏览器中...
JS-Git是一款使用纯JavaScript实现Git客户端和服务器端的开源项目。其主要采用模块化设计,可以运行在任何可以运行JavaScript的平台上。 为什么要使用JavaScript重新实现Git? JavaScript要比其它任何语言都意义...
一个使用threejs的简单赛车游戏
基于 mithril.js ,javascript ,scss写一个可拖动的滑块组件,供大家参考,具体内容如下 问题描述: 需求需要实现一个可拖动的滑块组件,但是又不能用UI框架,只好自己动手写一个了。 废话不多说,直接上代码。 ...
Node.js 是一种强大的服务器端 JavaScript 运行环境,它允许开发者使用 JavaScript 编写服务器端应用程序。下面是一个简单的 Node.js 示例,用于创建一个基本的 HTTP 服务器。 示例:创建一个简单的 HTTP 服务器 ...
elasticsearch.js, 使用ElasticSearch的简单javascript库 一个简单的javascript库,用于处理 ElasticSearch 。它还提供了一个backend接口,适合于与倾斜式数据库套件一起使用。用法库需要:下划线jQuery ( 用于Ajax...
[1] Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的...
Compressor.js一个JavaScript图像压缩器。 使用浏览器的原生canvas.toBlob API来执行压缩工作,这意味着它是有损压缩。 一般使用此方法在客户端上传图像文件之前对其进行预压缩。
上面是一个简单的例子:可以自己建一个bat文件放在当前目录下面 cscript ESC.wsf -l 压缩级别 -ow 。。/要压缩到那个目录 需要进行压缩的原js 1. Level 0 :: No compression //没有处里 Level 1 :: Comment ...
node.js 是一个可以使用 JavaScript 开发服务器端应用的平台。它依托于 Google V8 JavaScript 引擎,并采用事件 I/O 的架构,可以用来创建高性能服务器。本文详细介绍了 node.js 的基本知识、模块化的结构、事件驱动...
apexcharts.js:一个现代JavaScript图表库,用于使用简单的API构建交互式图表和可视化
html编写网页使用计算器 语言:javascript
本文实例讲述了javascript使用Blob对象实现的下载文件操作。分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象...
如何使用gpu.js改善JavaScript的性能 你是否曾经尝试过运行复杂的计算,却发现它需要花费很长时间,并且拖慢了你的进程?... GPU.js 是一个针对 Web 和 Node.js 构建的 JavaScript 加速库,用于
使用了javascript库,默认使用的是ajaxslt,这个会比较慢,可以换成 javascript-xpath, 虽然比firefox还是慢,但也快多了,上面的例子只需要不 到1秒。换法很简单,如下: selenium = new DefaultSelenium...
这些示例使用一颗星,两颗星或三颗星对相关复杂度进行了分类。如果刚刚学习ArcGIS JavaScript API,从一颗星示例开始可以更好的理解示例。在很多情况下,可以扩展或合并示例来为自己的应用创建一个起始点。查看视频...
three.js一个易于使用的、轻量级的JavaScript 3D库
2.2.1 也可将javascript放入到单独的一个文件js文件,在需要使用的时候引入: 6 2.2.2 在超连接中使用javascript 7 2.2.3 在button中也可使用javascript 7 2.3 JAVASCRIPT的保留关键字 7 2.4 JAVASCRIPT的基本语法 7 ...