2.動畫與緩動(setTimeout和setInterval)

来源:https://www.cnblogs.com/AmosRhee/archive/2020/07/20/13344524.html
-Advertisement-
Play Games

setTimeout(一次) setInterval(定時一次) HTML: <!DOCTYPE html> <html> <head> <meta chartset="utf-8"> <title></title> <link rel ="stylesheet" href= "./style.cs ...


setTimeout(一次)

setInterval(定時一次)

 HTML:

<!DOCTYPE html>
<html>
    <head>
         <meta chartset="utf-8">
           <title></title>
           <link rel ="stylesheet" href= "./style.css">
           <script src="./man.js"></script>     
    </head>
    <body>
        <div id=div1></div>
    </body>
</html>

CSS:

#div1{
    width: 100px;
    height: 100px;
    background: pink;
 }

JS:

div1.style.position = 'relative'
div1.style.left = 0
let n = 0
let id =setInterver( ()=>{
    n = n+1(每次移動1的距離)
    div1.style.left = n + 'px'//(註意加上單位)
    if(n>=200){
        window.clearInterval(id)//移動了200px時,清除這個功能
    }
},40)//設置40ms動一次

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 初識CSS 1.0概念以及好處 2.0CSS與HTML結合 (1)內聯樣式 ( 2 ) 內部樣式 ( 3 ) 外部樣式 與CSS更近一步 1.0CSS的使用語法格式 2.0 選擇器 (1) 基礎選擇器 (2) 擴展選擇器 美化頁面的CSS精華 1.0 屬性 下麵是本人做的一個註冊頁面 附上代碼 <! ...
  • 1.CSS用於HTML文檔中元素樣式的定義,實現了將內容與表現分離,提高了代碼的可重用性和可維護性,文件尾碼是“.css” 2.HTML=結構層,CSS=表示層,JavaScript=行為層 3.CSS樣式表的引入方式: ① 內聯方式(行內樣式),直接把CSS代碼用style屬性添加到開始標簽中, ...
  • 打開Javaweb的方式 B/S架構詳解 HTML 1.0 HTML的介紹和快速入門 HTML標簽的詳解 1.0 文件標簽 2.0 文本標簽 3.0 列表標簽 4.0 鏈接標簽 5.0 div/span、語義化標簽 6.0 表格標簽 7.0 表單標簽 (1) 表單項標簽 input 還有一些標簽 ( ...
  • 故事起因: 最近我有個剛畢業的學生問我說:我感覺現在前端行業已經飽和了,也不是說飽和了,是初級的前端根本就沒有公司要,哪怕你不要工資也沒公司要你,前端剛學出來,沒有任何的項目經驗和工作經驗,根本就不會有公司要你啊,這是最大的一個問題,而且現在也沒有任何公司找初級前端,實習前端,都是要求有工作經驗的。 ...
  • 最近在重新學習JavaScript,手寫了一個tabs標簽頁。 話不多說,直接開始。 首先,是前端頁面。 圖1 tabs 先來把tabs分解一下:圖2 tabs分解 首先,一個大的框div,上面紅色的框是導航欄nav,導航欄里是一個無序列表ul,裡面三個li標簽(黃色的框),li標簽里兩個綠色標簽是 ...
  • 本文將介紹如何從零搭建一個集成vue的electron項目,以及搭建過程中可能會出現的問題及其解決方法 ...
  • 開發過程中經常有意無意地刻意避開數學相關的知識,你也知道解數學題非常枯燥無趣。平時寫動畫也儘量使用 css3 來實現,timer-function 隨意選用,最多也就調一下 cubic-bezier,找到看著舒服的就行。但是怎樣讓動畫更順滑,寫出更貼近自然的動畫,說實話以前我沒怎麼考慮過。 每次當動 ...
  • 一、定義 當客戶不方便直接訪問一個對象或者不滿足需要的時候,提供一個對象來控制堆這個對象的訪問。 二、舉例 惰性單例模式的實現依靠緩存代理 三、結構 代理模式需要一個本體對象和一個代理對象。在代理模式下,對於本體對象的特定的操作通過代理對象進行。如圖所示 這種模式的關鍵點在於:本體對象和代理對象介面 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...