实验目的：

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. 【机器学习】Softmax 和Logistic Regression回归Sigmod

    二分类问题Sigmod 在 logistic 回归中,我们的训练集由  个已标记的样本构成: ,其中输入特征.(我们对符号的约定如下:特征向量  的维度为 ,其中  对应截距项 .) 由于 logis ...

  2. css按钮口诀 - CSS BUG顺口溜

    在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一.IE边框若显若无,须注意,定是高度设置已忘记: 二.浮动产生 ...

  3. C#学习笔记（6）——大项目增删改查

    说明(2017-5-28 11:35:39): 1. 需要注意的地方很多 2. 首先是连接字符串str要直接写在类里面,不然每个按钮里面都要写一遍. 3. 查询用到sqlDataReader等三个方法 ...

  4. java基础篇---文件上传（commons-FileUpload组件）

    上一篇讲解了smartupload组件上传,那么这一篇我们讲解commons-FileUpload组件上传 FileUpload是Apache组织(www.apache.org)提供的免费的上传组件, ...

  5. 【WPF】修改数据层ViewModel后，UI界面未同步更新

    界面:WPF(MVVM)中将集合类控件ItemsControl的ItemsSource绑定到了ViewModel中的ObservableCollection列表,ItemsControl.ItemTe ...

  6. <孙阿姨炒股记：3500元炒出千万身家的股市智慧 >读书笔记

    书在这里 个人投资者要想在中国股市上生存,并且获利,首先要“胆子小” 国家方针政策要花力气去研究 不要听小道消息,比较天下没有免费的午餐 好公司不一定就能赚钱,好的买点药抓住,好的卖点更要抓住 趋势是 ...

  7. [uart]linux串口的阻塞非阻塞切换

    比如写的时候设置为阻塞,读的时候设置为非阻塞,就需要下面的切换方式 1.获取文件的flags,即open函数的第二个参数: flags = fcntl(fd,F_GETFL,0); 2.设置文件的fl ...

  8. Java Servlet (1) —— Filter过滤请求与响应

    Java Servlet (1) -- Filter过滤请求与响应 版本: Java EE 6 参考来源: Oracle:The Java EE 6 Tutorial: Filtering Reque ...

  9. 在CentOS 6.4中支持exfat格式的U盘

    CentOS系列一直没有默认支持使用exfat格式的大容量U盘. 可以通过添加fuse-exfat模块来支持.根据网上资料,整理如下: 1.下载fuse-exfat支持软件: exfat支持是通过fu ...

  10. 【linux】——Ubuntu 12.04中文输入法的安装

    Ubuntu 12.04中文输入法的安装   Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu ...