學習筆記整理-DOM-03-定時器

一、定時器

1. setInterval()函數

  • setInterval()函數可以重復調用一個函數，在每次調用之間具有固定的時間間隔。

      setInterval(function () { // 這個函數將自動被以固定間隔時間調用 }, 2000);
    • 第一個參數是函數
    • 第二個參數是間隔時間，以毫秒為單位，1000毫秒是1秒

  • 函數的參數

    • setInterval()函數可以接收第3、4……個參數，它們將按順序傳入函數
          setInterval(function (a, b) {// 形式參數a的值是88，形式參數b的值是66 }, 2000, 88, 66);
      • 從第三個參數開始，表示傳入函數內的參數

  • 具名函數也可以傳入setInterval

      var a = 0; function fun() { console.log(++a);}setInterval(fun, 1000);
    • 具名函數當做第一個參數，注意這里沒有圓括號！

  • 清除定時器

    • clearInterval()函數可以清除一個定時器。
          // 設置定時器，并且用timer變量接收這個定時器 var timer = setInterval(function () {}, 2000);// 點擊按鈕時，清除定時器 oBtn.onclick = function () { clearInterval(timer); }
      • 用變量timer
      • 清除定時器的時候，要傳入定時器變量

二、延時器

1. setTimeout()函數

  • setTimeout()函數可以設置一個延時器，當指定時間到了之后，會執行函數一次，不再重復執行。
        setTimeout(function () { // 這個函數會在2秒后執行一次 }, 2000);
  • 清除延時器
    • clearTimeout()函數可以清除延時器，和clearInterval()非常類似

三、異步語句

  • setInterval()和setTimeout()是兩個異步語句。

  • 異步（asynchronous）：不會阻塞CPU繼續執行其他語句，當異步完成時，會執行"回調函數"（callback）

      setTimeout(function () { console.log('A'); }, 2000); console.log('B');
    • 打印：B A
    • console.log('B');異步語句不會阻塞程序的正常執行。

  • 使用定時器實現動畫

    <!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>#box {position: absolute;top: 100px;left: 100px;width: 100px;height: 100px;background-color: orange;}</style>
</head><body><button id="btn">開始運動</button><div id="box"></div><script>// 得到元素var btn = document.getElementById('btn');var box = document.getElementById('box');// 全局變量盒子的left值var left = 100;// 按鈕監聽btn.onclick = function () {var timer = setInterval(function () {// 改變全局變量left += 10;if (left >= 1000) {clearInterval(timer);}// 設置left屬性box.style.left = left + 'px';}, 20);};</script>
</body></html>
    • 使用定時器可以實現動畫，利用的就是"視覺暫留"原理。
    • 使用定時器實現動畫較為不便：
      • 不方便根據動畫總時間計算步長
      • 運動方向要設置正負
      • 多種運動進行疊加較為困難（比如一個方形一邊移動 一邊變為圓形）

  • JS和CSS3結合實現動畫

    • JavaScript可以利用CSS3的transition屬性輕松實現元素動畫。
    • JS和CSS3結合實現動畫規避了定時器制作動畫的缺點

  • 函數節流

    • 函數節流：一個函數執行一次后，只有大于設定的執行周期 后才允許執行第二次
    • 函數節流非常容易實現，只需要借助setTimeout()延時器
          var lock = true;function 需要節流的函數() {// 如果鎖是關閉狀態，則不執行 if (!lock) return; // 函數核心語句// 關鎖 lock = false;// 指定毫秒數后將鎖打開 setTimeout(function () { lock = true; }, 2000);}

  • 無縫連續滾動特效

    <!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>* {margin: 0;padding: 0;}.box {width: 1000px;height: 130px;border: 1px solid #000;margin: 50px auto;overflow: hidden;}.box ul {list-style: none;/* 設置大一點，這樣li才能浮動 */width: 5000px;position: relative;}.box ul li {float: left;margin-right: 10px;}</style>
</head><body><div id="box" class="box"><ul id="list"><li><img src="images/number/0.png" alt=""></li><li><img src="images/number/1.png" alt=""></li><li><img src="images/number/2.png" alt=""></li><li><img src="images/number/3.png" alt=""></li><li><img src="images/number/4.png" alt=""></li><li><img src="images/number/5.png" alt=""></li></ul></div><script>var box = document.getElementById('box');var list = document.getElementById('list');// 復制多一遍所有的lilist.innerHTML += list.innerHTML;// 全局變量，表示當前list的left值var left = 0;// 定時器，全局變量var timer;move();// 動畫封裝成函數function move() {// 設表先關，防止動畫積累clearInterval(timer);timer = setInterval(function () {left -= 4;// 驗收if (left <= - 1260) {left = 0;}list.style.left = left + 'px';}, 20);}// 鼠標進入停止定時器box.onmouseenter = function () {clearInterval(timer);};// 鼠標離開繼續定時器box.onmouseleave = function () {move();};</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>*{margin: 0;padding: 0;}.carousel {width: 650px;height: 360px;border: 1px solid #000;margin: 50px auto;position: relative;overflow: hidden;}.carousel ul {list-style: none;width: 6000px;position: relative;left: 0px;transition: left .5s ease 0s;}.carousel ul li {float: left;}.carousel .leftbtn {position: absolute;left: 20px;top: 50%;margin-top: -25px;width: 50px;height: 50px;background-color: rgb(28, 180, 226);border-radius: 50%;}.carousel .rightbtn {position: absolute;right: 20px;top: 50%;margin-top: -25px;width: 50px;height: 50px;background-color: rgb(28, 180, 226);border-radius: 50%;}</style>
</head>
<body><div class="carousel"><ul id="list"><li><img src="images/beijing/0.jpg" alt=""></li><li><img src="images/beijing/1.jpg" alt=""></li><li><img src="images/beijing/2.jpg" alt=""></li><li><img src="images/beijing/3.jpg" alt=""></li><li><img src="images/beijing/4.jpg" alt=""></li></ul><a href="javascript:;" class="leftbtn" id="leftbtn"></a><a href="javascript:;" class="rightbtn" id="rightbtn"></a></div><script>// 得到按鈕和ul，ul整體進行運動var leftbtn = document.getElementById('leftbtn');var rightbtn = document.getElementById('rightbtn');var list = document.getElementById('list');// 克隆第一張圖片var cloneli = list.firstElementChild.cloneNode(true);list.appendChild(cloneli);// 當前ul顯示到第幾張了，從0開始數var idx = 0;// 節流鎖var lock = true;// 右邊按鈕監聽rightbtn.onclick = function () {// 判斷鎖的狀態if (!lock) return; lock = false;// 給list加過渡，為什么要加？？css中不是已經加了么？？這是因為最后一張圖片會把過渡去掉list.style.transition = 'left .5s ease 0s';idx ++;if (idx > 4) {// 設置一個延時器，延時器的功能就是將ul瞬間拉回0的位置，延時器的目的就是讓過渡動畫結束之后setTimeout(function() {// 取消掉過渡，因為要的是瞬間移動，不是“咕嚕”回去list.style.transition = 'none';list.style.left = 0;idx = 0;}, 500);}list.style.left = -idx * 650 + 'px';// 函數節流setTimeout(function() {lock = true; }, 500);}// 左邊按鈕監聽leftbtn.onclick = function () {if (!lock) return;lock = false;// 判斷是不是第0張，如果是，就要瞬間用假的替換真的if (idx == 0) {// 取消掉過渡，因為要的是瞬間移動，不是“咕嚕”過去list.style.transition = 'none';// 直接瞬間移動到最后的假圖片上list.style.left = -5 * 650 + 'px';// 設置一個延時器，這個延時器的延時時間可以是0毫秒，雖然是0毫秒，但是可以讓我們過渡先是瞬間取消，然后再加上setTimeout(function() {// 加過渡list.style.transition = 'left .5s ease 0s';// idx改為真正的最后一張idx = 4;list.style.left = -idx * 650 + 'px';}, 0);} else {idx --;list.style.left = -idx * 650 + 'px';}// 函數節流setTimeout(function() {lock = true; }, 500);}</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>* {margin: 0;padding: 0;}.carousel {width: 650px;height: 360px;border: 1px solid #000;margin: 50px auto;position: relative;}.carousel ul {list-style: none;}.carousel ul li {position: absolute;top: 0;left: 0;/* 透明度都是0 */opacity: 0;transition: opacity 1s ease 0s;}/* 只有第一張透明度是1 */.carousel ul li:first-child {opacity: 1;}.carousel .leftbtn {position: absolute;left: 20px;top: 50%;margin-top: -25px;width: 50px;height: 50px;background-color: rgb(28, 180, 226);border-radius: 50%;}.carousel .rightbtn {position: absolute;right: 20px;top: 50%;margin-top: -25px;width: 50px;height: 50px;background-color: rgb(28, 180, 226);border-radius: 50%;}</style>
</head><body><div class="carousel"><ul id="list"><li><img src="images/beijing/0.jpg" alt=""></li><li><img src="images/beijing/1.jpg" alt=""></li><li><img src="images/beijing/2.jpg" alt=""></li><li><img src="images/beijing/3.jpg" alt=""></li><li><img src="images/beijing/4.jpg" alt=""></li></ul><a href="javascript:;" class="leftbtn" id="leftbtn"></a><a href="javascript:;" class="rightbtn" id="rightbtn"></a></div><script>// 得到按鈕和ul，ul整體進行運動var leftbtn = document.getElementById('leftbtn');var rightbtn = document.getElementById('rightbtn');var list = document.getElementById('list');var lis = list.getElementsByTagName('li');// 當前是第幾張圖顯示var idx = 0;// 節流var lock = true;// 右按鈕rightbtn.onclick = function () {// 判斷節流if (!lock) return;lock = false;// 還沒有改idx，此時的idx這個圖片就是老圖，老圖淡出lis[idx].style.opacity = 0;idx++;if (idx > 4) idx = 0;// 改了idx，此時的idx這個圖片就是新圖，新圖淡入lis[idx].style.opacity = 1;// 動畫結束之后，開鎖setTimeout(function () {lock = true;}, 1000);}// 左按鈕leftbtn.onclick = function () {// 判斷節流if (!lock) return;lock = false;// 還沒有改idx，此時的idx這個圖片就是老圖，老圖淡出lis[idx].style.opacity = 0;idx--;if (idx < 0) idx = 4;// 改了idx，此時的idx這個圖片就是新圖，新圖淡入lis[idx].style.opacity = 1;// 動畫結束之后，開鎖setTimeout(function () {lock = true;}, 1000);}</script>
</body></html>

重點內容

  • 訪問元素節點有哪些方法?
  • 節點的關系有哪些?
  • 常用節點操作有哪些?
  • 節點的創建、移除和克隆要如何實現?
  • 事件捕獲和冒泡是什么?應該如何設置?
  • 什么是事件委托?什么時候要用事件委托?
  • 使用定時器和CSS3的過度實現動畫

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/36684.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/36684.shtml
英文地址，請注明出處：http://en.pswp.cn/news/36684.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

SpringBoot中間件使用之EventBus、Metric、CommandLineRunner

SpringBoot中間件使用之EventBus、Metric、CommandLineRunner

1、EventBus 使用EventBus 事件總線的方式可以實現消息的發布/訂閱功能&#xff0c;EventBus是一個輕量級的消息服務組件&#xff0c;適用于Android和Java。 // 1.注冊事件通過 EventBus.getDefault().register(); // 2.發布事件 EventBus.getDefault().post(“事件內容”); …
閱讀更多...
深入理解spring面經

深入理解spring面經

1 了解SpringMVC的處理流程嗎&#xff1f; 用戶發送請求至前端控制器DispatcherServlet。DispatcherServlet通過處理器映射器HandlerMapping找到對應的處理器。DispatcherServlet將請求提交給對應的處理器Controller。Controller處理完請求后返回ModelAndView。DispatcherServ…
閱讀更多...
面試攻略，Java 基礎面試 100 問（十三）

面試攻略，Java 基礎面試 100 問（十三）

什么時候用 assert&#xff1f; assertion(斷言)在軟件開發中是一種常用的調試方式&#xff0c;很多開發語言中都支持這種機制。一般來說&#xff0c;assertion 用于保證程序最基本、關鍵的正確性。assertion 檢查通常在開發和測試時開啟。為了提高性能&#xff0c;在軟件發布…
閱讀更多...
支持對接鴻蒙系統的無線模塊及其常見應用介紹

支持對接鴻蒙系統的無線模塊及其常見應用介紹

近距離的無線通信得益于萬物互聯網的快速發展&#xff0c;基于集成部近距離無線連接&#xff0c;為固定和移動設備建立通信的藍牙技術也已經廣泛應用于汽車領域、工業生產及醫療領域。為協助物聯網企業終端產品能快速接入鴻蒙生態系統&#xff0c;SKYLAB聯手國產芯片廠家研發推…
閱讀更多...
找不到mfc140u.dll怎么辦？mfc140u.dll丟失怎樣修復？簡單三招搞定

找不到mfc140u.dll怎么辦？mfc140u.dll丟失怎樣修復？簡單三招搞定

最近我遇到了一個問題&#xff0c;發現我的電腦上出現了mfc140u.dll文件丟失的錯誤提示。這個錯誤導致一些應用程序無法正常運行&#xff0c;讓我感到非常困擾。經過一番研究和嘗試&#xff0c;我終于成功修復了這個問題&#xff0c;并從中總結出了一些心得。 mfc140u.dll丟失原…
閱讀更多...
財報解讀：繼續押注Disney+，迪士尼距離盈利還有多遠？

財報解讀：繼續押注Disney+，迪士尼距離盈利還有多遠？

迪士尼最新一季的“答卷”&#xff0c;透露著不小的寒氣。 近日&#xff0c;迪士尼披露了2023財年第三季度&#xff08;自然年2023年Q2&#xff09;業績報告&#xff0c;營收223.3億美元&#xff0c;同比僅增長4%&#xff0c;低于市場預期的225.1億美元&#xff1b;歸母凈虧損…
閱讀更多...
【人工智能前沿弄潮】——生成式AI系列：Diffusers應用 (2) 訓練擴散模型（無條件圖像生成）

【人工智能前沿弄潮】——生成式AI系列：Diffusers應用 (2) 訓練擴散模型（無條件圖像生成）

無條件圖像生成是擴散模型的一種流行應用&#xff0c;它生成的圖像看起來像用于訓練的數據集中的圖像。與文本或圖像到圖像模型不同&#xff0c;無條件圖像生成不依賴于任何文本或圖像。它只生成與其訓練數據分布相似的圖像。通常&#xff0c;通過在特定數據集上微調預訓練模型…
閱讀更多...
OpenLayers入門，OpenLayers入門文檔，OpenLayers入門手冊，OpenLayers相比其他地圖引擎有哪些優點？

OpenLayers入門，OpenLayers入門文檔，OpenLayers入門手冊，OpenLayers相比其他地圖引擎有哪些優點？

專欄目錄&#xff1a; OpenLayers入門教程匯總目錄 前言 在學習OpenLayers之前&#xff0c;總是需要了解OpenLayers&#xff0c;知道OpenLayers是什么&#xff0c;OpenLayers能夠做什么&#xff0c;OpenLayers有哪些用途和特性&#xff0c;然后OpenLayers相比其他地圖引擎又有…
閱讀更多...
數學運算1

數學運算1

正確答案&#xff1a;F 你的答案&#xff1a;E 參考答案&#xff1a;最大排列為100 1 99 2 98 3…51 49 50 所以和為999897…1(100-50)因為是一個圈所以&#xff0c;100和50相接&#xff0c;所以等于5000 知識點&#xff1a;數學運算
閱讀更多...
MySQL 慢查詢探究分析

MySQL 慢查詢探究分析

目錄 背景&#xff1a; mysql 整體結構&#xff1a; SQL查詢語句執行過程是怎樣的&#xff1a; 知道了mysql的整體架構&#xff0c;那么一條查詢語句是怎么被執行的呢&#xff1a; 什么是索引&#xff1a; 建立索引越多越好嗎&#xff1a;　　 如何發現慢查詢&#xff1…
閱讀更多...
樹結構--介紹--二叉樹遍歷的遞歸實現

樹結構--介紹--二叉樹遍歷的遞歸實現

目錄 樹 樹的學術名詞 樹的種類 二叉樹的遍歷 算法實現 遍歷命名 二叉樹的中序遍歷 二叉樹的后序遍歷 二叉樹的后序遍歷迭代算法 二叉樹的前序遍歷 二叉樹的前序遍歷迭代算法 樹 樹是一種非線性的數據結構&#xff0c;它是由n(n≥0)個有限節點組成一個具有層次關系…
閱讀更多...
Docker安裝 elasticsearch-head

Docker安裝 elasticsearch-head

目錄 前言安裝elasticsearch-head步驟1&#xff1a;準備1. 安裝docker2. 搜索可以使用的鏡像。3. 也可從docker hub上搜索鏡像。4. 選擇合適的redis鏡像。 步驟2&#xff1a;拉取elasticsearch-head鏡像拉取鏡像查看已拉取的鏡像 步驟3&#xff1a;創建容器創建容器方式1&#…
閱讀更多...
SpringBoot復習：（28）【前后端不分離】自定義View

SpringBoot復習：（28）【前后端不分離】自定義View

一、自定義View package cn.edu.tju.view;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.stereotype.Comp…
閱讀更多...
C# --- Case Study

C# --- Case Study

C# --- Case Study C# — Mongo數據庫事務的應用 C# — 如何解析Json文件并注入MongoDB C# — MongoDB如何安全的替換Collection
閱讀更多...
百度翻譯API整合SpringBoot

百度翻譯API整合SpringBoot

案例背景,按照官方給的Demo,實在是太啰嗦了, 大致步驟 封裝數據>簽名>發送請求, 仔細一看劈里啪啦一大堆,最后還要手動關流關連接,難道整合到SpringBoot項目里面我還得為內存管理考慮 所以就有了如下需求 使用 RestTemplate的對象進行發送請求數據,RestTemplate由s…
閱讀更多...
Redis緩存刪除略和內存淘汰策略及LRU

Redis緩存刪除略和內存淘汰策略及LRU

1、Redis內存若在配置文件中未設置&#xff0c;內存會無限制增長&#xff0c;直到超出物理內存&#xff0c;拋出out of memory內存耗盡異常 解決方法&#xff0c;調整maxmemory參數&#xff0c;一般設置為物理內存的3/4&#xff0c;并且添加緩存刪除策略 2、Redis對于設置了過…
閱讀更多...
項目經理的會議之道：全參與還是精選參與？

項目經理的會議之道：全參與還是精選參與？

引言 在項目管理中&#xff0c;會議是一個常見的工具&#xff0c;用于溝通信息、解決問題、做出決策等。然而&#xff0c;項目經理是否需要參加所有的會議呢&#xff1f;這是一個值得深思的問題。作為項目經理&#xff0c;我們需要權衡會議的重要性和我們的時間管理。我們不能…
閱讀更多...
【第一階段】kotlin的函數

【第一階段】kotlin的函數

函數頭 fun main() {getMethod("zhangsan",22) }//kotlin語言默認是public,kotlin更規范&#xff0c;先有輸入&#xff08; getMethod(name:String,age:Int)&#xff09;再有輸出(Int[返回值]) private fun getMethod(name:String,age:Int): Int{println("我叫…
閱讀更多...
Elasticsearch集群shard過多后導致的性能問題分析

Elasticsearch集群shard過多后導致的性能問題分析

1.問題現象 上午上班以后發現ES日志集群狀態不正確&#xff0c;集群頻繁地重新發起選主操作。對外不能正常提供數據查詢服務&#xff0c;相關日志數據入庫也產生較大延時 2.問題原因 相關日志 查看ES集群日志如下&#xff1a; 00:00:51開始集群各個節點與當時的master節點…
閱讀更多...
Playwright快速上手-1

Playwright快速上手-1

前言 隨著近年來對UI自動化測試的要求越來越高&#xff0c;,功能強大的測試框架也不斷的涌現。本系列主講的Playwright作為一款新興的端到端測試框架,憑借其獨特優勢,正在逐漸成為測試工程師的熱門選擇。 本系列文章將著重通過示例講解 Playwright python開發環境的搭建 …
閱讀更多...
最新文章

Copyright @ 2022~2023