本例演示了filter:blur() 和filter:contrast()的用法，实现两个盒子融合的效果。html部分： <div class="container"> <div class="box1"></div> <div class="box2"></div> </div>css样式： body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0; margin: 0; background: #111; } .container{ dis
彩虹 🌈🌈 草莓 🍓🍓电话 📞 📞枫叶 🍁 🍁脚印 👣 👣喇叭 📣 📣拇指 👍 👍ok 👌 👌红苹果 🍎 🍎青苹果 🍏 🍏日期 📆 📆日期 📅 📅时间 🕔 🕔手指 👉 👉统计 📊 📊问号 ❓ ❓文件夹 📂 📂西瓜 🍉 🍉邮箱 📧 📧直播 🎦 🎦
在 JavaScript 中，XMLHttpRequest 是客户端的一个 API，它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。创建 XMLHttpRequest 对象XMLHttpRequest 用于在后台与服务器交换数据。创建 XMLHttpRequest 对象的方法如下：var xhr = new XMLHttpRequest (); IE 5.0 版本开始以 ActiveX 组件形式支持 XMLHttpRequest，IE 7.0 版本开始标准化 XMLHttpRequest。不过所有浏览器实现的 XMLHttpRequest 对象都提供相同的接口和用法。 示例下面示例使用工厂模式把定义 XMLHttpRequest 对象进行封装，这样只需要调用 creatXHR() 方法就可以返回一个 XMLHttpRequest 对象。//创建XMLHttpRequest 对象 //参数：无 //返回值：XMLHttpRequest 对象 function cr
点击按钮，请求远程图片接口并显示到页面上。html部分放一个空的div和一个按钮button即可，主要是js代码如下：const btn =document.querySelector('button') //获取按钮 btn.addEventListener('click',function(){ //创建Promise const p =new Promise((resolve,reject)=>{ //1.创建ajax请求对象 const xhr =new XMLHttpRequest() //2.初始化 xhr.open('get','https://api.vvhan.com/api/view?type=json') //3.发送 xhr.send() //4.处理响应结果 xhr.onreadystatechange=function(){ if(xhr.readyState === 4){
注：该实例需要在php环境运行目录结构如下图：先看页面部分，html代码如下：<body> <div id="container"> <div id="main"> <h1>请输入用户名输入数据</h1> </div> <div id="contorll"> <input type="text" id="uname"> <button>请求</button> </div> </div> <script src="demo.js"></script> </body>接下来是样式：body{ min-height: 100vh;
本例实现鼠标放上动画效果，主要用到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 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存
铅笔Naruto
前端攻城狮
