使用JavaScript制作页面特效2
1.Date对象的常用方法
setFullYear()
setMonth()
setDate()
setHours()
setMinutes()
setSeconds()
定时函数
setTimeout:等待某段时间后调用某个函数(1次)
语法:setTimeout("调用的函数名称",等待时间)
消除:clearTimeout()
setInterval:每隔某段时间反复调用某个函数(多次)
语法:setInterval("调用的函数名称",间隔时间)
清除:clearInterval()
实例
HTML代码:
<html>
<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>
<div id="myclock"></div>
</body>
运行结果
注意一点:调用函数不能写在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="改变图片" οnclick="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" οnclick="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="增加一幅图片" οnclick="newNode()" /><input id="b1" type="button" value="增加一个选项" οnclick="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了
转载于:https://www.cnblogs.com/zp-frighting/p/10498463.html
使用JavaScript制作页面特效2相关推荐
- 用JavaScript制作页面特效
1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
- JavaScript制作页面倒计时器
制作页面倒计时器,选定一个未来时间,得到几天几时几分几秒的倒计时. 在这里选择使用两个时间相差的毫秒数来计算相对应的天数.小时数.分钟数和秒数.为了使代码看起来简洁,进行了封装函数. 1.setInt ...
- 利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- 教你用JavaScript制作鼠标特效
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个鼠标爱心特效.鼠标在页面移动时会出现彩色爱心特效.通过实战我们将学会createE ...
- 用javaScript制作爱心特效
爱心特效 源代码 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- 使用JavaScript制作页面效果3
一. 1.下拉列表:select对象 属性: option[ ]:选项数组 selectedIndex:被选中选项的索引号 length:选项总数 方法: add(option对象,添加位置):增加选 ...
- 利用Javascript制作网页特效(图像特效)
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)';this. ...
最新文章
- CAS Server(二):基于SpringBoot搭建客户端
- 找不到托盘菜单配置文件_随手在仓库捡的木托盘,简单改造一下,10件家具不用买了...
- 你真的了解 timeout 吗?
- 再有人问你volatile是什么,就把这篇文章发给他
- 云服务器,价格其实不便宜,但为什么还要用呢
- python从0到1_Python学习,从0到1
- matlab 函数pdf怎么用_pdf加水印怎么加?这个实用pdf编辑工具可以用
- Netty入门3之----Decoder和Encoder
- 360安全卫士对于易量安装打包的可执行程序进行病毒误报
- Python使用pyodbc访问数据库操作方法详解
- 计算机四级考448分算低吗,英语4级成绩,四级300多成绩单有用吗。
- vb与c语言数组传递,在VB中调用C/C++语言编写的dll,数组参数的传递
- android 照片变油画,最近很火照片变油画Glaze软件
- 情侣的网站代码java_GitHub - ByronCui/lovers-website: 程序员的情侣网站 (programmer's website of lovers)...
- 程序员如何找对象(1)
- python基础--截图提取图中文字存入Excel表
- ESP32编译运行ADF音频库
- 微信小程序播放背景音乐,关闭背景音乐的操作
- Python字符串的索引与切片
- postgresql: pg_ctl -D data start 出现 postgres aaaaaaaaaaaaaaaaaaaaaaaaa C:/Users/huang zhen yang/dat
热门文章
- ThreadLocal源码分析-黄金分割数的使用
- 如何防止软件被破解?
- 突然 Gitee 倒下了!!!
- RLChina2022-强化学习暑期课程-博弈搜索算法
- Java怎么打开TMX,Otter TMX
- tmx瓦片地图文件内容的解析与地图自动生成
- iOS学习笔记 --微博登录 redirect_uri_mismatch 错误
- React学习(十)-React中编写样式CSS(styled-components)
- .Net core基于xUnit的单元测试查看测试覆盖率
- 阿里云ECS服务器实例挂载数据盘步骤