做去態(tài)網(wǎng)站要學什么語言故事型軟文廣告
案例
注冊事件
<!-- //disabled默認情況用戶不能點擊 --><input type="button" value="我已閱讀用戶協(xié)議(5)" disabled><script>// 分析：// 1.修改標簽中的文字內(nèi)容// 2.定時器// 3.修改標簽的disabled屬性// 4.清除定時器// 5.條件判斷// 結(jié)論：以上的知識點都放在定時器中完成// 代碼實現(xiàn)// 1.獲取按鈕標簽let btn = document.querySelector('input')// 2.定義一個變量保存開始值let num = 5;// 3.數(shù)字要遞減，放到定時器中let timeId = setInterval(function () {// 數(shù)字遞減--num// 修改標簽中的文字內(nèi)容btn.value = `我已閱讀用戶協(xié)議(${num})`;// 6.判斷數(shù)字是否小于0if (num < 0) {// 7.修改按鈕上的文字btn.value = '同意';// 8.修改按鈕為可點擊狀態(tài)btn.disabled = false// 9.停止定時器clearInterval(timeId);}}, 1000)</script>
輪播圖
<!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>* {padding: 0;margin: 0;box-sizing: border-box;}.slider {width: 450px;height: 300px;}.slider img {width: 100%;}.slider-footer {height: 10px;width: 450px;}ul li {height: 10px;width: 20px;/* border-radius: 50%; */float: left;margin-left: 30px;list-style: none;background-color: gray;}.active {background-color: red;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="" alt=""></div><div class="slider-footer"><p>對人類來說會不會太超前了</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"></div></div></div><script>//2.初始化數(shù)據(jù)const goodList = [{img: '../image/1.jpg',id: '4001171',name: '商品1',price: '289.0'},{img: '../image/2.jpg',id: '4001172',name: '商品2',price: '189.0'},{img: '../image/3.jpg',id: '4001173',name: '商品3',price: '89.0'},{img: '../image/4.jpg',id: '4001174',name: '商品4',price: '589.0'},{img: '../image/5.jpg',id: '4001175',name: '商品5',price: '589.0'},{img: '../image/6.jpg',id: '4001176',name: '商品6',price: '29.0'},{img: '../image/7.jpg',id: '40011727',name: '商品7',price: '89.0'},{img: '../image/8.jpg',id: '4001178',name: '商品8',price: '189.0'}]// 分析：// 1.從數(shù)組中獲取對應(yīng)的數(shù)據(jù)(圖片路徑) // 2.將圖片路徑設(shè)置給對應(yīng)的圖片標簽// 3.從數(shù)組中獲取對應(yīng)的數(shù)據(jù)(標題)// 4.將標題文字設(shè)置給對應(yīng)的p標簽// 5.將對應(yīng)的li標簽添加一個active類名// 代碼實現(xiàn)// 1.定義變量保存當前從數(shù)據(jù)中的第幾個值開始let index = 0// 2.獲取標簽對象let img = document.querySelector('img')let p = document.querySelector('p')// 3.開啟定時器setInterval(function () {//4.在定時器中，我們要從數(shù)組中依次取值// 5.從數(shù)組中取值if (index >= goodList.length) { index = 0 }let obj = goodList[index]index++console.log(obj)// 6.從當前對象中獲取圖片路徑和圖片對應(yīng)的標題let imgSrc = obj.imglet p_title = obj.name// 7.將圖片路徑設(shè)置給img標簽將標題設(shè)置給p標簽img.src = imgSrcp.innerText = p_title// 9-1 先將頁面中的active類名移除掉document.querySelector('.active').classList.remove('active')// 8.獲取對應(yīng)的li標簽(當前是第幾張圖片,選中第幾個li標簽)let li = document.querySelector(`li:nth-child(${index})`)console.log(li)// 9.給當前的li標簽添加active名li.classList.add('active')}, 3000)</script>
</body></html>
事件基本介紹
在網(wǎng)頁中事件是用戶的一個動作
用來實現(xiàn)用戶和網(wǎng)頁交互
事件三要素a)事件源：用戶的動作作用到那個標簽身上，那個標簽就是事件源b)事件類型：用戶使用的是什么動作(點擊事件、輸入事件、懸停事件)c)處理程序：代表事件最后要實現(xiàn)的具體效果，就是一個匿名函數(shù)
<div></div><div></div><script>// 綁定事件// 1.先獲取事件源(DOM標簽對象)// 2.給事件源綁定事件//事件源.addEventListener('事件類型'，function(){});//備注：事件類型常用的一個點擊事件：click// // 代碼演示// 點擊div給div設(shè)置背景顏色let div = document.querySelector('div')div.addEventListener('click', function () {div.style.backgroundColor = 'pink'})</script>
其他方式綁定事件
給元素綁定事件推薦使用addEventListener方式
給元素綁定事件：DOML2寫法：addEventListener
DOML0寫法：事件源.on事件類型=function(){}
兩種注冊時間的區(qū)別：
a)addEventListener是個方法
b)on的方式本質(zhì)上是一個屬性
c)如果給元素注冊多個相同的時間，則addEventListener都可以執(zhí)行
d)如果給元素注冊多個相同的事件，on的方式只能執(zhí)行一個
<input type="button" value="按鈕"><script>let btn = document.querySelector('input')// DOML2寫法：// btn.addEventListener('click', function () {// btn.style.color = 'red'// })// DOML0寫法：btn.onclick = function () {btn.style.color = 'red'}</script>
鼠標事件類型
鼠標觸發(fā)
click 鼠標點擊
mouseenter 鼠標進入
mouseleave 鼠標離開
焦點事件
focus 獲得焦點
輸入框獲得鼠標光標
blur 失去焦點
鍵盤觸發(fā)
鍵盤事件要么給整個頁面注冊，要么給輸入框注冊·······
Keydown 鍵盤按下觸發(fā)
Keyup 鍵盤抬起觸發(fā)
表單輸入觸發(fā)
input 用戶輸入事件
事件對象參數(shù)(只能設(shè)置一個)
作用：用來記錄當前事件中的一些信息
注意：
a)任何一個事件都有事件對象參數(shù)，用就設(shè)置事件對象參數(shù)，不用就不加
b)鍵盤事件/鼠標事件===>常常會用到事件對象參數(shù)
c)鍵盤事件參數(shù)記錄當前用戶按下的是哪個按鍵
d)鼠標事件對象參數(shù)最重要的是記錄了鼠標的坐標信息
<input type="text"><script>//鍵盤事件，鼠標事件類似let int = document.querySelector('input');int.addEventListener('keydown', function (e) {// e是event的縮寫，叫事件對象參數(shù)console.log(e)})</script>
鼠標事件總結(jié)
事件對象參數(shù).clientX 橫坐標，參照頁面左上角(參照頁面可視區(qū)左上角)
事件對象參數(shù).offsetX 橫坐標，參照事件源左上角
事件對象參數(shù).pageX 橫坐標，參照頁面左上角(看看頁面中是否有滾動條，pageX包括滾動條滾動的距離)
事件對象參數(shù).screenY 縱坐標，參照整個電腦屏幕左上角
自動點擊觸發(fā)事件
<body><input type="button"><script>
// 自動觸發(fā)事件
// 語法：DOM標簽對象.click();// 要求：點擊按鈕輸出一句話
let btn=document.querySelector('input')
btn.addEventListener('click',function(){console.log('hehe')
})
btn.click()
//自動觸發(fā)點擊事件(得首先有事件)</script>
</body>
