Web4个实验题目DOM+JS

实验目的：

1. 掌握DOM对象的基本语法

2. 掌握getElementById函数

3. 掌握getElementsByTagName函数

来源http://www.cnblogs.com/xiaobo-Linux/p/7687658.html

实验内容：

1、在页面中显示当前时间的年月日小时分钟秒，并实现时间的变化。

<!DOCTYPE html>

<html>

<head>

</head>

<style>

#mytime{

font-size: 90px;

color: red;

}

</style>

<body>

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>

</head>

<body>

</body>

</html>

3、在页面中创建一个n行（n大于等于3）1列的表格，实现鼠标滑过表格中的某行时，该行的背景颜色变为黄色，当鼠标移出该行时，该行的背景颜色恢复为原来状态。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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>

// 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].onmouseover=function(){

this.style.backgroundColor = "yellow";

}

trs[i].onmouseout=function(){

this.style.backgroundColor = "white"

}

</script>

</body>

</html>

4、在页面中添加两个文本框，当文本框得到焦点时，文本框的背景颜色变为红色，当文本框失去焦点时，文本框的背景颜色恢复为原来状态。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

var mytext1 = document.querySelector("#t1");

mytext1.onfocus=function(){

this.style.backgroundColor= "red";

}

mytext1.onfocusout=function(){

this.style.backgroundColor="white";

}

var mytext2 = document.querySelector("#t2");

mytext2.onfocus=function(){

this.style.backgroundColor= "red";

}

mytext2.onfocusout=function(){

this.style.backgroundColor="white";

}

</script>

</body>

</html>