從一個動畫需求,來學習js中animation動畫事件的具體應用
本文通過一個具體的動畫需求,來講解一下js中animationend事件使用 在線演示效果一:https://ashuai.site/reactExamples/animationEvent 在線演示效果二:https://ashuai.work:8890/27 前言 平常,我們代碼中,會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上,js中還提供了動畫事件的相關ap
昵稱 水冗水孚
貢獻者369
粉絲0
本文通過一個具體的動畫需求,來講解一下js中animationend事件使用 在線演示效果一:https://ashuai.site/reactExamples/animationEvent 在線演示效果二:https://ashuai.work:8890/27 前言 平常,我們代碼中,會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上,js中還提供了動畫事件的相關ap
昵稱 水冗水孚
Python telnetlib 詳解(含 3.13 之後的替代方案) 適用讀者:需要在受控內網/實驗環境使用 Telnet 的同學。生產環境強烈建議優先 SSH(如 Paramiko/Netmiko)。 版本事實:telnetlib 在 span style="color:red"Python 3.11 標記棄用/span,並已在 span style="color:red"Pytho
昵稱 藍易雲
效果圖 使用示例 script lang="ts" setup import FerrisWheel from "**/FerrisWheel.vue"; import { ref } from "vue"; const defaultUrls = [ "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.
昵稱 你好啊你好
在 Java Web 開發的世界裏,JSP(Java Server Pages)是一門舉足輕重的動態網頁開發技術。要學好 JSP,首先得紮實掌握 Web 技術基礎,下面就帶大家深入瞭解相關知識。 Web 的起源與發展 Web,本意是蜘蛛網和網,在網頁設計中特指網頁。它誕生於 1989 年 3 月,由歐洲粒子物理研究所的科學家蒂姆・伯納斯・李發明。1990 年 11 月,第一個 Web 服務器正式運
昵稱 衍生星球
📖 文章概述 當你在前端項目中看到 Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0 這個警告時,是否感到困惑?本文將帶你深入探索這個警告背後的技術原理,從源碼層面分析調用鏈路,對比不同版本的功能差異,並提供多種實用的解決方案。 你
昵稱 不可能的是
效果圖 使用示例 script setup lang="ts" import RotatedImage from "**/RotatedImage.vue"; import { ref } from "vue"; const value = ref(50); const clockwise = ref(true); const src = ref( "https://naive-ui.os
昵稱 你好啊你好
每天學點知識點,每天進步一點點,本文記錄了高度過渡變化的四種方式,大家一塊來查漏補缺,或者回顧知識吧😉😉😉 常見的四種方式的高度過渡 目前常見的高度過渡的方式有四種 transition + height transition + max-height transition + tranform:scale(0/1) JS方式計算元素的高度 實際上,還有一個height: c
昵稱 水冗水孚
使用jQuery的常用方法與返回值分析 jQuery是一個輕量級的JavaScript庫,旨在簡化HTML文檔遍歷和操作、事件處理以及動畫效果的創建。本文將介紹一些常用的jQuery方法及其返回值,幫助開發者更好地理解和運用這一強大的庫。 選擇器方法 jQuery提供了多種選擇器,可以快速獲取DOM元素。最基本的選擇器是$(),例如: var elements = $('.className
昵稱 才高八斗的黃豆_depjNR
在網頁開發領域,一個常見的疑問是 CSS 是否會阻塞文檔解析。理解這一問題對於優化網頁性能、提升用户體驗至關重要。要深入解答這個問題,需要從瀏覽器渲染網頁的原理説起。 瀏覽器渲染網頁的基本流程 瀏覽器在接收到 HTML 文檔後,會依次進行以下幾個主要步驟: 解析 HTML:瀏覽器從網絡或本地獲取 HTML 文件,然後開始解析,將 HTML 代碼轉換為 DOM(Document Object M
昵稱 銀之夏雪
前言 最近遇到一個這樣的問題,在一些機型上的loading轉圈動畫看起來有點抖,轉起來像個橢圓,心想會不會是這個icon寬高不同造成的,但看了一眼代碼裏面寬高寫的是一樣,按理來説這個loading應該是一個正圓,旋轉起來不應該抖才是的。 比如這樣: div class="w-20px h-20px border-rd-50% loading"/div 寬高相等的一個正圓,旋轉起來看着怪怪的。事實
昵稱 南玖
“當了 leader 才發現,公司最想裁掉的,不是上班總遲到的,也不是下班搞失聯的,而是經常把這 3 句話掛在嘴邊的” 這是最近在職場社區裏又被聊熱起來的一個老話題。 作為一個在職場上混跡了近 9 年的程序員,一路走來親眼目睹和經歷了程序員職場裏的各種風雨。從一開始的大頭兵到後來負責一個獨立的小團隊,從一個所謂的 leader 的視角上來看問題,對這個事情的理解似乎又有了一些變化。 在我剛成為小團
昵稱 CodeSheep
1、寫一個標籤,在標籤內添加上id屬性。 !DOCTYPE html html lang="en" head meta charset="UTF-8" titleTitle/title /head body div table align="center" border="1" cellspacing="0" !--比如在這
昵稱 愛搖頭的電風扇
背景 重寫一個登錄頁面,登錄接口是跨域接口,重寫的頁面登錄成功後進入頁面報錯,原因是請求後台接口未攜帶cookie,但是通過老頁面進行登錄,進入頁面後cookie可以正常攜帶,使用工具對比新老頁面登錄請求,request和response都是一樣。 解決 排除過以下可能性 在代碼中進行cookie刪除 兩個請求頭不一樣導致結果不一樣 系統時間設置錯誤,導致cookie過期 對比過兩邊的a
昵稱 DQuery
JS Navigator.sendBeacon 可靠的、異步地向服務器發送數據 前言 我們在上一篇頁面訪問頁面關閉數據上報的文章中使用了 sendBeacon 方法用來發送數據,上篇文章是簡單使用,那本篇文章我們就詳細瞭解下這個東西。 一、Navigator.sendBeacon 是什麼能做什麼? Navigator.sendBeacon 是一個用於發送少量數據到服務器的 API,尤其適用於在頁面
昵稱 月恆
XML HttpRequest(XHR) 技術是構建動態、響應式網站的關鍵。這項技術使得網頁能在不重新加載整個頁面的情況下與服務器進行數據交互,極大地優化了用户的交互體驗。 定義 XML HttpRequest XML HttpRequest 是一種瀏覽器與服務器進行數據交換的 API。儘管它的名字包含 “XML”,XHR 實際上支持多種數據格式,如 JSON、HTML 和純文本等。初期,它主要用
昵稱 火爆的鍵盤
背景 在前端開發中,HTTP 請求是與服務器進行數據交互的核心手段。無論是獲取數據還是提交數據,前端應用幾乎都離不開 HTTP 請求。在 uniapp 中,uni.request 是官方提供的用於發起 HTTP 請求的基礎 API。然而,直接使用 uni.request 存在一些問題和不足,比如: 代碼冗餘:每次發起請求時都需要編寫類似的配置代碼,導致代碼重複。 缺乏統一管理:沒有統一的地方
@renzhongdaoyuan_59170ca258c53
昵稱 零一行者
在你的 axios 封裝文件中,你需要兩個外部變量來管理狀態: // 標記是否正在刷新 token 的“鎖” let isRefreshing = false; // 存儲因 token 失效而掛起的請求的“隊列” let requestQueue = []; 請求攔截器 (Request Interceptor) 它的任務很簡單:在每個請求發出去之前,都帶上當前的 token
昵稱 健兒
我們都曾經歷過這樣的下午:一個看似邏輯嚴密的模塊,在實際運行時卻表現得像個失控的野獸。我的故事,就從一個本應“智能”處理登錄和 Token 刷新的 ajax 請求封裝函數開始。 我希望它能在接口返回 400(需要登錄)或 4_01(Token 失效)時,自動完成登錄或刷新 Token,然後再重新發起剛才失敗的請求。然而,它卻在某些情況下陷入了可怕的無限循環,瘋狂轟炸着我的服務器。 起初
昵稱 健兒
本來是自己想了解下js中關於零拷貝的內容,順藤摸瓜瞭解了下相關歷史演進,便有了這篇文章。雖説是數據拷貝歷,但其中也夾雜了大量關於Ajax和SPA的歷史,也算是順着拷貝這條藤摸到的瓜,所以有點跑題。希望大家能開心吃瓜,如果有任何紕漏和補充,請在評論區暢所欲言,我們一起完善這段有趣的歷史。 一、為什麼我們需要拷貝? 小明已經有了一個羅技G102鼠標,但是他又買了一個,請問為什麼?答:因為怕第一個壞掉了
昵稱 Silkide
2026年Vue Admin前端框架開發技術深度解析 一、技術趨勢與演進方向 1.1 構建工具革命 2026年,Vite 6已成為默認構建工具,其基於Rust的Rolldown引擎使構建速度較Webpack提升300%。配合模塊聯邦(Module Federation)特性,可輕鬆實現微前端架構,例如將商品管理、支付系統拆分為獨立子應用動態加載。Vue Admin Better已實現通過單一配置項
昵稱 360Web
首先找到manifest.json文件,開啓微信小程序授權請求 "permission": { "scope.record": { "desc": "需要使用麥克風進行語音錄製" // 此處描述需符合微信規範 } } 然後通過uni.getSetting查詢麥克風授權狀態 麥克風的scope值為scope.record,如果已授權則直接返回,若
昵稱 兔子先森
現在要實現一個按鈕長按的功能,大概有如下幾個要點: 1、長按按鈕,按鈕覆蓋整個輸入框 2、長按的過程中移動手指,判斷手指移動的位置是否在按鈕內 3、長按鬆開,按鈕還原 按鈕結構如下: view id="audio-full" :class="[ 'audio-full', isLongpress 'touch-longpress'
昵稱 兔子先森
什麼是流式輸出 流式輸出,也稱為流式傳輸,指的是服務器持續地將數據推送到客户端,而不是一次性發送完畢。這種模式下,連接一旦建立,服務器就能實時地發送更新給客户端。 人話講就是跟接口建立連接,只要接口不斷開,服務器就能實時的把信息發送給前端,AI流式輸出中,接口每次返回一小段話,前端拿到後流式渲染即可。 有點類似websocket,但SSE是單向的 fetch-event-source
昵稱 兔子先森
現在有很多框架實現了流式渲染,我在這裏例舉幾個: React框架 ● Ant-Design-X Vue框架 ● Element-Plus-X ● MateChat (PC/H5雙端兼容) H5移動端 ● ChatUI-React 這裏以MateChat框架做示例,MateChat是一個獨立的AI對話組件,不與其它UI框架關聯,可直接引入項目使用。 一般的流式渲染分兩種
昵稱 兔子先森