今天,有在群里看到这样一个问题:有一个动画,一开始静止处于第一帧,只在用户 hover 的时候运行动画,在运行一次后停止,并且停留在最后一帧,使用 CSS 可以完成么? 像是这样: 一个非常有意思的问题,答案是可以的。我们抽取一下其中的关键点: 动画只运行一次,未运行前处于第一帧,运行完后处于最
前端周刊:2022-8 期 前端开发 为什么视频网站的视频链接地址是 blob? 很详细的讲解了如何实现视频流式传输,还能防盗链 实时 html5 的 mp3 播放。再次体验数据格式 arraybuffer。 音频防盗链 前端工具箱-css 动画缓动函数预览及生成 css 动画缓动函数
原创不易,求分享、求一键三连 前段时间有个30多岁的技术负责人在群里感叹: 小钗啊,看了你那么多文章,虽然受益匪浅,但依旧做不好事啊! 老板以为中年男人好拿捏,错,我不是,你让我心情天天不爽,我就撂挑子不干,五月底准备入行滴滴大军! 问明缘由,原来这个小伙伴(也许老兄弟更妥当)裸辞了,
前言                Surging 发展已经有快6年的时间,经过这些年的发展,功能框架也趋于成熟,但是针对于商业化需求还需要不断的打磨,前段时间客户找到我想升级成平台化,针对他的需求我们讨论了很久,他的一些需求想法还是非常先进的,针对于现在surging 还有很多需要研发打磨,后
在浏览器测试JavaScript的方法 JSFiddle Cross Browser Testing Tool Karam + Jasmine + Google Chrome CodePen JSBin Liveweave     测试JavaScript是一件很痛苦的事情。很多工具、技术和框架已
如何使用Ajax实现简单的文件上传 一、起因 相信大家在做web项目中难免会遇到文件上传的业务需求,上传文件一般是通过表单来上传,但当我们不想使用表单时就可以通过Ajax的方式来上传文件,这里就给大家分享使用Ajax上传文件的方法。 二、web页面 这里我简单地写了一个Demo页面,由一个inpu
/* 下述代码近供参考 水仙花数是指一个3位数,它的每个位上的数字3次幂之和等于它本身。 例如:(1的3次方+5的3次方+3的3次方=153),请打印所有的水仙花数。 */ // 第一种方式 for(var a=0;a<10;a++)
一、引言   继上次实现文件上传功能后,产品经理又提出了新的需求:上传图片预览及进度条效果。本次就来搞定这个功能,这次开发基于上次的随笔,需要的小伙伴们自取 -- 如何使用Ajax实现简单的文件上传。 二、了解原理   要想实现文件预览效果,这里使用的是 FileReader 对象。使用它的 re
1 var a,b,c,swap; 2 a=+prompt(); 3 b=+prompt(); 4 c=+prompt(); 5 //冒泡排序:最坏情况:比较n*(n-1)/2轮,以下是3个数比较,考虑最坏情
in操作符作用: 遍历类型 基本用法 type roles = "tester" | "developer" | "manager"; const staffCount: { [k in roles]: number } = { tester: 100, developer: 200,
常用事件 onload <script> window.onload = function () { ele = document.getElementById("i") console.log(ele.innerHTML
背景 如今的前端是一个涉猎领域很广的职业。作为一名前端,我们不仅要开发管理系统、数据中台、还要应对年报开发、节日活动等场景。不仅要会增删改查,编写表单,还要具备开发动画、H5 游戏等能力。能做出很 Cool 的动画效果,也是一种前端特有的成就感。所以,我们从动画的实现方法入手,了解浏览器的渲染,以
DOM DOM document Object Model 文档对象模型 // 整个html文档,会保存一个文档对象document // console.log( document ); // 获取当前文档的对象 查找标签 直接查找 document.getElementsByTagName
索引:对象或数组的对应位置的名字 数组的索引就是 number 类型的 0,1,2,3... 对象的索引就是 string 类型的属性名 数字索引签名:通过定义接口用来约束数组 type numberIndex{ [index:number]:string } const testArra
在 CSS 选择器家族中,新增这样一类比较新的选择器 -- 逻辑选择器,目前共有 4 名成员: :is :where :not :has 本文将带领大家了解、深入它们。做到学以致用,写出更现代化的选择器。 :is 伪类选择器 :is() CSS伪类函数将选择器列表作为参数,并选择该列表中任意一个选
BOM BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。 BOM就是浏览器对象模型 BOM提供了一些独立于内容页面与浏览器窗口进行交互的对象接口 BOM的核心是window对象,所以window一般在书写时是可以省略的. BOM其
前端处理二进制流数据--转下载 导言 ​ 因业务需要,实现分类导出功能。筛选导出一定条件的数据,后端处理成Excle数据流,前端实现导出下载。 实现 方法一 ​ 将条件格式化成key=value&...文本格式,接到<a>标签url接口之后,每当点击导出按钮的时候,创建一个
完整项目地址: git@github.com:xsk-walter/myPromise.git // index.js /* 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行 2. Promise 中有三种状态 分别为 成功 fulfilled
数组对象 创建数组 创建方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; 创建方式2: var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a"