本例实现鼠标放上动画效果，主要用到css伪类选择器，filter 滤镜中的 drop-shadow，实现文字发光特效html代码：<body> <ul> <li style="--clr:#00ade1"><a href="" data-text=" Home"> Home </a></li> <li style="--clr:#ff6493"><a href="" data-text=" About"> About </a></li> <li style="--clr:#ffdd1c"><a href="" data-text=&
本例实现加载中故障闪动特效html部分：<div data-glitch="Loading..." class="glitch">Loading...</div>css部分： body{ margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: #111; min-height: 100vh; } .glitch{ color: #fff; position: relative; font-size: 40px; font-weight: 700; letter-
节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。在滚动条滚动事件里，每隔2s弹出广告 window.onscroll=throttle(function(){ alert('这是广告') },2000) function throttle(fn,delay){ let t = true return function(){ if( t){ setTimeout(() => { fn.call(this); t=true }, delay); } t = false } }
防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次js实现防抖，短时间内多次触发的方法，只执行最后一次 let input = document.querySelector('input') let t = null input.oninput = function(){ if(t!=null){ clearTimeout(t) //每次执行前都清除一次定时器 } t = setTimeout(() => { console.log(this.value) }, 500); }代码优化后(闭包)： let input = document.querySelector('input') input.oninput=debounce(function(){
该实例模拟实现Vue中 v-model 实现双向绑定的原理html部分，一个 input 标签输入，h2 标签用来显示输入的数据 <input type="text"> <h2></h2>js部分： let input=document.querySelector('input') let h2=document.querySelector('h2') let obj={ msg:'haha' } input.value=obj.msg h2.innerText = obj.msg input.addEventListener('input',function(e){ obj.msg = e.target.value }) //Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存
本实例实现元素的边框流动特效，主要用到css的伪类、动画html部分：<body> <div class="box"> <h2>css</h2> </div> </body>css代码： html{ height: 100%; } body{ height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #444; } .box{ box-shadow: 0 0 180px #666; position: relative;
本实例实现流动色彩效果，用到conic-gradient圆锥渐变，filter、animation动画html页面：<body> <div class="card"> <h2> React JS <span>Fundamental</span> </h2> <div class="more">Learn More</div> </div> </body> </html>css样式部分： body{ margin: 0; background-color: #1e293b; display: flex; justify-content: center; align-items:
后端app.js：const express=require('express') const app=express() app.get('/test',function(req,res){ res.setHeader('Access-Control-Allow-Origin','*') //跨域处理 let data=[ {id:0,name:'张三',age:23}, {id:1,name:'李四',age:13}, {id:2,name:'王五',age:42}, {id:3,name:'刘能',age:55}, {id:4,name:'赵四',age:34}, ] let result={ code:1, data } res.send(JSON.stringify(result)) }) app.listen(8000,function(){ console.log('app is runing at htt
一、npm init 来初始化 package.json，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件二、安装模块，如expressnpm i express --save
let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/ if(!myreg.test(mobile)){ app.checkForm('手机号格式不正确') }
铅笔Naruto
前端攻城狮
