开发小技巧
2021年3月4日
3分钟阅读
2 次浏览
0 条评论
开发小技巧 1 测网速 Chrome 浏览器提供了原始的 APInavigator.connection.downlink 可以访问用户当前网络环境的网络带宽。 `js navigator.connection.downlink ` connection.downlink返回的并不是用户当前环境的展示的网络传输速度，而是当前网络的带宽，官方说法是：返回以Mb/s为单位的有效带宽，并保留该值...
开发小技巧
1 测网速
Chrome 浏览器提供了原始的 APInavigator.connection.downlink 可以访问用户当前网络环境的网络带宽。
js1navigator.connection.downlink
connection.downlink返回的并不是用户当前环境的展示的网络传输速度，而是当前网络的带宽，官方说法是：返回以Mb/s为单位的有效带宽，并保留该值为25kb/s的最接近的整数倍。
例如，我在我家里 Chrome 浏览器控制台跑一下 navigator.connection.downlink 这段语句，结果返回的是10, 表示下载带宽是10M的。
具体场景看这篇文章：https://www.zhangxinxu.com/wordpress/2021/04/navigator-connection-downlink/
2 禁止拉动刷新
CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动
html1body { 2 overscroll-behavior-y: contain; 3}
这个属性对于组织模态窗口内的滚动也非常有用--它可以防止主页面在到达边界时拦截滚动。
具体场景参考这篇文章：https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/
3 禁止插入文字
当用户在浏览器用户界面发起“粘贴”操作时，会触发 paste 事件。
有时候，我想禁止用户从某个地方复制的文本粘贴到输入框中。通过监听paste事件并调用其方法preventDefault()，这可以很容易做到。
js1<input type="text"></input>
2<script>
3 const input = document.querySelector('input');
4
5 input.addEventListener("paste", function(e){
6 e.preventDefault()
7 })
8
9</script>
4 自动关联输入框
html1<body>
2 <!-- 注意三点
3 1. 两个输入框必须要同属于一个表格
4 2. 获取的是名字而不是类名或id名
5 3. onchange 是失去焦点且内容改变才会执行函数~
6 onblur 只要失去焦点 就会执行函数~~
7 具体到题目,onblur和onchange表现出的效果一样,但onchange效率高,onblur性能低~
8 -->
9 <form name="myfm">
10 <input type="text" name="first_text">
11 <input type="text" name="second_text" onchange="writeIt(value)">
12 </form>
13</body>
14<script>
15 function writeIt(value){
16 document.myfm.first_text.value=value;
17 }
18</script>
19</html>
喜欢这篇文章吗？
加载中...
评论
0 条登录后即可参与评论讨论
加载评论中...
相关文章
目录