首页
留言
友情链接
Search
1
如何使用JavaScript获取和设置CSS root变量值
952 阅读
2
中国历史朝代顺序图
525 阅读
3
春和 《江海共余生》
412 阅读
4
清除浮动,单行多行超出用...
341 阅读
5
hyperf常用命令
318 阅读
分享
Web前端
html&css
javascript
Vue
shopify
shoplazza
后端
ThinkPHP
YII2
服务器端
软件安装
问题合集
历史
故事
诗词
生活
学习
其他
抖音
快手
小视频
随笔
易经
书摘
登录
/
注册
Search
标签搜索
诗词
sunshine
累计撰写
143
篇文章
累计收到
14
条评论
首页
栏目
分享
Web前端
html&css
javascript
Vue
shopify
shoplazza
后端
ThinkPHP
YII2
服务器端
软件安装
问题合集
历史
故事
诗词
生活
学习
其他
抖音
快手
小视频
随笔
易经
书摘
页面
留言
友情链接
搜索到
46
篇与
的结果
2024-08-16
如何理解 JS 的异步?
参考:JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。
2024年08月16日
27 阅读
0 评论
0 点赞
2024-08-15
shopify recently viewed products
// Save product ID to localStorage, for use in the 'Recently viewed products' section. {%- if request.page_type == 'product' %} try { const items = JSON.parse(localStorage.getItem('cc-recently-viewed') || '[]'); // If product ID is not already in the recently viewed list, add it to the beginning. if (!items.includes({{ product.id | json }})) { items.unshift({{ product.id | json }}); } // Set recently viewed list and limit to 12 products. localStorage.setItem('cc-recently-viewed', JSON.stringify(items.slice(0, 12))); } catch (e) {} {%- endif %}
2024年08月15日
26 阅读
0 评论
0 点赞
2024-08-02
javascript 返回顶部实例
平滑滚动到顶部示例
2024年08月02日
34 阅读
0 评论
1 点赞
2024-07-09
javascript 动态加载脚本
使用Promise 动态加载
2024年07月09日
51 阅读
0 评论
1 点赞
2024-07-03
防抖与节流
防抖与节流的区别:虽然防抖和节流都是优化高频率事件的方法,但它们有不同的侧重点:防抖(Debouncing):在特定时间内只执行一次函数,时间段内的重复调用会重新计时。适用于搜索输入、窗口调整大小等事件。节流(Throttling):限制函数在特定时间内执行的次数。适用于滚动事件、鼠标移动等。<script> function debounce(func, wait) { let timeout; return function (...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } // 定义需要防抖的函数 function handleResize() { console.log('Window resized'); } // 创建防抖函数,设置等待时间为 300 毫秒 const debouncedResize = debounce(handleResize, 300); // 添加事件监听器 window.addEventListener('resize', debouncedResize); // 定义需要防抖的函数 function handleInput(event) { console.log('Input value:', event.target.value); } // 创建防抖函数,设置等待时间为 500 毫秒 const debouncedInput = debounce(handleInput, 500); // 添加事件监听器 // const inputElement = document.querySelector('input'); // inputElement.addEventListener('input', debouncedInput); // 节流函数实现 function throttle(func, wait) { let timeout; let lastRun = 0; return function (...args) { const context = this; const now = Date.now(); if (now - lastRun >= wait) { lastRun = now; func.apply(context, args); } else { clearTimeout(timeout); timeout = setTimeout(() => { lastRun = Date.now(); func.apply(context, args); }, wait - (now - lastRun)); } }; } // 节流函数使用示例 // 定义需要节流的函数 function handleScroll() { console.log('Scrolled'); } // 创建节流函数,设置等待时间为 200 毫秒 const throttledScroll = throttle(handleScroll, 200); // 添加事件监听器 window.addEventListener('scroll', throttledScroll); </script>
2024年07月03日
41 阅读
0 评论
1 点赞
2024-04-25
jquery 点击锚点事件并取消scroll事件,平滑滚动至锚点位置
在jQuery中,如果你想要取消由锚点点击触发的滚动事件,你可以使用event.preventDefault()方法来阻止默认的滚动行为。以下是一个简单的例子:$(document).ready(function(){ $('a[href*="#"]').click(function(event){ // 阻止默认的点击事件 event.preventDefault(); // 获取目标位置 var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); // 执行平滑滚动 if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); } }); });
2024年04月25日
127 阅读
0 评论
1 点赞
2024-03-29
css 滚动条优化问题
假设最外层容器命名为outer,那么特定的这个区域滚动条的优化如下: .outer { width: 200px; height: 200px; border: 1px solid red; display: block; overflow-x: scroll; /* Enable scroll for the y-axis */ overflow-y: hidden; /* Disable scroll for the x-axis */ } .inner { height: max-content; /* Use max-content or a fixed height */ width: max-content; /* Use max-content or a fixed width */ } /* 整个滚动条 */ .outer::-webkit-scrollbar { width: 5px; /* 设置滚动条的宽度 */ height: 5px; /* 设置滚动条的高度 */ } /* 滚动条轨道 */ .outer::-webkit-scrollbar-track { background: #f1f1f1; /* 设置轨道的背景颜色 */ } /* 滚动条的滑块 */ .outer::-webkit-scrollbar-thumb { background: #fc9a41; /* 设置滑块的背景颜色 */ } /* 当鼠标悬停在滑块上 */ .outer::-webkit-scrollbar-thumb:hover { background: #fc9a41; /* 设置滑块在悬停状态下的背景颜色 */ } <div class="outer"> <div class="inner"> test content </div> </div>
2024年03月29日
64 阅读
0 评论
1 点赞
2023-08-28
javascript 邮箱校验
javascript 邮箱校验function isEmail(str) {var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;return reg.test(str);}
2023年08月28日
78 阅读
0 评论
0 点赞
2023-08-21
Shopify metafields json 使用方法
定义一个json格式的属性,假设定义成:product.metafields.custom.clothes在产品中设定的值为:{ "color":"red", "size":"M", "weight":"0.2kg" }在Liquid页面中使用方法:<div>color: {{ product.metafields.custom.clothes.value.color }}</div> <div>size: {{ product.metafields.custom.clother.value.size }} </div>
2023年08月21日
97 阅读
0 评论
2 点赞
2023-07-26
javascript 复制粘贴
<script> function sun_copy() { var coupon_code_dom = document.getElementById("coupon-code") var show_copy = document.getElementById("sunshine-copy") var coupon_code = coupon_code_dom.innerText var inp = document.createElement("input") document.body.appendChild(inp) inp.value = coupon_code inp.select() document.execCommand("copy", false) inp.remove() show_copy.innerText = 'Copied' } </script>
2023年07月26日
74 阅读
0 评论
0 点赞
1
2
...
5