Javascript事件監聽-回撥函式-基礎題
阿新 • • 發佈：2020-12-27
技術標籤：javascript
1,關閉二維碼
2,驗證碼倒計時
3,隨機點名
4,tab欄切換
5,百度換膚效果
6,切換圖片迴圈
7,開關燈
<-------------------------------------------參考答案-------------------------------------------->
1,關閉二維碼
<script>
//獲取元素
let erw = document.getElementById('erw')
let clo = document.getElementById 2,驗證碼倒計時
<ul>
<li>
手機號:
<input type="text">
</li>
<li>
驗證碼:
<input type= 3,隨機點名
<body>
<h2>隨機問答</h2>
<div class="box">
<span>問題是：</span>
<div class="qs">這裡顯示題目</div>
</div>
<div class="btn">
<button class="dos">開始</button>
<button class="end">結束</button>
</div>
<script>
//陣列
let arr = ['張一', '張二', '張三', '張四', '張五']
//開始按鈕業務
let dos = document.querySelector('.btn .dos')
//獲取qs 盒子準備往裡邊寫內容
let qs = document.querySelector('.qs')
//結束按鈕業務
let end = document.querySelector('.btn .end')
//外邊定義一個隨機變數
let random = 0
//外邊定義一個定時器變數
let timer = null
dos.addEventListener('click', function () {
//利用定時器來製作
timer = setInterval(function () {
//隨機函式取值
random = Math.floor(Math.random() * (arr.length))
//在qs中顯示取到的值
qs.innerHTML = arr[random]
}, 50)
//數組裡的陣列的元素是1的時候,就禁用兩個按鈕]
if (arr.length === 1) {
dos.disabled = true
end.disabled = true
}
})
//結束按鈕,停止定時器, 刪除抽出來的那個資料
end.addEventListener('click', function() {
clearInterval(timer)
//刪除陣列中的某個元素
arr.splice(random, 1)
})
</script>
4,tab欄切換
<script>
let items = document.querySelectorAll('.tab .tab-item')
let mains = document.querySelectorAll('.products .main')
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function() {
//這句話一定要寫到上邊,先移除以前的,我才能加上
//找到active這個類,然後移除掉
document.querySelector('.tab .active').className = 'tab-item'
//點選完畢後,當前元素,新增active這個類
this.className = 'tab-item active'
//下面的元素要隨著變化
//首先下面四個全部隱藏
for (let j = 0; j < mains.length; j++) {
mains[j].style.display = 'none'
}
//再把當前的顯示出來
mains[i].style.display = 'block'
})
}
</script>
5,百度換膚效果
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1. 獲取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 迴圈註冊事件
for (let i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', function () {
// / this.src 就是我們點選圖片的路徑 images/2.jpg
// console.log(this.src);
// 把這個路徑 this.src 給body 就可以了
document.body.style.backgroundImage = `url(${this.src})`;
})
}
</script>
6,切換圖片迴圈
<body>
<input type="button" value="切換" id="btn" /><br />
<img src="imgs/girl1/00.jpg" width="300" id="img" />
<script>
let arr = [
'imgs/girl1/00.jpg',
'imgs/girl1/01.jpg',
'imgs/girl1/02.jpg',
'imgs/girl1/03.jpg',
'imgs/girl1/04.jpg',
]
//1. 找物件
let btn = document.getElementById('btn')
let img = document.getElementById('img')
let index = 1
//2. 給btn註冊點選事件
btn.addEventListener('click', function () {
// if (max < num){ max = num}
// if (min > num) { min = num}
if (index > 4) {
index = 0
}
img.src = arr[index] // 1
index++ // 2
})
</script>
</body>
7,開關燈
<body>
<button>關燈</button>
<script>
//獲取按鈕元素
let btn = document.querySelector('button')
//獲取body元素
let body = document.body
//bool的值只有真假兩種狀態
let isFlag = true
console.dir(body)
//監聽事件--點選按鈕會切換什麼狀態
btn.addEventListener('click', function () {
//點選按鈕後的狀態
if (isFlag) {
//改變顏色
body.style.backgroundColor = 'black'
//改變按鈕文字
btn.innerText = '開燈'
isFlag = false
//再次點選的狀態
} else {
body.style.backgroundColor = 'white'
btn.innerText = '關燈'
isFlag = true
}
})
</script>
</body>