使用JavaScript制作页面特效2

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>

</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的更多相关文章

用JavaScript制作页面特效
1.Window对象名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息常用方法 prompt():弹出输入框 ...
利用Javascript制作网页特效（时间特效）
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
【JavaScript制作页面时常用的五个特效，你用到了哪个？】
常用的五个特效的相关知识点见附录(五道例题后有附录哦~): 例一: 1.在某页面中有一个图片和五个超链接,如下图所示: 单击不同的数字超链接显示不同的图片: 图1 图片幻灯片显示效果提示: (1)默 ...
JavaScript制作时钟特效
需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...
HTML+JavaScript制作表白特效，表白不成功，小编现场吃雪
今年的雪特别美,长沙自从08年后的最大的一场学了,今天小编给大家制作一个表白特效,希望大家喜欢,如果你是程序员希望对你有帮助,追到你喜欢的女孩,哈哈~追不到对象,小编现场吃学给你大家看下图是爱心飘落 ...
使用JavaScript制作页面效果3
一. 1.下拉列表:select对象属性: option[ ]:选项数组 selectedIndex:被选中选项的索引号 length:选项总数方法: add(option对象,添加位置):增加选 ...
利用Javascript制作网页特效（其他常见特效）
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...
利用Javascript制作网页特效（窗口特效）
全屏显示窗口利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...
利用Javascript制作网页特效（图像特效）
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...

随机推荐

30天代码day4 Class vs. Instance
Class A blueprint defining the charactaristics and behaviors of an object of that class type. Class ...
安装了低版本Jdk后eclipse无法打开的终极解决方法
环境jdk1.7.0_17,eclipse oxygen(2017年6月发布) 因为之前安装的是jdk1.8.0_144,所以eclipse的相关配置都修改成了jdk1.8的版本,然而,近期因为某些原 ...
php 服务端允许跨域访问
加上需要允许跨域访问,配置如下(一下配置内容前不允许有其他任何输出操作): //设置允许跨域的请求源地址//方式一:header("Access-Control-Allow-Origin: ...
XSS(四)攻击防御
XSS Filter XSS Filter的作用是过滤用户(客户端)提交的有害信息,从而达到防范XSS攻击的效果 XSS Filter作为防御跨站攻击的主要手段之一,已经广泛应用在各类Web系统之中, ...
选择排序-C#
选择排序包括:简单选择排序和堆排序简单选择排序: 基本思路:从所有序列中先找到最小的,然后放到第一个位置.之后再看剩余元素中最小的,放到第二个位置……以此类推 /// <summary> ...
slb
第一章弹性负载均衡slb概要介绍第一讲什么是弹性负载均衡slb 互联网应用的服务扩展负载均衡诞生 slb的引出 slb产品介绍负载均衡 server load balancer 是对多台云 ...
16路PWM输出的pca9685模块
今天要介绍的就是该模块,该模块是16路pwm模块,使用I2C总线可以控制16路舵机(led). 接线OE空着就可以,其他VCC是芯片供电+5,SCL时钟线,SDA信号线,GND地线. 芯片介绍可以看: ...
Java工程师可以从事的几大职业
在重庆,程序员一直被认为是高薪职业,Java作为最受欢迎的语言,是很多初入行的人都会选择的方向.那么学习之后可以从事哪些工作呢?下面小编就给大家介绍一下. 一.大数据技术 Hadoop以及其他大数据处 ...
k8s基于CA签名的双向数字证书认证（三）
1.设置kube-apiserver的CA证书相关的文件和启动参数 1)创建CA证书和私钥相关的文件 openssl genrsa -out ca.key openssl req -x509 -n ...
SoapUI测试WebService接口
Getting Started Getting started with some ad-hoc testing of a SOAP service is straight forward; se ...

使用JavaScript制作页面特效2

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

随机推荐

热门专题