杀死一只知更鸟

杀死一只知更鸟

记录生活留住美好时刻，分享个人学习笔记

css边缘融合效果模糊/对比度 filter blur/contrast

本例演示了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

技术 · 2023-07-16

css边缘融合效果模糊/对比度 filter blur/contrast

markdown语法—好看的图标

彩虹 🌈&#x1F308 草莓 🍓&#x1F353电话 📞 &#x1F4DE枫叶 🍁 &#x1F341脚印 👣 &#x1F463喇叭 📣 &#x1F4E3拇指 👍 &#x1F44Dok 👌 &#x1F44C红苹果 🍎 &#x1F34E青苹果 🍏 &#x1F34F日期 📆 &#x1F4C6日期 📅 &#x1F4C5时间 🕔 &#x1F554手指 👉 &#x1F449统计 📊 &#x1F4CA问号 ❓ &#x2753文件夹 📂 &#x1F4C2西瓜 🍉 &#x1F349邮箱 📧 &#x1F4E7直播 🎦 &#x1F3A6

技术 · 2023-07-15

markdown语法—好看的图标

JS XMLHttpRequest入门教程（非常详细）

在 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

技术 · 2023-07-15

JS XMLHttpRequest入门教程（非常详细）

Promise实践练习—AJAX请求

点击按钮，请求远程图片接口并显示到页面上。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){

技术 · 2023-07-13

Promise实践练习—AJAX请求

ajax实例讲解—ajax发送网络请求，无刷新改变页面元素背景

注：该实例需要在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;

技术 · 2023-07-12

ajax实例讲解—ajax发送网络请求，无刷新改变页面元素背景

css创意菜单鼠标悬停动画效果

本例实现鼠标放上动画效果，主要用到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=&

技术 · 2023-07-12

css创意菜单鼠标悬停动画效果

css故障闪动

本例实现加载中故障闪动特效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-

技术 · 2023-07-12

css故障闪动

js实现节流函数

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。在滚动条滚动事件里，每隔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 } }

技术 · 2023-07-11

js实现节流函数

js防抖函数及优化

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次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(){

技术 · 2023-07-11

js防抖函数及优化

原生js实现VUE双向绑定

该实例模拟实现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 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存

技术 · 2023-07-11

原生js实现VUE双向绑定

Theme Jasmine by Kent Liao