微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。...如何修复移动设备上的100vh问题？ 第一个建议是尽量少用 vh。例如，在上面的代码中，你可以使用一个 sticky 按钮，避免使用vh单位。...仅使用 CSS 在移动设备上修复 100VH 问题 时，使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如，当你在建立登陆页面时，这很常见。...('--vh', vh + 'px'); 在 CSS 中： min-height: calc(var(--vh) * 100); 最后一件事是当窗口被调整大小或设备方向改变时，重新计算这个值: function...0.01; document.documentElement.style.setProperty('--vh', vh + 'px'); } // 初始计算 calculateVh(); // 调整大小时重新计算
document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。 注意： 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。...= document.querySelector('div'); // 注册调整窗口大小事件 window.addEventListener('resize...案例：发送短信倒计时 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 ?...该对象包含用户（在浏览器窗口中）访问过的URL。 ? history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
它是JS访问浏览器窗口的一个接口。 它是一个全局对象。定义在全局作用域中的变量、 函数都会变成window对象的属性和方法。...document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。 注意： 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。...= document.querySelector('div'); // 注册调整窗口大小事件 window.addEventListener('resize...该对象包含用户（在浏览器窗口中）访问过的URL。 ? history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 ?
它是 JS 访问浏览器窗口的一个接口。 2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。...document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize = function(){} window.addEventListener("resize",function(){}); window.onresize 是调整窗口大小加载事件...= document.querySelector('div'); // 注册调整窗口大小事件 window.addEventListener('resize...该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。 注意： 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。...= document.querySelector('div'); // 注册调整窗口大小事件 window.addEventListener('resize'...'0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60...该对象包含用户（在浏览器窗口中）访问过的URL。 ? history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 ? 1.3.
是如何的方便 看标记的内容，是我们比较常见的，按钮(easyui做的肯定比我们普通按钮什么都没有的更好)、日历、对话框窗口等等，并且对于每一个组件，easyui都会给出我们例子，供我们参考...maxWidth:当调整大小时候的最大宽度 默认10000 maxHeight：当调整大小时候的最大高度 默认10000 minWidth：当调整大小时候的最小宽度...默认10 minHeight：当调整大小时候的最小高度 默认10 style:div的一些属性 --> div class="easyui-resizable...maxWidth:当调整大小时候的最大宽度 默认10000 maxHeight：当调整大小时候的最大高度 默认10000 minWidth：当调整大小时候的最小宽度...默认10 minHeight：当调整大小时候的最小高度 默认10 style:div的一些属性 --> div id="rr"
> div> 属性及方法说明 Window需要依存于以下的三个组件： * 可拖放(Draggable) * 调整大小(Resizable) * 面板(panel) 下面来介绍Window的具体用法...true modal 布尔 定义窗口是否是一个模式窗口。...false minimized 布尔 定义在初始化的时候最小化面板 false maximized 布尔 定义在初始化的时候最大化面板 false closed 布尔 定义在初始化的时候关闭面板 false...width: 新的宽度 height: 新的高度 onMove left,top 当面板移动之后触发 left: 新的左侧位置 top: 新的顶部位置 onMaximize none 当窗口最大化的时候被触发...onRestore none 当窗口恢复到原来的大小时被触发 onMinimize none 当窗口最小化的时候被触发 方法 名字 参数 描述 options
//当放大或缩小时触发 console.log(e.type, e.detail.ratio); } }).cropper(options); *****...是否在窗口尺寸改变的时候重置cropper。 checkImageOrigin：类型：Boolean，默认值true。...是否在剪裁框上显示黑色的模态窗口。...是否在剪裁框上显示白色的模态窗口。 guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。...center: 默认true 是否显示裁剪框 中间的+ restore : 类型：Boolean，默认值true 是否调整窗口大小后恢复裁剪区域。
() { alert(22); }) document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数。...('div'); // 注册调整窗口大小事件 window.addEventListener('resize', function() { // window.innerWidth...'0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60 % 60);...该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 1.3. JS执行机制 以下代码执行的结果是什么？
JS实现定时器 有趣的小案例池子： JS实现定时器 JS实现关闭图片窗口 JS实现输入检验 获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置 聊天信息框显示消息 JS...点击切换背景图 自动切换背景的登录页面 JS制作跟随鼠标移动的图片 JS实现记住用户密码 案例分析 我们需要制作一个定时器，可以在屏幕上面显示的。...返回的是用户输入时间总的毫秒数 这里需要的是， // 需要的是填写当前自己的电脑上的时间以后的时间，不然会很奇怪 countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白...'0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60...'0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60
1、处理尺寸调整 <!...利用： window.scrollTo(0,1)//去除地址栏 PS：只有在页面内容长于一整页时，这一招才奏效；那么，就出现问题了，地址栏的移除还会影响所获取的页面的 innerHeight。...你希望画布的大小调整成占据整个页面，解决这一问题，可以简单的把容器元素的高度设置成一个比没有没有地址栏情况下的最终高度还要大得已知值，然后滚动窗口，来重新计算 innerHeight。 <!...initalWidth + "---initalHeight:" + initalHeight + "---" + (w <= maxWidth)); //确保内容比页面大...orientationchange' : 'resize';//用来判断是 $(window).on(resizeEvent,handleResize) //阻止防止滚动
令牌桶和漏桶允许在处理请求速率方面有一定的灵活性，而固定窗口计数器是更严格的意义上限制。如果请求快速地达到了限制，则在下一个窗口之前不会处理更多请求，而不管实际的容量或需求如何。...考虑一个速率限制为每小时100个请求的 API。在固定窗口计数器下，如果在最初30分钟内收到100个请求，则不论服务器的实际容量或需求如何，在该小时的剩余30分钟内将不会处理进一步的请求。...与固定窗口不同，此方法考虑每个单独请求的时间，提供了更动态的方法。它保存了每个传入请求的时间戳的日志。然后根据当前滑动窗口(一个连续移动的时间框架)中的请求数确定速率限制。...如果此窗口中的请求数超过阈值，新请求将被拒绝或排队。 固定窗口计数器对静态时间窗口施加严格的限制，导致每个窗口边缘的潜在爆发。滑动窗口日志提供了一个更动态的方法，随着时间的推移不断调整。...这可以防止在固定窗口的重置点常见的突发流量。例如，一个 API 每分钟限制100个请求。在滑动窗口日志中，此限制在过去一分钟内不断进行评估。如果有请求进入，滑动窗口日志会在最后60秒内检查所有请求。
Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel... * 因为背景图的较大边为200，将200放大到目标容器400的高度，放大了2倍，最终结果200\*400 4、图片响应式 （1）目的 + 各种终端都需要正常显示图片 + 移动端应该使用更小...('resize', 窗口变化后执行的函数名); 5 ``` 6 7 - 这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次 trigger函数是让window对象立即出发一次 $(window...).on('resize', 窗口变化后执行的函数名).trigger('resize'); 3、小图片不需要使用背景的方式 - 小图如果还是使用背景的方式，当屏幕特别小时，效果很差 - 所以当使用小图时...整个板块在超小屏幕下是隐藏起来的 + 只需要给当前板块加上hidden-xs的class
-- 固定定位 --> 相对定位 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。...但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。 工程应用： “子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。...此时，如果div相对定位，p绝对定位，那么， p将无视父亲的padding，在border内侧为参考点，进行定位： ?...我们可以总结成一个公式： left:50%; margin-left:负的宽度的一半 固定定位 固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。 备注：IE6不兼容。...数值大的压盖住数值小的。 有如下特性： （1）属性值大的位于上层，属性值小的位于下层。 （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
背景 现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验...在开始之前我们先了解几种布局 固定布局/弹性布局 固定布局顾名思义，就是一个固定大小的设计，然后让内容在大屏中居中，小屏中有滚动条 body{ width: 1200px; margin...，改变相应的样式，这种行为被称为断点 同时在设计项目的时候，我们可以先完成一个手机端的页面，然后通过断点的方式不断完善pc的展示效果，这种通常被叫做移动优先设计 现代自适应布局 在很久之前，我们经常使用...1%，当窗口宽度减小的时候，1vw表示的大小也会对应减小 1vh - 窗口高度的1%，当窗口高度减小的时候，1vh表示的大小也会对应减小 vmin - 选择最小的vw和vh vmax - 选择最大的vw...，它给了几个常用断点 Pasted image 20230606213705.png 在写断点的时候直接在元素上加前缀就可以了 div class="p-2 md:p-4 lg:p-6">div
2. relative定位 概述：relative定位让元素保持在文档流中的位置，但可以通过偏移量（top, bottom, left, right）调整位置，不影响其他元素布局。...覆盖问题：绝对定位元素容易覆盖其他内容，未适当调整z-index。 避免策略： 明确指定一个合适的包含块（父元素），并确保该父元素有除static外的定位。...考虑使用z-index来控制堆叠顺序，防止元素间的遮挡问题。 4. fixed定位 概述：fixed定位使元素相对于浏览器窗口固定，即使滚动页面也不会移动。...避免策略： 测试不同浏览器和设备，确保固定元素在各平台上的表现一致。 设计时考虑页面滚动情况，合理安排固定元素的位置和尺寸，避免遮挡重要内容。 实战代码示例 在原位置基础上偏移，absolute元素相对于.container定位，而fixed元素则固定在浏览器窗口底部左侧。
为了防止用户电脑里面，没有微软雅黑这个字体。...让元素相对自己原来的位置，进行位置调整。 也就是说，如果一个盒子想要进行位置调整，那么就要使用相对定位。...就两个作用： 1、微调元素； 2、做绝对定位的参考； 4.4 相对定位的定位值 可以使用left、right来描述盒子左、右的移动；可以使用top、bottom来描述盒子的下、上的移动。...可以使用如下设置使其水平居中： left:50%; margin-left:负的宽度的一半 6 固定定位 固定定位，就是相对于浏览器窗口的定位。无论页面如何滚动，这个盒子显示的位置不变。...数值大的盖住数值小的。 2、只有定位了的元素，才能够有z-index值。也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index值。而浮动的东西不能够使用。
Max Width 在设置max-width值时，它的好处在于防止width属性使用的值超过max-width的指定值。max-width的默认值是none。...事例源码:https://codepen.io/shadeed/pe... max-height 在设置max-height值时，它的好处在于防止height属性使用的值超过max-height的指定值....wrapper { max-width: 70ch; /* Other styles */ } 对高度未知的元素进行动画处理 在某些情况下，我们面临着使手风琴或移动菜单具有意想不到的内容高度的挑战...modal是一个div>元素，因此它已经具有其父元素的100％宽度，对吗？ 考虑下面为模态设计简化的测试案例。 请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。 ?...请注意，页脚未粘贴在浏览器窗口的末尾。 那是因为内容不足以达到浏览器窗口高度的长度。 修复后，其外观应如下所示： ?
()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时，不会触发（增加阻止事件冒泡功能） div class="div1"> div class="div2...而focusout可以在父元素上检测子元素失去焦点情况 四 其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize（）当调整窗口大小时触发的事件 //小案例（当滚动到一定高度出现搜索菜单...screenX/screenY 获取显示器屏幕位置的坐标 //整个屏幕的高度 不会随着滚动条变化而变化 //clientX/clientY 获取相当于页面视口的坐标 //除去上下窗口...在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。...鼠标左健 2 鼠标中健（滚轮键） 3 鼠标右健 6 event.preventDefault() 阻止事件的默认行为 7 event.stopPropagation() 防止冒泡事件
在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。 在本文中，将介绍 CSS中 的 wrapper 布局，它们如何工作，如何使用它们以及何时不使用它们。...在没有wrapper的情况下，将设计元素划分为列是不容易完成的。 在CSS中实现 wrapper 目前我们已经了解了wrapper基础知识和优点，接下来我们来具体的看看在 CSS 如何使用它。...sign-up">Sign up 在上面的 HTML 中，可以使用text-align将内容居中 .hero { text-align: center; } 除非你调整浏览器窗口的大小...为避免上述问题，可以使用wrapper来防止文本长度变得过长并在移动设备中增加间距。...section { padding: 1rem calc(50% - 585px); } 这样还有问题，在移动设上内容将粘贴备的边缘，一种解决方案如下： section { padding: 1rem
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
