实验目的：

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>

Web4个实验题目DOM+JS的更多相关文章

  1. 实验吧-密码学-js(Chrome用console.log调试js)

    题目就是js,可能就是一个js的代码,查看源码并复制,在Chrome中打开网页,审查元素. 将复制的代码输入,将eval改成console.log,再回车执行,就得到一段js代码. 代码中有Unico ...

  2. 「c++小学期」实验题目及代码

    面向对象编程的C++,和平时做题用的C++还是有差距的.实验的题目都是小题目,就都做一下吧.(没放代码的为要验收的 实验一 简单C++程序设计 1.  猜价格游戏 编写C++程序完成以下功能: (1) ...

  3. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  4. python第八十八天－－－－dom js

    DOM操作 1. 找到标签直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 docum ...

  5. 《程序设计基础》实验题目2 c文件读取（反序列化？） 链表排序

    题目: 每个学生的信息卡片包括学号.姓名和成绩三项.定义存储学生信息的单向链表的结点类型:编写函 数,由文件依次读入 n(n≥0)个学生的信息,创建一个用于管理学生信息的单向链表:编写函数,对 该链表 ...

  6. java实验题目

    1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 实验源码: public class number1 { publi ...

  7. 3D网页小实验-基于Babylon.js与recast.js实现RTS式单位控制

    一.运行效果 1.建立一幅具有地形起伏和不同地貌纹理的地图: 地图中间为凹陷的河道,两角为突出的高地,高地和低地之间以斜坡通道相连. 水下为沙土材质,沙土材质网格贴合地形,河流材质网格则保持水平. 2 ...

  8. dom js

    var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, ...

  9. Java继承的两道实验题目

    设计一个表示二维平面上点的类Point,包含有表示坐标位置的Protect类型的成员变量 获取和设置x和y值的public方法 package classwork_6; public class Po ...

随机推荐

  1. weblogic迁移总结

    weblogic使用的数据库时DB2 1. 图形化安装weblogic和域,或者静默安装. 2. 查看环境变量env并修改,修改系统默认语言(根据实际情况) 3. 修改weblogic页面打开较慢问题 ...

  2. ViewGroup

  3. 针对后台TCP服务F5健康检查配置

    1.TCP-HALF-OPEN方式 TCP-HALF-OPEN的探测方式,实际是F5每隔一个固定的时间,发送一个SYN包给资源池pool中的一个member,等待服务器返回SYN_ACK,在收到SYN ...

  4. 网络构建入门技术（3）——IP地址分类

    说明(2017-5-16 09:48:08): 1. IP地址

  5. [转]JSP页面的动态包含和静态包含示例及介绍

    原文地址:http://www.jb51.net/article/53659.htm 一.静态包含 本文介绍JSP静态包含语句,即使用JSP的include指令来完成的包含操作.JSP中,有两种包含其 ...

  6. pppoe应用概述

    PPPOE简述 PPP主要是用来通过拨号或专线方式在两个网络节点之间建立连接.发送数据.PPP是一种分层协议,物理层用来进行实际的点到点连接.由链路控制层(LCP)发起对链路的建立.配置和测试.在LC ...

  7. mac上怎么安装dmg

    双击dmg文件,就会打开了,里面一般就是应用程序,拖到Finder-应用程序(如果里面是pkg格式,就是安装包,双击安装),然后还要注意一个安装完了以后,要把刚才载入的dmg推出,方法是把桌面上那个图 ...

  8. 【oneday_onepage】——The Secret Of Steve<2>

    Sales + Customers = Nothing Broken is the formula for corporate cyanide. Most big companies that die ...

  9. 修改Windows和linux系统时间

    1.修改本机Windows的系统时间,Java代码实现: import java.io.IOException; import java.text.SimpleDateFormat; import j ...

  10. 去除QT不使用参数的警告

    编译中出现以下警告: warning: unused parameter ‘arg1′ [-Wunused-parameter]原因是由于函数参数未使用,这在程序当中有时候很正常:所以个人认为此警告意 ...