实验目的：

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. Eigen教程(6)

    整理下Eigen库的教程,参考:http://eigen.tuxfamily.org/dox/index.html 高级初始化方法 本篇介绍几种高级的矩阵初始化方法,重点介绍逗号初始化和特殊矩阵(单位 ...

  2. 合并ts文件

    合并ts文件 合并ts文件 参考资料 合并ts文件 文件在手机中的存储: ├── fe2cd5a64fe78a69f90a7c0a2b08a240e1444082.ts ├── ff5b590b44e ...

  3. Linux 下 less 命令

    less 命令功能强大,上能搜索,下能动态加载查看日志,并且每一屏内容都是预加载,不会加载整个文件,所以不会由于搜索内容过多把机器卡死 语法 less [参数] 文件地址 参数说明 -N:显示行号 f ...

  4. 从零写Java Web框架——实现Ioc依赖注入

    大概思路 通过读取配置文件,获取框架要加载的包路径:base-package,类似于 Spring 配置文件中的: <context:component-scan base-package=&q ...

  5. WPF DataTomplate中Command无效

    问题:在DataTomplate中添加一个Button,Button添加Command,但是Command生效. 原因:ItemTemplate的DataContext指代不明,需要改为父类的Data ...

  6. Quartz TriggerListener 触发器监听器

    Quartz  Scheduler 可以对Trigger建立一个监听器,分别对Trigger的各种状态进行监听 实现监听器需要实现TriggerListener接口,然后注册到Scheduler上就可 ...

  7. 【html5】使用 html5 的十大原因

    你难道还没有考虑使用 html5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在 ie 中不好使,或者你就是喜欢写比较严格的 xhtml 代码.html5 是 web 开发世界的一次重大 ...

  8. Web API（六）：使用Autofac实现依赖注入

    在这一篇文章将会讲解如何在Web API2中使用Autofac实现依赖注入. 一.创建实体类库 1.创建单独实体类 创建DI.Entity类库,用来存放所有的实体类,新建用户实体类,其结构如下: us ...

  9. 多线程二：线程池(ThreadPool)

    在上一篇中我们讲解了多线程的一些基本概念,并举了一些例子,在本章中我们将会讲解线程池:ThreadPool. 在开始讲解ThreadPool之前,我们先用下面的例子来回顾一下以前讲过的Thread. ...

  10. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...