JackAfan-CSDN博客

原创 CSS 实现多行文本垂直居中

居中有时候有些文字需要行居中显示，行我们知道使用:<div> JackAfan <br> JackAfan</div>div{ width:100px; height:100px; background:pink; text-align: center;}垂直居中<div id="con"> <div> JackAfan <br>

2021-09-08 10:21:25 184

原创手机端点击灰色背景

手机端点击a、span、div的时候默认有一个灰色背景闪烁使用一下css清除它吧~span,a{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; }

2021-09-08 08:50:35 99

这样的滚动条是不是比默认的滚动条好看一丢丢~body{ margin:0; padding:0; overflow-y:scroll;}body::-webkit-scrollbar { width:6px; }body::-webkit-scrollbar-track { background:#f1f1f1; border-radius:4px; }body::-webkit-scrollbar-thumb { background:#c6c6c6; border-radius

2021-09-07 12:16:37 107

原创异步专题7

requestAnimationFrame 与 setTimerout性能比拼{ function fn(){ document.title ++; setTimeout(()=>{ fn(); },1000); } // fn();}{ function fn(){ document.title ++; window.requestAnimationFrame

2021-09-03 10:35:40 63

原创异步专题6

使用async和await{ // async和await function move(ele, direction, target) { return new Promise(resolve => { function fn() { let start = parseInt(window.getComputedStyle(ele, null)[direction]); let d

2021-09-03 10:34:45 54

原创异步专题5

使用promise对象{ // promise function move(ele, direction, target) { return new Promise(resolve => { function fn() { let start = parseInt(window.getComputedStyle(ele, null)[direction]); let dir = (

2021-09-03 10:34:16 60

原创异步专题4

回调{ // 如何从上面移动到下边呢 -> 回调 -> 也是回调地域 function move(ele, direction, target,cd) { function fn() { let start = parseInt(window.getComputedStyle(ele, null)[direction]); let dir = (target-start)/Math.abs(target-start

2021-09-03 10:33:43 75

原创异步专题3

动画帧 requestAnimationFrame{ // 动画帧,相对于 setTimeout 性能好一点; function move(ele, direction, target) { function fn() { let start = parseInt(window.getComputedStyle(ele, null)[direction]); let speed = 5; start

2021-09-03 10:33:01 71

原创异步专题2

异步小案例:方块运动递归{ function move(ele, direction, target) {//元素,方向(left,top),目标点 let start = parseInt(window.getComputedStyle(ele, null)[direction]);//(元素,伪类)[样式名]; -> 获取元素当前位置[有单位]; let speed = 5;//速度; start = start + speed;

2021-09-03 10:32:35 76

原创异步专题1

同步与异步/* 同步异步是什么: 同步和异步是一种消息通知机制同步阻塞: A调用B,B处理获得结果,才返回A A在这个过程中,一直等待B结果,没有拿到结果之前,需要A(调用者)一直等待和确认调用结果是否返回,拿到结果,然后继续再执行下去. 做一件事,没有拿到结果之前,就一直等待,一直等到有结果了,再去做下面的事. 异步非阻塞: A调用B,无需等待B结果,B通过状态,通

2021-09-03 10:31:38 67

原创正则表达式

正则表达式文章目录正则表达式一个小案例:为何要学习正则一、正则表达式的两种创建方式二、正则匹配的一些方法正则表达式的元字符匹配模式命名分组与零宽断言一个小案例:为何要学习正则{ let str = "asldkfjal123s23sdfs11"; let arr = []; // 找到所有的数字,并且放在一个数组里面[123,23,11]; { function getNumber(str) { let arr = [];

2021-09-03 10:29:55 78

原创 input 高度多了2px

input 默认情况下会高了一点点像素#con{ display:flex;}input,button { height:30px; line-height:30px; border:1px solid #000;}使用box-sizing: border-box;解决~input{ box-sizing: border-box;}

2021-09-03 08:45:17 294

原创 JS判断select发生改变

使用 onchange 事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS判断select发生改变</title></head><body> <div

2021-09-02 11:23:41 1125

原创面向对象思维-王者荣耀

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t

2021-04-03 17:04:31 292

JackAfan