JavaScript页面特效
一、BOM概述javascript
二、window对象的经常使用方法html
1）confirm()与alert()方法事例：java
// JavaScript Document
function showInfo () {
var flag = confirm("确认删除该订单吗？");
if (flag == true) {
alert("删除成功！");
} else {
alert("取消删除。");
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/index-11.js"></script> </head> <body> <input type="button" value="确认删除订单" onclick="showInfo();"/> </body> </html>
2）open方法：node
三、history对象的经常使用方法web
四、location对象的经常使用方法app
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口</title> </head> <body> <a href="javascript:location.href='index-8.html'">跳转</a> <a href="javascript:location.reload();">刷新</a> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <a href="javascript:history.back();">返回主菜单</a> </body> </html>
五、document对象的经常使用属性函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口</title> </head> <body> <a href="javascript:location.href='index-8.html'">跳转</a> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
document.write("连接来源：" + document.referrer + "</br>");
document.write("当前网页的URL:" + document.URL);
</script>
</head>
<body>
<a href="javascript:history.back();">返回主菜单</a>
</body>
</html>
运行结果：ui
连接来源：http://localhost/index-9.html
当前网页的URL:http://localhost/index-8.html 返回主菜单spa
注：必须设置IIS，不然连接来源为空code
六、document对象的经常使用方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>document对象经常使用方法</title> <script type="text/javascript" src="js/index-101.js"></script> </head> <body> <div id="node">新浪</div> <input type="button" name="b1" value="改变层内容" onclick="changeLink();"/><br /> <input name="season" type="text" value="春"/> <input name="season" type="text" value="夏"/> <input name="season" type="text" value="秋"/> <input name="season" type="text" value="冬"/><br /> <input name="b2" type="button" value="显示input内容" onclick="showAllInput();"/> <input name="b3" type="button" value="显示season内容" onclick="showSeasonInput();"/> <p id="s"></p> </body> </html>
// JavaScript Document
function changeLink () {
document.getElementById("node").innerHTML = "搜狐";
}
function showAllInput () {
var inputArr = document.getElementsByTagName("input");
var arrStr = "";
for (var i = 0 ; i < inputArr.length ; i++) {
arrStr += inputArr[i].value + "<br/>"
}
document.getElementById("s").innerHTML = arrStr;
}
function showSeasonInput () {
var seasonArr = document.getElementsByName("season");
var arrStr = "";
for (var i = 0 ; i < seasonArr.length ; i++) {
arrStr += seasonArr[i].value + "<br/>"
}
document.getElementById("s").innerHTML = arrStr;
}
运行结果：
七、制做复选框全选/全不选效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>document对象经常使用方法</title> <script type="text/javascript" src="js/index-101.js"></script> </head> <body> <input id="all" type="checkbox" value="全选" onclick="check();"/>全选<br/> <input name="fruit" type="checkbox" value="1"/>苹果<br/> <input name="fruit" type="checkbox" value="2"/>香蕉<br/> <input name="fruit" type="checkbox" value="3"/>橘子<br/> </body> </html>
// JavaScript Document
function check () {
var fruitArr = document.getElementsByName("fruit");
for (var i = 0 ; i < fruitArr.length ; i++) {
if (document.getElementById("all").checked == true) {
fruitArr[i].checked = true;
} else {
fruitArr[i].checked = false;
}
}
}
八、Date对象实现时钟特效
1）建立Date对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document对象经常使用方法</title>
<script type="text/javascript">
function disptime () {
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("mylock").innerHTML = "<h1>如今是：" + hh + ":" + mm + ":" + ss + " </h1>";
}
//window.onload = disptime;
window.onload = function () {
disptime();
}
</script>
</head>
<body>
<div id="mylock"></div>
</body>
</html>
注意：调用函数的两种方法
2）定时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document对象经常使用方法</title>
<script type="text/javascript">
function disptime () {
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("mylock").innerHTML = "<h1>如今是：" + hh + ":" + mm + ":" + ss + " </h1>";
}
var timer;
function interval () {
timer = setInterval("disptime()", 1000);
}
// 中止计时器
clearInterval(timer);
//window.onload = disptime;
window.onload = function () {
interval();
}
</script>
</head>
<body>
<div id="mylock"></div>
</body>
</html>
九、什么是DOM
十、DOM组成
十一、DOM节点树
十二、访问节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点</title>
<script type="text/javascript">
// 删除节点类型为文本而且节点值为空的节点
function delNullNode (element) {
var element_childs = element.childNodes;
for (var i = 0 ; i < element_childs.length ; i++) {
if (element_childs[i].nodeType == 3 && /^\s*$/.test(element_childs[i].nodeValue)) {
element.removeChild(element_childs[i]);
}
}
return element;
}
function showNode () {
var imgObj = document.getElementById("imgChun");
var imgParent = delNullNode(imgObj.parentNode);
alert(imgParent.nodeName);
var bodyFirstChild = imgParent.firstChild;
alert(bodyFirstChild.nodeName);
var bodyLastChild= imgParent.lastChild;
alert(bodyLastChild.nodeName);
}
</script>
</head>
<body>
<img src="images/钱塘湖春行.jpg" alt="图片" id="imgChun"/>
<h1>钱塘湖春行</h1>
<input type="button" value="查找节点" onclick="showNode();"/>
<p>DOM应用</p>
</body>
</html>
1三、操做节点属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操做属性</title>
<script type="text/javascript">
function change () {
var img = document.getElementsByTagName("img");
//img[0].setAttribute("src","images/钱塘湖春行2.jpg");
img[0].src = "images/钱塘湖春行2.jpg"; }
</script>
</head>
<body>
<img src="images/钱塘湖春行.jpg" alt="图片"/>
<input type="button" value="改变图片" onclick="change();"/>
</body>
</html>
1四、建立节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function newNode () {
var image = document.createElement("img");
image.src = "images/钱塘湖春行2.jpg";
document.body.appendChild(image);
}
function addAnswer () {
var liElement = document.createElement("li");
var inputElement = document.createElement("input");
inputElement.type = "text";
inputElement.type = "answer";
liElement.appendChild(inputElement);
document.getElementById("questions").appendChild(liElement);
}
</script>
</head>
<body>
<h2>钱塘湖春行</h2>
<input id="b1" type="button" value="增长一幅图片" onclick="newNode();"/>
<input id="b2" type="button" value="增长一个选项" onclick="addAnswer();"/>
<img src="images/钱塘湖春行.jpg" id="pic1" alt="图片1"/>
<img src="images/钱塘湖春行2.jpg" id="pic2" alt="图片2"/>
<ol id="questions">
<li><input type="text" name="answer"/></li>
</ol>
</body>
</html>
删除节点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function delNullNode (element) {
var element_childs = element.childNodes;
for (var i = 0 ; i < element_childs.length ; i++) {
if (element_childs[i].nodeType == 3 && /^\s*$/.test(element_childs.nodeValue)) {
element.removeChild(element_childs[i]);
}
}
return element;
}
function newNode () {
var image = document.createElement("img");
image.src = "images/钱塘湖春行2.jpg";
document.body.appendChild(image);
}
function addAnswer () {
var liElement = document.createElement("li");
var inputElement = document.createElement("input");
inputElement.type = "text";
inputElement.type = "answer";
liElement.appendChild(inputElement);
document.getElementById("questions").appendChild(liElement);
}
function delNode () {
var parentNode = delNullNode(document.body);
var lastChild = parentNode.lastChild;
if (lastChild.nodeName = "img") {
parentNode.removeChild(lastChild);
}
}
</script>
</head>
<body>
<h2>钱塘湖春行</h2>
<input id="b1" type="button" value="增长一幅图片" onclick="newNode();"/>
<input id="b3" type="button" value="删除一幅图片" onclick="delNode();"/>
<input id="b2" type="button" value="增长一个选项" onclick="addAnswer();"/>
<img src="images/钱塘湖春行.jpg" id="pic1" alt="图片1"/>
<img src="images/钱塘湖春行2.jpg" id="pic2" alt="图片2"/>
<ol id="questions">
<li><input type="text" name="answer"/></li>
</ol>
</body>
</html>
相关文章
- 1. JavaScript特效1——页面特效
- 2. 个性JavaScript特效页面大全
- 3. JavaScript特效源码(七、页面特效二)
- 4. 页面特效大集合
- 5. 仿github404页面特效
- 6. 高仿Instagram 页面效果android特效
- 7. Javascript网页特效开发技巧
- 8. JavaScript 常见移动端网页特效
- 9. javaScript 网页特效 输出语句
- 10. JavaScript 常见PC端网页特效
- 更多相关文章...
- • XSL-FO 页面 - XSL-FO 教程
- • jQuery Mobile 页面 - jQuery Mobile 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • JDK13 GA发布：5大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
