javaScript項目案例
儲備知識，感覺玩dom主要是玩document這個類
1.Dom操作
在js中所有標簽都屬於節點。dom是一個倒着的樹，樹根為html標簽
創建節點
createElement():傳入標簽類型,創建一個結點
示例：var oP = document.createElement('p');
獲取節點
這些都是位於document的方法
常用的節點方法
這個都是節點的方法
設置節點內容
innerHTML:將內容解析HTML腳本寫入標簽內 示例：oP.innerHTML = i <strong>love</strong> you innerText:將內容以文本的形式寫入標簽內 示例：oP.innerHTML = i love you 注意：innerHTML可以解析標簽，innerText將內容原封不動的填入標簽內 設置元素id:oP.id='op1'; 設置類名class:oP.className='para1';
設置style屬性
示例：oP.style.backgroundColor = 'blue'; 注意：style屬性內的用-表示的，在js中全部變為駝峰式寫法，而且設置屬性要用引號引起來 例如設置字體大小 在css中：font-size = 16px; 在js中：oP.style.fontSize = '16px';
-
用js在網頁上寫一個hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>寫一個hello world</title>
</head>
<body>
</body>
<script type="text/javascript">
var oP = document.createElement('p');
var body = document.getElementsByTagName('body');
oP.innerHTML = 'hello world';
body[0].appendChild(oP);
</script>
</html>
-
模態框案例
其實，就是運用btn.onclick將單擊事件的函數改為新的匿名函數。單擊一次，就調用一次對象下面的onclick方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模態框案例</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
html,body{
height: 100%;
}
#wrapper{
width:100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
#p1{
position: relative;
top:150px;
width:400px;
height: 200px;
text-align: center;
line-height: 200px;
margin:auto;
background-color: white;
}
#span1{
position: absolute;
right: 0;
top:0;
width: 30px;
height: 30px;
font-size: 20px;
line-height: 30px;
text-align: center;
color: #ffffff;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">點我一下</button>
</body>
<script type="text/javascript">
/*思路：
* 1.創建一個div盒子，設置好屬性
* 2.添加p標簽和span標簽，分別設置好位置，分別插入到div標簽里
* 3.定義button單擊事件
* */
var oDiv = document.createElement('div'); //創建一個盒子
var oP = document.createElement('p');
var oSpan = document.createElement('span');
var btn = document.getElementById('btn');
var body = document.getElementsByTagName('body');
btn.onclick = function () {
oP.innerText = 'This is True music';
oSpan.innerText = 'X';
oDiv.appendChild(oP);
oP.appendChild(oSpan);
oDiv.id = 'wrapper';
oP.id = 'p1';
oSpan.id = 'span1';
body[0].insertBefore(oDiv,btn);
}
oSpan.onclick = function(){
body[0].removeChild(oDiv);
}
</script>
</html>
-
點擊有驚喜
這個例子，主要就是用計數器記錄點擊次數，每點擊一次標簽，就會調用一次該函數，計數器加1，從而控制標簽顏色和文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點擊有驚喜呦</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
#surprised{
width:400px;
height: 200px;
font-size: 30px;
text-align: center;
line-height: 200px;
margin: 20px auto;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div id="surprised">
點擊有驚喜呦！！！
</div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('surprised');
var clickTimer = 0;
oDiv.onclick = function () {
switch(clickTimer % 4){
case 1:
this.style.backgroundColor = 'green'; //this在這里就是指當點擊事件的對象oDiv
this.innerText = '再次點擊試試';
break;
case 2:
this.style.backgroundColor = 'orange';
this.innerText = '哈哈，騙你的';
break;
case 3:
this.style.backgroundColor = 'red';
this.innerText = '真的沒了！！！';
break;
default:
this.style.backgroundColor = 'blue';
this.innerText = '點擊有驚喜呦！！！';
}
clickTimer++;
}
</script>
</html>
-
制作一個簡易留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
</style>
</head>
<body>
<h1>簡易留言板</h1>
<div class="wrapper">
<ul id="words"></ul>
</div>
<textarea id="msg"></textarea>
<button id="btn1">留言</button>
<button id="btn2" onclick="sum()">統計</button>
</body>
<script type="text/javascript">
//ul 是用來存儲留言記錄
var ul = document.getElementById('words');
var msg = document.getElementById('msg');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var liCount = 0; //用來記錄留言數目的
btn1.onclick = function () {
if(!msg.value){
alert('留言板里沒有內容')
}else{
/*將留言插入頂部的具體方法
*1.判斷ul中有無元素，沒有則使用append，有則使用insertbefore
* 2.插入信息同時插入一個span標簽，用來設置關閉按鈕
* */
var li = document.createElement('li');
li.innerHTML = msg.value + ' <span>X</span>';
if(liCount == 0)
{
ul.appendChild(li);
liCount++;
}else{
ul.insertBefore(li,ul.childNodes[0]);
liCount++;
}
msg.value = '';
}
oSpans = document.getElementsByTagName('span');
for(var i = 0;i < oSpans.length;i++){
oSpans[i].onclick = function(){
ul.removeChild(this.parentNode);
liCount--;
}
}
};
function sum() {
alert('一共有'+liCount+'條信息');
}
</script>
</html>
通過這個簡易留言板例子，
第一，不要取消margin，padding，否則h1標題沒有內邊距，很難看；
第二，設置span標簽點擊事件必須在btn1按鈕內，因為js里面代碼是從上向下執行的，btn.onclick就是添加調用方法；如果直接把span這段代碼放在下面，因為剛開始沒有spans標簽，也就沒有執行這段代碼。要是放在btn的onclick里面，每次調用時，就會自動給每個span添加一個調用方法
-
制作選項卡
這個例子主要是用了，將三個p標簽隱藏起來，只顯示含active類的標簽，通過js點擊事件，切換p標簽之間的顯隱達到目的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
height: 100%;
}
.wrapper{
width: 600px;
border: 1px solid red;
margin: 30px auto;
}
ul{
list-style: none;
overflow: hidden; /*注意要清除浮動*/
}
ul a{
display: block;
text-decoration: none;
width:200px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
}
ul li{
float: left;
background-color: rgba(0,0,0,.3);
}
p{
width: 600px;
height: 150px;
line-height: 150px;
text-align: center;
display: none;
}
ul li.active{
background-color: #ffffff;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="active"><a href="#" >首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">熱賣</a></li>
</ul>
<p id="home" class="active">首頁內容</p>
<p id="news">新聞內容</p>
<p id="hotPurchase">熱賣內容</p>
</div>
</body>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
var ps = document.getElementsByTagName('p');
for(var i = 0;i < lis.length;i++){
lis[i].index = i; //這個用來記錄每個標簽的遍歷位置，不用this，這里this指代的應該是window
lis[i].onclick = function () {
/*思路
* 1.清除所有標簽上的active
* 2.將單擊的li和p標簽都添加active屬性
* */
//清空class
for(var j = 0;j < lis.length;j++){
lis[j].className = '';
ps[j].className = '';
}
//注意：這有個坑，不能跳！！！不能用遍歷的i，要用this下的屬性index
this.className = 'active';
ps[this.index].className = 'active';
}
}
</script>
</html>
這里要注意，在378行不能用i來代表標簽的索引，(因為i的值在不斷變化,遍歷結束時，這里i最終值為4，即當觸發單擊事件時，獲取的i的值為4，而不是當初遍歷中i的值)。他們得到i都是引用哦，不是一個純數字。
-
淘寶搜索框制作
這個例子主要用到了input和label兩個標簽，以及js的oninput來實現的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘寶搜索框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
width: 800px;
margin: 30px auto;
}
ul{
list-style: none;
overflow: hidden;
}
ul li{
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
}
li a{
text-decoration: none;
color: red;
}
li.active{
background-color: red;
}
li.active a{
color: #ffffff;
}
.search{
margin: 20px 0;
position: relative;
}
#txt{
display: block;
outline: none;
width: 800px;
height: 50px;
position: absolute;
border:3px solid orange;
border-radius: 10px;
}
#lab{
display: block;
position: absolute;
top:15px;
left:30px;
font-size: 20px;
color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="active"><a href="#">寶貝</a></li>
<li><a href="#">天貓</a></li>
<li><a href="#">店鋪</a></li>
</ul>
<div class="search">
<input type="text" id="txt">
<label for="txt" id="lab">請輸入要購買的商品</label>
</div>
</div>
</body>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
for(var i = 0;i < lis.length;i++){
lis[i].onclick = function () {
for(var j = 0;j < lis.length;j++){
lis[j].className = '';
}
this.className = 'active';
}
}
var txt = document.getElementById('txt');
var lab = document.getElementById('lab');
//oninput函數功能是，當點擊輸入框時觸發的事件
txt.oninput = function () {
if(this.value == ''){ //這里this指代的是txt
lab.style.display = 'block';
}
else
{
lab.style.display = 'none';
}
}
</script>
</html>
剛開始，測試時候，發現輸入框無法輸入；后來仔細檢查了一遍，發現his.value == ''寫成了his.value = ‘’，導致每次輸入時，都會給輸入框自動賦值空字符
-
動態時間制作
這里主要用了setInterval定時器函數,每隔一秒執行一次函數，這個函數作用是獲得最新時間，寫入p標簽中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態時間制作</title>
</head>
<body>
</body>
<script type="text/javascript">
var oP = document.createElement('p');
var body = document.getElementsByTagName('body');
body[0].appendChild(oP);
//創建一個時間對象，得到年月日，時分秒
setInterval(function(){
var myDate = new Date();
var y = myDate.getFullYear();
var m = myDate.getMonth();
var d = myDate.getDay();
var h = myDate.getHours();
var minu =myDate.getMinutes();
var s = myDate.getSeconds();
oP.innerHTML = '今天是 '+ y +'年 '+m+'月 '+d+'日 '+h+':'+twoNum(minu)+':'+twoNum(s);
},1000);
function twoNum(n){
return n > 9 ? n:'0'+n;
}
</script>
</html>
-
勻速運動
通過定時器函數setInterval函數和清除定時器函數clearInterval。兩個函數實現的，主要思想時，每執行一次定時器，改變一次left數字達到看上去小方塊在移動的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>勻速運動案例</title>
<style type="text/css">
#diamond{
width:100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top:50px;
}
</style>
</head>
<body>
<button id="btn">運動吧！小方塊</button>
<div id="diamond"></div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var dia = document.getElementById('diamond');
var count = 0;
btn.onclick = function () {
time = setInterval(function(){
//注意這里要帶單位px
count += 10;
if(count % 800 == 0){
count = 0;
clearInterval(time); //運動到800px關閉定時器
}
dia.style.left = count + 'px';
},10)
};
</script>
</html>
注意：clearInterval清除定時器函數必須要接受一個值，這個值正是定時器返回的值，count += 10這行代碼可以通過改變右值改變小方塊運動速度。
-
設置五秒關閉廣告
這個例子主要用了定時器，和固定定位相關的知識，5s秒后自動關閉廣告。window.onload這個函數的功能是，加載頁面時自動運行相應的函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>設置5s關閉廣告</title>
<style type="text/css">
img{
width: 200px;
height: 800px;
position: fixed;
top: 0;
}
#pict1{
right: 0;
}
#pict2{
left: 0;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="ad-one.jpg" alt="" id="pict1">
<img src="ad-two.jpg" alt="" id="pict2">
</div>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
</body>
<script type="text/javascript">
window.onload = function(){
var imgs = document.getElementsByTagName('img');
setTimeout(function () {
imgs[0].style.display = 'none';
imgs[1].style.display = 'none';
},5000)
};
</script>
</html>
-
設置五秒關閉廣告(升級版)
設置一個定時器，在網頁上顯示倒計時后，再顯示關閉x，設定單擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>設置5s關閉廣告</title>
<style type="text/css">
img{
width: 200px;
height: 800px;
position: fixed;
top: 0;
}
/*.pict{*/
/*position: relative;*/
/*}*/
.pict1{
top: 0;
left: 0;
}
.pict2{
top: 0;
right: 0;
}
p{
text-align: center;
font-size: 30px;
}
span{
position: fixed;
display: block;
width: 50px;
height: 50px;
text-align: center;
;line-height: 50px;
background-color:rgba(0,0,0,.5);
z-index: 10;
color: #ffffff;
}
.span2{
top:750px;
right: 150px;
}
.span1{
top:750px;
left: 150px;
}
</style>
</head>
<body>
<div class="pict">
<span class="span1"></span>
<img class="pict1" src="ad-one.jpg" alt="">
</div>
<div class="pict">
<span class="span2"></span>
<img class="pict2" src="ad-two.jpg" alt="">
</div>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
<p>性感美女，在線發牌</p>
</body>
<script type="text/javascript">
window.onload = function(){
var picts = document.getElementsByClassName('pict');
var spans = document.getElementsByTagName('span');
var count = 5;
time = setInterval(function(){
if(count == 0){
for(var i = 0;i < spans.length;i++)
{
spans[i].index = i;
spans[i].innerText = 'X';
spans[i].onclick = function(){
picts[this.index].style.display = 'none';
};
}
clearInterval(time);
}
else{
spans[0].innerText = count;
spans[1].innerText = count;
count -= 1;
}
},1000);
};
</script>
</html>
這里主要注意的地方是，在for循環中如果要設置單擊事件，不要用i做索引,所有單擊事件中的i是for循環后的值，而不是每次循環的值。
-
小米滾動
這里主要用overflow用來隱藏圖片超過盒子部分。然后通過定位，控制top坐標數值，使其在盒子里垂直移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米滾動</title>
<style type="text/css">
#box{
position: relative;
margin: 50px auto;
width: 890px;
height: 400px;
overflow: hidden;
}
img{
position: absolute;
}
span{
position: absolute;
display: block;
width: 890px;
height: 200px;
background-color: transparent;
}
#upSpan{
top:0;
}
#downSpan{
bottom:0;
}
</style>
</head>
<body>
<div id="box">
<img src="ad-one.jpg" alt="" id="img1">
<span id="upSpan"></span>
<span id="downSpan"></span>
</div>
</body>
<script type="text/javascript">
var downSpan = document.getElementById('downSpan');
var upSpan = document.getElementById('upSpan');
var img = document.getElementById('img1');
var count = 0;
var time = null; //注意time要聲明變量
//這個upSpan標簽在圖片上，讓圖片向上滾動，top越來越小
upSpan.onmouseover = function(){
clearInterval(time);
time = setInterval(
function(){
count -= 3;// 1334-400 top比最低端的-934px大，就可以繼續減小，直到底部
count >= -934 ? img.style.top = count + 'px':clearInterval(time);
}
,30)
};
//這個downSpan標簽在圖片下面，讓圖片向下滾動，top越來越大
downSpan.onmouseover = function(){
clearInterval(time); //注意，這里必須要清空定時器，否則兩個定時器一起運行會引起沖突
time = setInterval(
function(){
count += 3;
//向下滾，top數值越來越大，直到最頂端0
count < 0 ? img.style.top = count + 'px':clearInterval(time);
}
,30)
};
</script>
</html>
這里注意的地方是，每次調用onmouseover時，要清除之前的定時器，防止干擾下次操作。而且圖片移動到頂端和低端，要注意好終止坐標的位置。
-
無縫輪播圖
這個案例主要運用盒子和ul之間定位，通過定時器，讓標簽left坐標不斷減小，達到ul向左移動的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫輪播圖</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
.wrapper{
position: relative;
width: 800px;
height: 300px;
margin:40px auto;
background-color: red;
overflow: hidden;
}
ul{
width: 200%;
position: absolute;
top:0;
left: 0;
list-style: none;
}
ul li{
float: left;
}
img{
height: 300px;
width: 400px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="picts">
<li><img src="ad-one.jpg" alt=""></li>
<li><img src="ad-two.jpg" alt=""></li>
<li><img src="ad-three.jpg" alt=""></li>
<li><img src="ad-four.jpg" alt=""></li>
</ul>
</div>
</body>
<script type="text/javascript">
var ul = document.getElementById('picts');
var count = 0;
var time = null;
function pictureMove(){
count -= 1;
if(count <= -800){
count = 0;
}
ul.style.left = count + 'px';
}
time = setInterval(pictureMove,10);
ul.onmousemove = function(){
clearInterval(time);
};
ul.onmouseout = function () {
time = setInterval(pictureMove,10);
}
</script>
</html>
這里有幾個注意點是，ul標簽寬度肯定要比盒子寬，這樣可以使里面所有li標簽浮動時，不會有li標簽被擠到下一層去。onmousemove效果是鼠標移動到標簽上執行的函數，onmouseout效果是鼠標移除標簽時執行的函數。這里還要注意一點是，標簽移到最右端要有個判斷，讓其坐標歸0，從頭開始再次移動
- 全選與非全選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="checkbox" id="all"><label>全選</label><br>
<input type="checkbox"><label>1</label><br>
<input type="checkbox"><label>2</label><br>
<input type="checkbox"><label>3</label><br>
<input type="checkbox"><label>4</label><br>
<input type="checkbox"><label>5</label><br>
<input type="checkbox"><label>6</label><br>
<input type="checkbox"><label>7</label><br>
<input type="checkbox"><label>8</label><br>
</form>
<script>
var cks, all;
init();
function init() {
// 獲取所有input標簽存儲到cks列表中
cks = document.getElementsByTagName("input");
// 將cks列表轉換為數組覆蓋cks變量
cks = Array.from(cks);
// 循環這個數組
for (var i = 0; i < cks.length; i++) {
// 每個多選框添加點擊事件,當點擊時執行clickHandler函數
cks[i].onclick = clickHandler;
}
// 刪除數組的最頭部的元素並且設置給all變量，最頭部這個元素是全選那個多選框
all = cks.shift();
// 剩余cks數組中沒有全選的那個多選框了
}
function clickHandler() {
// 如果點擊的元素與all變量相同，all變量就是全選的那個多選框
// this在點擊事件中指被點擊的元素
// 當點擊全選框，就會執行這個事件，all.checked會自動變化，
// 比如勾選中，all.checked就會自動變為true
if (this === all) {
// 除了全選多選框以外所有的其他多選框的選中狀態必須和全選多選框的選中狀態一直
// all.checked 這個就是全選多選框的選中狀態 這個結果是true或者false
// true就是選中，false就是未選中，所有的多選框都具備這個屬性，
// 這個屬性即可獲取又可以設置
// cks是除了全選框以外的其他所有多選框的數組
cks.forEach(function (item) {
// 這里的item就是除了全選框以外的其他的每個多選框
item.checked = all.checked;
})
} else {
// 如果點擊是除了全選以外的其他多選框
// cks.every遍歷cks數組的每個元素，每個多選框
// every方法，如果遇到有元素返回了false就直接返回false，如果沒有遇到最后返回true
// 全選框的選中狀態就變成查看其他元素中是否沒有選中的元素，
// 如果每個元素都選中,那么全選框也被選中
all.checked = cks.every(function (item) {
// 返回每個多選框的checked狀態，就是當前這個多選框是否被選中
// 如果被選中就會把true返回出去
// 如果沒選中就會把false返回出去
return item.checked;
})
}
}
</script>
</body>
</html>
- 輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.crousel
{
width:1500px;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
}
.imgCon{
width:7500px;
height: 500px;
position: absolute;
font-size: 0; /*解決表格之間空隙 最合適的方法就是給li的父級ul設置： font-size: 0; 給li設置：font-size: a px; 如此就達到了所需效果，li不設置font-size就是之間沒有空格的效果。*/
transition: all 0.5s;
left:0;
}
.imgCon>img{
width:1500px;
height: 500px;
}
.leftBn,.rightBn{
position: absolute;
top:220px;
}
.leftBn{
left:50px;
}
.rightBn{
right: 50px;
}
ul{
list-style: none; /*列表樣式，你把list-style:none去掉，你會發現li前面會有黑色的實心圓（默認的）。list-style也可以設置空心圓、方塊、自定義鏈接圖片等*/
margin: 0;
padding: 0;
bottom: 50px;
left:640px;
}
li{
width: 28px;
height: 28px;
border: 2px solid #FF0000;
float: left;
border-radius: 50%;
margin-left: 20px;
}
li:nth-child(1){
margin-left: 0;
}
.clear::after
{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div class="crousel">
<div class="imgCon">
<img src="./img/a.jpeg">
<img src="./img/b.jpeg">
<img src="./img/c.jpeg">
<img src="./img/d.jpeg">
<img src="./img/e.jpeg">
</div>
<img src="./img/left.png" class="leftBn">
<img src="./img/right.png" class="rightBn">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var imgCon,leftBn,rightBn,list,prevDot;
var pos=0;
init();
function init(){
// 獲取所有圖片容器，左右按鈕
imgCon=document.querySelector(".imgCon");
leftBn=document.querySelector(".leftBn");
rightBn=document.querySelector(".rightBn");
// 將所有li獲取並且轉換為數組
list=Array.from(document.querySelectorAll("li"));
// 給左右按鈕增加點擊事件
leftBn.onclick=clickHandler;
rightBn.onclick=clickHandler;
// list是所有小圓點的數組，遍歷這個數組
list.forEach(function(item){
// 給每個小圓點增加點擊事件
item.onclick=dotClickHandler;
});
changeDot();
}
function clickHandler(){
// 如果點擊左邊的按鈕
if(this===leftBn){
pos--;
if(pos<0) pos=4;
}else{
// 如果點擊了右邊的按鈕
pos++;
if(pos>4) pos=0;
}
imgCon.style.left=pos*-1500+"px";
changeDot();
}
function dotClickHandler(){
// this就是被點擊的元素，list是所有小圓點的數組
// 查找當前點擊小圓點是數組中第幾個，這個第幾個正好就是我們要顯示第幾張圖片
pos=list.indexOf(this);
imgCon.style.left=pos*-1500+"px";
changeDot();
}
function changeDot(){
// 如果上一個小圓點變量存在時
if(prevDot){
// 設置上一個小圓點的背景色透明
prevDot.style.backgroundColor="rgba(255,0,0,0)";
}
// list是小圓點的數組，pos是當前應該顯示第幾張圖
// 將上一個小圓點變量設置為當前這個小圓點數組中對應的那個小圓點
prevDot=list[pos];
// 並且設置當前這個小圓點背景色為紅色
prevDot.style.backgroundColor="rgba(255,0,0)";
}
</script>
</body>
</html>
顯示與輸入的內容相關的
1，添加鍵盤抬起事件
2，獲取文本框的內容，是否與數組中的內容匹配
3，創建元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } #pop { width: 350px; border: 1px solid red; } #pop ul { margin: 10px; padding: 0px; width: 200px; list-style-type: none; } #pop ul li { } ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <div id="box"> <input type="text" id="txt" value=""> <input type="button" value="搜索" id="btn"> </div> <script> var keyWords = ['iphonex', '華為p20pro', '小米8', '華為nova3', '小辣椒', 'iphonexr', 'iphone8', '小米max3'] // div var box = document.getElementById('box'); // 文本框 var txt = document.getElementById('txt'); // 命名函數 function fn() { // 判斷有沒有ul元素 if (document.getElementById('shelper')) { var shelper = document.getElementById('shelper') box.removeChild(shelper); } // 臨時數組：存放匹配到的內容 var tempArr = []; // 檢測輸入的內容 for (var i = 0; i < keyWords.length; i++) { // 如果輸入的內容與數組中匹配， if (keyWords[i].indexOf(txt.value) === 0) { tempArr.push(keyWords[i]); // 追加到臨時數組 } } // 當輸入的內容為空，或者臨時數組沒有 if (txt.value.length === 0 || tempArr.length === 0) { // 刪除ul元素 if (document.getElementById('shelper')) { var shelper = document.getElementById('shelper') box.removeChild(shelper); } return; // 以下代碼不執行 } // 創建ul var ulObj = document.createElement('ul'); box.appendChild(ulObj); ulObj.id = 'shelper'; ulObj.style.width = '350px'; ulObj.style.border = '1px solid red'; // 創建li tempArr.forEach(function (item) { var liObj = document.createElement('li'); liObj.innerText = item; liObj.style.padding = '5px 0 5px 5px'; liObj.style.cursor = 'pointer'; ulObj.appendChild(liObj); // 綁定鼠標進入事件 liObj.addEventListener('mouseover', mouseOver, false); // 綁定鼠標離開事件 liObj.addEventListener('mouseout', mouseOut, false); }); // 鼠標進入事件 function mouseOver() { this.style.backgroundColor = '#ccc'; } // 標離開事件 function mouseOut() { this.style.backgroundColor = ''; } } // 為文本框綁定鍵盤抬起事件 txt.addEventListener('keyup', fn, false); </script> </body> </html>