1.Date对象的常用方法

setFullYear()

setMonth()

setDate()

setHours()

setMinutes()

setSeconds()

定时函数

setTimeout:等待某段时间后调用某个函数(1次)

语法:setTimeout("调用的函数名称",等待时间)

消除:clearTimeout()

setInterval:每隔某段时间反复调用某个函数(多次)

语法:setInterval("调用的函数名称",间隔时间)

清除:clearInterval()

实例

HTML代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>时钟特效</title>
  <script type="text/javascript">
   function disptime() {
    var timer;
    var today = new Date();
    var hh = today.getHours();
    var mm = today.getMinutes();
    var ss = today.getSeconds();
    document.getElementById("myclock").innerHTML = "<h1>现在是:" + hh + ":" + mm + ":" + ss + "<h1>";
    setTimeout("disptime()", 1000)
   }
   function interval() {
    timer = setInterval("disptime()", 1000);
   }
  </script>
 </head>
 <body onload="interval()">
  <div id="myclock"></div>
 </body>
</html>

运行结果

注意一点:调用函数不能写在script里,因为js代码是一步一步运行的,放在script下面不会执行这个disptime()的代码。所以把disptime()放在body里用onload来调用

2.什么是DOM?

DOM-Document Object Mondel(文档对象模型)

DOM提供了访问、动态修改结构文档的接口

3.DOM的组成?

Core DOM:定义了一套标准的针对任何结构化文档的对象

XML DOM:定义了一套标准的针对XML文档的对象

HTML DOM:定义了一套标准的针对HTML文档的对象

4.访问节点

使用getElement系列方式访问节点

getElementById()

getElementByName()

getElementByTagName()

HTML代码

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>改变图片</title>
<style type="text/css">
img {
border: 0px;
padding: 3px;
} body {
margin: 0px;
font-size: 12px;
line-height: 25px;
} input {
margin-top: 5px;
}
</style>
<script src="js/changeImg.js"></script>
</head> <body style="text-align:center;">
<img src="img/fruit.jpg" alt="水果图片" id="fruit" />
<br /><input name="btn" type="button" value="改变图片" onclick="change()" />
</body> </html>

JavaScript代码

function change(){
var img=document.getElementsByTagName("img");
img[0].setAttribute("src","img/grape.jpg");
}

  运行结果

使用层次关系访问节点

parentNode

firstChild

lastChild

实例

HTML代码:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>DOM节点</title>
<script type="text/javascript" src="js/fruit.js"></script>
</head> <body><img src="img/fruit.jpg" alt="图片" id="imgFruit" />
<h1>喜欢的水果</h1><input type="button" onclick="showNode()" value="查找节点" />
<p>DOM应用</p></body>
</html>

  JavaScript代码

function showNode(){
var imgObj=document.getElementById("imgFruit");
var imgParent=imgObj.parentNode;
alert(imgParent.nodeName);
var bodyFirstChild=imgParent.firstChild;
alert(bodyFirstChild.nodeName);
var bodyLastChild=imgParent.lastChild;
alert(bodyLastChild.nodeName);
}

运行结果

5.操作节点的属性值

Core DOM的标准方法

getAttribute("属性名"):获取属性值

setAttribute("属性名","属性值"):设置属性值

针对HTML文档的特殊方法

对象名.属性值

6.创建节点

createElement(tagName):创建元素

appendChild(nodeName):在末尾添加节点

insertBefore(newNode,oldNode):在某个元素前插入节点

cloneNode(deep):克隆节点

HTML代码

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>增加节点</title>
<style type="text/css">
ol li {
list-style-type: upper-alpha
}
</style>
<script src="js/addImg.js"></script>
</head> <body>
<h2>喜欢的水果</h2>
<input id="b1" type="button" value="增加一幅图片" onclick="newNode()" />
<input id="b1" type="button" value="增加一个选项" onclick="addAnswer()" />
<img src="img/sixty1.jpg" id="sixty1" alt="水果" />
<img src="img/sixty2.jpg" id="sixty2" alt="果篮" /> <ol id="questions">
<li><input type="text" name="answer" /></li>
</ol>
</body> </html>

  JavaScript代码

function newNode(){
var image=document.createElement("img");
image.setAttribute("src","img/newimg.jpg");
document.body.appendChild(image);
}
function addAnswer(){
var liElement=document.createElement("li");
var inputElement=document.createElement("input");
inputElement.setAttribute("type","text");
inputElement.setAttribute("name","answer");
liElement.appendChild(inputElement);
var Questions=document.getElementById("questions");
Questions.appendChild(liElement);
}

  运行结果:

点击添加一张图片

点击添加一个选项

7.数组的赋值和读取

先声明再赋值

var fruit = new Array(4);

fruit[0] = "apple";

fruit[1] = "orange";

声明时同时初始化

var fruit = new Array("apple","orange","peach","banana");

8.数组的读取

单个读取

数组对象名[数组下标]

fruit[0];

循环读取

for

for...in

