|
实验目的： 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"onmouseout=this.start() onmouseover="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].onmouseover=function(){ this.style.backgroundColor = "yellow"; } trs[i].onmouseout=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.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> |