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大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
