DOM操作相關案例 模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例
阿新 • • 發佈：2018-08-18
order 選擇器 點擊 ttr 選擇 this 鼠標懸停 pos 清空 
1.模態框案例
需求：
打開網頁時有一個普通的按鈕，點擊當前按鈕顯示一個背景圖，中心並彈出一個彈出框，點擊X的時候會關閉當前的模態框
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<button id="btn">彈出</button>
</body>
<script type="text/javascript">
//獲取dom元素 1.獲取事件源
var oBtn = document.getElementById(‘btn‘);
//創建彈出模態框的相關DOM對象
var oDiv = document.createElement(‘div‘);
var oP = document.createElement(‘p‘);
var oSpan = document.createElement(‘span‘);
// 設置屬性
oDiv.id = ‘box‘;
oP.id = ‘content‘
oP.innerHTML = ‘模態框成功彈出‘
oSpan.innerHTML = ‘X‘;
oSpan.id = ‘span1‘
// 追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan);
// 點擊彈出按鈕 彈出模態框
oBtn.onclick = function(){
//動態的添加到body中一個div
this.parentNode.insertBefore(oDiv,oBtn)
}
// 點擊X 關閉模態框
oSpan.onclick = function(){
// 移除oDiv元素
oDiv.parentNode.removeChild(oDiv)
}
</script>
</html>
2.簡易留言板
需求：
當在textarea中輸入內容，點擊留言按鈕，會添加到瀏覽器中
圖如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.close{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: rgba(0,0,0,.1);
margin-left: 20px;
}
</style>
</head>
<body>
<h1>簡易留言板</h1>
<div id="box">
<!--<ul>
</ul>-->
</div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言"/>
<button onclick="sum()">統計</button>
</body>
<script type="text/javascript">
// 0 將ul標簽添加到div#box標簽中
var oUl = document.createElement(‘ul‘);
var oBox = document.getElementById(‘box‘);
oBox.appendChild(oUl);
var oBtn = document.getElementById(‘btn‘);
var oMsg = document.getElementById(‘msg‘)
// 控制留言的總數量
var count = 0;
oBtn.onclick = function(){
// 點擊留言按鈕事件操作
// 1.創建li標簽
var oLi = document.createElement(‘li‘);
//2.設置內容
oLi.innerHTML = oMsg.value + "<span class=‘close‘>X</span>"
// 3.如果想在插入的第一個li獲取的前面繼續添加li標簽
//3.1獲取li標簽
var olis = document.getElementsByTagName(‘li‘);
//3.2 如果是第一次添加的li標簽，則直接添加到ul的後面
if(olis.length == 0){
oUl.appendChild(oLi);
count++;
}else{
// 3.3 如果不是第一次添加的li標簽，則插入到第一個li標簽的前面
oUl.insertBefore(oLi,olis[0]);
count++;
}
// 4.添加完成之後 清空textarea的值
oMsg.value = ‘‘;
// 5.點擊X的時候刪除當前的一條數據
//5.1先獲取所有的X
var oSpans = document.getElementsByTagName(‘span‘);
// 5.2for循環 對所有的X添加點擊事件
for(var i = 0; i< oSpans.length; i++){
oSpans[i].onclick = function(){
// 5.3 移除當前的li標簽
oUl.removeChild(this.parentNode)
count--;
}
}
}
function sum(){
alert(‘一共發布了‘+count+‘條留言‘);
}
</script>
</html>
3.使用js模擬選擇器中hover
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
//需求：鼠標放到哪個button上，改button變成黃色背景（添加類）
var btnArr = document.getElementsByTagName("button");
//綁定事件
for(var i=0;i<btnArr.length;i++){ //要為每一個按鈕綁定事件，所以用到了for循環
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按鈕的className設置為空，然後把我（this）這個按鈕的className設置為current
//排他思想和for循環連用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代碼
}
}
//鼠標離開current時，還原背景色
for(var i=0;i<btnArr.length;i++){ //要為每一個按鈕綁定事件，所以用到了for循環
btnArr[i].onmouseout = function () { //鼠標離開任何一個按鈕時，就把按鈕的背景色還原
this.className = "";
}
}
</script>
</body>
</html>
代碼解釋：
鼠標懸停時，current欄變色，這裏用到了排他思想：先把所有按鈕的className設置為空，然後把我(this)這個按鈕的className設置為current，就可以達到變色的效果。核心代碼是：
//排他思想：先把所有按鈕的className設置為空，然後把我（this）這個按鈕的className設置為current
//排他思想和for循環連用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
4.tab欄選項卡
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首頁</a>
</li>
<li>
<a href="#">新聞</a>
</li>
<li>
<a href="#">圖片</a>
</li>
</ul>
<p class="active">首頁內容</p>
<p>新聞內容</p>
<p>圖片內容</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求：鼠標放到上面的li上，li本身變色(添加類)，對應的p也顯示出來(添加類);
//思路：1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。
var tabli = document.getElementsByTagName(‘li‘);
var tabContent = document.getElementsByTagName(‘p‘)
for(var i = 0; i < tabli.length; i++){
// 綁定索引值（新增一個自定義屬性：index屬性）
tabli[i].index = i;
tabli[i].onclick = function(){
// 1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = ‘‘;
tabContent[j].className = ‘‘;
}
this.className = ‘active‘
tabContent[this.index].className = ‘active‘;//【重要代碼】
}
}
}
</script>
</html>
5、購物車案例
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 400px;
margin: 100px auto;
background-color: rgba(255,255,255,0.4);
position: relative;
}
.car{
width: 150px;
height: 30px;
background-color: #fff;
padding-left: 30px;
position: absolute;
left: 130px;
top: 3px;
z-index: 3;
border: 1px solid green;
}
.shop{
width: 310px;
height: 70px;
background-color: #fff;
position: absolute;
top:33px;
left: 0;
display: none;
}
div.c{
border-bottom-width: 0;
}
div.t{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">我的購物車</div>
<div class="shop t" id="shop"></div>
</div>
<script type="text/javascript">
var myCar = document.getElementById(‘myCar‘);
var shop = document.getElementById(‘shop‘);
myCar.onmouseover = function(){
shop.style.display = ‘block‘;
myCar.className +=‘ c‘;
}
myCar.onmouseout = function(){
shop.style.display = ‘none‘;
myCar.removeAttribute(‘class‘);
myCar.className = ‘car‘;
}
</script>
</body>
</html>
DOM操作相關案例 模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例