实验目的：
1. 掌握DOM对象的基本语法
2. 掌握getElementById函数
3. 掌握getElementsByTagName函数
来源http://www.cnblogs.com/xiaobo-Linux/p/7687658.html
实验内容：
1、在页面中显示当前时间的年月日小时分钟秒，并实现时间的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#mytime{
font-size: 90px;
color: red;
}
</style>
<body>
<div id="mytime"></div>
<script>
function test(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
var hours = d.getHours();
if(hours<10){
hours= '0'+hours;//小于10显示不错位 一直显示两位
}
var miniutes = d.getMinutes();
if(miniutes<10){
miniutes= '0'+miniutes;//小于10显示不错位 一直显示两位
}
var seconds = d.getSeconds();
if(seconds<10){
seconds= '0'+seconds;//小于10显示不错位 一直显示两位
}
var str = year+"年"+month+"月"+date+"日"+ hours+"时"+miniutes+"分"+seconds+"秒";
document.getElementById("mytime").innerHTML=str;
setTimeout('test()',1000);//定时器函数 1000ms
}
//document.getElementById("mytime").innerHTML=100;
document.body.onload = function(){//事件的注册
test();
}
</script>
</body>
</html>
2、使用<marquee>标记实现图片滚动效果，当鼠标滑过图片时，图片停止滚动，当鼠标从图片上移出时，图片继续滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<marquee behavior="alternate"οnmοuseοut=this.start() οnmοuseοver="this.stop() "> <img src="img/pic.jpeg" </marquee>
</body>
</html>
3、在页面中创建一个n行（n大于等于3）1列的表格，实现鼠标滑过表格中的某行时，该行的背景颜色变为黄色，当鼠标移出该行时，该行的背景颜色恢复为原来状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
document.write("<table class='border' border='1' width='30px' id='mytable'> ");
for(var row=1;row<=9;row++){
document.write("<tr class='mytr'>");
for(var col=1;col<=1;col++){
document.write("<td>");
document.write(row+"*"+col+"="+row*col);
document.write("</td>");
}
}
document.write("</tr>");
document.write("</table>");
</script>
<script>
// document.getElementById()
//操作表格
document.querySelector("#mytable");
var trs= mytable.querySelectorAll("tr");
for (var i=0;i<trs.length;i++) {
/* if(i%2==1)
trs[i].style.backgroundColor = "yellow";
else
trs[i].style.backgroundColor = "white"; */
trs[i].οnmοuseοver=function(){
this.style.backgroundColor = "yellow";
}
trs[i].οnmοuseοut=function(){
this.style.backgroundColor = "white"
}
}
</script>
</body>
</html>
4、在页面中添加两个文本框，当文本框得到焦点时，文本框的背景颜色变为红色，当文本框失去焦点时，文本框的背景颜色恢复为原来状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="myform">
<input type="text" id="t1"/>
<input type="text" id="t2" />
</form>
<script>
var mytext1 = document.querySelector("#t1");
mytext1.οnfοcus=function(){
this.style.backgroundColor= "red";
}
mytext1.οnfοcusοut=function(){
this.style.backgroundColor="white";
}
var mytext2 = document.querySelector("#t2");
mytext2.οnfοcus=function(){
this.style.backgroundColor= "red";
}
mytext2.οnfοcusοut=function(){
this.style.backgroundColor="white";
}
</script>
</body>
</html>
转载于:https://www.cnblogs.com/zhaocundang/p/7687658.html
相关资源：JAVA上百实例源码以及开源项目