HTML代码

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>数组方法的应用</title>
<script type="text/javascript">
var arrayFruit = new Array("apple", "orange", "peach", "bannaner");
document.write("排序前的数组<br />");
for(var i in arrayFruit) {
document.write(arrayFruit[i] + "<br />");
}
document.write("排序后的数组<br />");
arrayFruit.sort();
for(var i in arrayFruit) {
document.write(arrayFruit[i] + "<br />");
}
</script>
</head> <body> </body> </html>

运行结果

9.Array对象的常用属性和方法

属性

length:设置或返回数组中元素的长度

方法

join():将数组拼接为字符串

sort():对数组的元素进行排序

10.今天遇到的问题

关于firstChild和lastChild获取到的结果不是想要的节点而是#text,

问题主要是出自<body>之后和</p>之前的“回车”和“空格”字符,复现里面打印出的#text就是这些“回车”和“空格”字符,也称文本节点,它们才是真正意义上的

firstChild和lastChild,而不是我们想要获取的p,所以将这些空白字符去掉即可。

最终结果就不会有#text了

使用JavaScript制作页面特效2的更多相关文章

  1. 用JavaScript制作页面特效

    1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...

  2. 利用Javascript制作网页特效(时间特效)

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  3. 【JavaScript制作页面时常用的五个特效,你用到了哪个?】

    常用的五个特效的相关知识点见附录(五道例题后有附录哦~): 例一: 1.在某页面中有一个图片和五个超链接,如下图所示: 单击不同的数字超链接显示不同的图片: 图1 图片幻灯片显示效果 提示: (1)默 ...

  4. JavaScript制作时钟特效

    需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...

  5. HTML+JavaScript制作表白特效,表白不成功,小编现场吃雪

    今年的雪特别美,长沙自从08年后的最大的一场学了,今天小编给大家制作一个表白特效,希望大家喜欢,如果你是程序员希望对你有帮助,追到你喜欢的女孩,哈哈~追不到对象,小编现场吃学给你大家看 下图是爱心飘落 ...

  6. 使用JavaScript制作页面效果3

    一. 1.下拉列表:select对象 属性: option[ ]:选项数组 selectedIndex:被选中选项的索引号 length:选项总数 方法: add(option对象,添加位置):增加选 ...

  7. 利用Javascript制作网页特效(其他常见特效)

    设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...

  8. 利用Javascript制作网页特效(窗口特效)

    全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...

  9. 利用Javascript制作网页特效(图像特效)

    图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...

随机推荐

  1. go chan 入门代码

    package main import ( "fmt" "sync" "time" ) // 生产数据 func producer(num ...

  2. JDK无法卸载问题解决

    在控制面板卸载JDK时,显示正在收集删除文件,进度条满了之后就闪退了,但JDK还在,试了几次都是如此. 后来,发现微软官方出了“修复阻止程序安装或删除的问题”的应用,可以自动修复包括阻止你安装或删除程 ...

  3. 在java中,异常抛出点后程序的执行情况

    1.在throw语句,即自定义的抛出异常语句后面的代码并不会执行,会提示错误,编译器并不可以正常编译. 2.若在一个条件语句中抛出一个异常,程序可以编译,但不会运行(dead code). 3.若在一 ...

  4. PHP 多维数组排序 函数怎么保持数字键不被重新索引

    /** * 根据数组中的某个键值大小进行排序,仅支持二维数组 * * @param array $array 排序数组 * @param string $key 键值 * @param bool $a ...

  5. MySQL Workbench 创建数据库,添加新表,添加字段

    建立数据库 第一步: 第二步: 第三步: 如图弹出弹框,继续点击Apply按钮,最后点击Finish按钮完成数据库的建立 创建表与添加字段 双击!!!  一下刚刚建立好的数据库,然后再创建表,不然会出 ...

  6. Javascript 2.9

    对象:属性和方法属性:隶属于某个特定对象的变量方法:只有某个特定对象才能调用的函数 对象和方法都用"."来访问: Object.property Object.method() 由 ...

  7. 连接管理 与 Netty 心跳机制

    一.前言 踏踏实实,动手去做,talk is cheap, show me the code.先介绍下基础知识,然后做个心跳机制的Demo. 二.连接 长连接:在整个通讯过程,客户端和服务端只用一个S ...

  8. node中间件概念

    中间件就是请求req和响应res之间的一个应用,请求浏览器向服务器发送一个请求后,服务器直接通过request定位属性的方式得到通过request携带过去的数据,就是用户输入的数据和浏览器本身的数据信 ...

  9. linux一些工具的安装(三)

    linux(vmware15   centos7)中Docker安装 一.Docker卸载 1.查看已安装的docker安装包 $yum list installed|grep docker 执行后的 ...

  10. Ubuntu 执行脚本报错:c.sh: Syntax error: "(" unexpected

    在Ubuntu下执行脚本报错 c.sh: Syntax error: "(" unexpected 解决办法 sudo dpkg-reconfigure dash ubuntu@i ...