五： 一些网页中的开关灯：
修改样式也就是style 时当用document 也就是dom时class不要用了要用className因为在dom在稍有少数的名与html中是不一样的记住就行啦不常用也一个小例子就是开关灯如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>开关灯啦</title>
<style type="text/css">
.day
{
background-color: White;
}
.night
{
background-color:Gray;
}
</style>
<script type="text/javascript">
function switchLight() {
var switchlite = document.getElementById("switchlite");
if (document.body.className == "day") {
switchLight.value = "关灯";
document.body.className = "night"
}
else {
switchLight.value = "开灯";
document.body.className = "day";
}
}
</script>
</head>
<body class="day">
<input type="button" id="switchlite" value="开灯" onclick="switchLight()" />
<textarea cols=20 rows=20></textarea>
</body>
</html>
六：层的显示与隐藏：
控制层的显示与隐藏也就是只是改变div的style.display='';或者是'none'用法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div</title>
<script type="text/javascript">
function cbChange(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display='';
}
else {
div1.style.display ='none';
}
}
</script>
</head>
<body>
<input type="checkbox" id="cbShow" onclick="cbChange(this)"/><label for="cbShow">显示层啦</label>
<div id="div1"style="display:none">这是一个div呀呵呵</div>
</body>
</html>
有一小点是onchange事件是当焦点离开时才会触发。
这常用于某些网站中填写个人信息时上边为必填顼下面若想填就点开填写OK
七：鼠标事件：
鼠标进入时触发的事件 onmouseover 离开时的事件是onmouseout
另外在IE中如果在body 添加onclick onmouseover onmousemove onmouseout 等等事件响应，那么如果 页面没有满的话，则"body"中的最后一个元素以下（横向不受限制）的部分是无法响应事件的，必须使用代码在document 上监听这些事件。比如document.onmouseover=MovePic 例子如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function docuclick() {
alert("you have click document event");
}
document.onclick = docuclick;
</script>
</head>
<body onclick="alert('you have click body for event')">
</body>
</html>
注意document.click事件的赋值是直接加入方法的名而没有带括号也不加引号！！！！元素定位也就是用到了元素的style 的position 属性；小例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="定位" style="position:absolute;top:200px;left:200px" />
</body>
</html>
还有这是个大例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function docclick() {
var div1 = document.getElementById("div1");
var position1 = window.event.clientX;
var position2 = window.event.clientY;
div1.style.top = position2;
div1.style.left = position1;
}
document.onmousemove = docclick;
</script>
</head>
<body>
<div id="div1" style="position:absolute">
<img src="qq.png" />
</div>
</body>
</html>
八：做个小日历用javascript 呵呵很简单呀：
<html>
<head>
<title>北京欢迎您</title>
</head>
<body>
<script type="text/javascript">
todayDate = new Date();
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
document.write("今天是")
document.write("<br>")
if(navigator.appName == "Netscape")
{
document.write(1900+year);
document.write("年");
document.write(month);
document.write("月");
document.write(date);
document.write("日");
document.write("<br>")
}
if(navigator.appVersion.indexOf("MSIE") != -1)
{
document.write(year);
document.write("年");
document.write(month);
document.write("月");
document.write(date);
document.write("日");
document.write("<br>")
}
if (todayDate.getDay() == 5) document.write("星期五")
if (todayDate.getDay() == 6) document.write("星期六")
if (todayDate.getDay() == 0) document.write("星期日")
if (todayDate.getDay() == 1) document.write("星期一")
if (todayDate.getDay() == 2) document.write("星期二")
if (todayDate.getDay() == 3) document.write("星期三")
if (todayDate.getDay() == 4) document.write("星期四")
</script>
</body>
</html>