实验目的：

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. Node.js学习笔记（1）--一个最简单的服务器请求

    说明(2017-5-2 10:27:03): 1. 需要安装node,http://nodejs.cn/download/ 2. 安装完后,在cmd里输入node -v可以查看版本. 3. 代码foo ...

  2. 基于jquery结婚电子请柬特效素材

    分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. IBM ILOG JViews Charts 产品及功能介绍

    摘抄连接:http://www.ibm.com/developerworks/cn/websphere/library/techarticles/1004_lidb_ilogjchart/ IBM I ...

  4. jvm面试题

     1.虚拟机的类加载机制 1.1.什么是虚拟机的类加载机制 在代码编译后,就会生成JVM(Java虚拟机)能够识别的二进制字节流文件(*.class).而JVM把Class文件中的类描述数据从文件加载 ...

  5. 引用Interop.SQLDMO.dll后的注意事项。

    SQLDMO.dll是个好东西,ASP.NET利用它可以实现在线备份.还原数据库等各种功能.近日有客户要求为其在后台添加一个管理数据库的功能.于是就出现了这篇文章.     由于客户的数据库和WEB服 ...

  6. PostgreSql 函数

    DECLARE curParkingTime TIMESTAMP ; curLeavingTime TIMESTAMP; parkingSpaceIndexCode VARCHAR[]; days I ...

  7. STM32F10x_ADC三通道DMA连续转换(3通道、软件单次触发)

    Ⅰ.概述 上一篇文章讲述的内容是:三通道逐次转换(单次.单通道软件触发),也就是说3条通道要三次软件触发才能完成转换,而且是通过软件读取转换数值. 本文讲述三通道DMA连续转换(3通道.软件单次触发) ...

  8. SpringMVC REST 风格静态资源访问配置

    1 在web.xml中使用默认servlet处理静态资源,缺点是如果静态资源过多,则配置量会比较大,一旦有遗漏,则会造成资源无法正常显示或404错误. <!-- 静态资源访问控制 --> ...

  9. while do while和for语句用法

    while //循环 int i = 10; while(i > 0){ if(i==8) {i--; continue;//跳过 } System.out.println(--i); if(i ...

  10. Google工作原理

    网上看到一张讲解Google工作原理的图,与大家分享一下: