js DOM 案例
阿新 • • 發佈：2018-12-06
模態框
<html>
<head>
<meta charset="UTF-8">
<title>模態框</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#bg {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
#login {
width: 300px;
height: 300px;
border-radius: 3px;
background-color: #fff;
line-height: 300px;
text-align: center;
margin: 0 auto;
position: relative;
}
#close {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background-color: red;
line-height: 20px;
text-align: center;
color: green;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn">登入</button>
<!-- 需求：
開啟網頁時，點選登入顯示一個背景圖，中心 彈出一個登入框，登入框 右上角有關閉按鈕 點選關閉 關閉登入框
-->
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
// 1.點選登入按鈕 彈出登入框
// 背景
var oBg = document.createElement('div');
// 登入框
var oLogin = document.createElement('p');
// 關閉按鈕
var oClose = document.createElement('span');
oBg.id = 'bg';
oLogin.id = 'login';
oClose.id = 'close';
oClose.innerText = 'X';
oLogin.innerHTML = '登入框成功彈出';
// 追加
oBg.appendChild(oLogin);
oLogin.appendChild(oClose);
console.log($('btn'));
$('btn').onclick = function() {
this.parentNode.appendChild(oBg);
this.style.display = ' none';
}
oClose.onclick = function() {
oBg.parentNode.removeChild(oBg);
$('btn').style.display = 'inline-block';
}
</script>
</body>
</html>
留言板
<!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>
模擬hover選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
button.active{
background-color: green;
}
</style>
</head>
<body>
<button class="active">按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script type="text/javascript">
// 需求： 滑鼠懸浮 哪個button上，該button變成綠色的背景（新增類 active）
var oBtns = document.getElementsByTagName('button');
for(var i = 0; i < oBtns.length; i++){
oBtns[i].onmouseover = function(){
// 重要： 排他思想: 先把所有按鈕的className設定為空，然後把（this）當前這個按鈕的className設定active
for(var j = 0;j < oBtns.length; j++){
oBtns[j].className = '';
}
this.className = 'active';
}
}
for(var i = 0;i < oBtns.length; i++){
oBtns[i].onmouseout = function(){
this.className = '';
}
}
</script>
</body>
</html>
tab欄選項卡
<!DOCTYPE html>
<html lang="en">
<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;
}
#tab ul li {
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #ccc;
}
#tab ul li a {
color: black;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#tab ul li.active {
background-color: red;
}
#tab p {
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
#tab p.active {
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="javascript:void(0);">首頁</a>
</li>
<li>
<a href="javascript:void(0);">新聞</a>
</li>
<li>
<a href="javascript:void(0);">圖片</a>
</li>
</ul>
<p class="active">首頁內容</p>
<p>新聞內容</p>
<p>圖片</p>
</div>
<script type="text/javascript">
// 需求： 滑鼠放在上面，li上 li本身變色（新增類） 對應下面p也顯示出來（新增類）
// 思路： 1.點亮上面的盒子 2 利用索引值來顯示下面的盒子
/*
// 變數提升
var a;
console.log(a);//undefined
a = 10;
console.log(a);
*/
var tabLi = document.getElementsByTagName('li');
var tabP = document.getElementsByTagName('p');
for(var i = 0; i < tabLi.length; i++) {
// 將 i儲存到 li標籤物件中
tabLi[i].index = i;
// for迴圈和點選事件 誰快 i 全域性作用域（塊級作用域） 3
tabLi[i].onclick = function() {
for(var j = 0; j < tabLi.length; j++) {
tabLi[j].className = '';
tabP[j].className = '';
}
this.className = 'active';
// Cannot set property 'className' of undefined
console.log(i);
tabP[this.index].className = 'active';
}
}
</script>
</body>
</html>
購物車案例
<!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>
下拉選單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
margin: 50px;
width: 200px;
border: 1px dashed #bbb;
}
#box ul{
width: 100%;
overflow: hidden;
height: 31px;
/*overflow: hidden;
height: 31px;*/
}
#box ul.show{
height: auto;
}
#box ul li{
list-style: none;
width: 100%;
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
font-size: 12px;
font-weight: bold;
}
#box ul li.title{
cursor: pointer;
height: 30px;
background: pink;
line-height: 30px;
font-size: 14px;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul class="show">
<li class="title">同事</li>
<li>佳能</li>
<li>which</li>
<li>林瀧</li>
<li>rose</li>
</ul>
<ul>
<li class="title">好友</li>
<li>梨子</li>
<li>蘋果</li>
</ul>
<ul>
<li class="title">學員</li>
<li>長風</li>
<li>沙通</li>
<li>徐薇</li>
<li>許雲朋</li>
</ul>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" >
/* jquery寫法
* $(function(){
var oUl= $("ul");
var length = $("ul").length;
console.log(length);
$("ul").click(function(event){
$(this).addClass("show").siblings('ul').removeClass('show');
})
});*/
var oUl = document.getElementsByTagName("ul");
var length = oUl.length;
var index = 0;
for(var i = 0 ; i < length ; i ++){
oUl[i].aa = i;
oUl[i].onclick = function () {
oUl[index].className = "";
index = this.aa;
oUl[index].className = "show";
}
}
</script>
</body>
</html>
