html方法收集

文章目录

检测网络速度

javascript 复制代码
//通过 JavaScript 的 Network Information API,检测网络下载速度
if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`当前下载速度: ${downlink} Mbps`);
} else {
    console.log("Network Information API 不被支持");
}

为移动端应用添加振动反馈

javascript 复制代码
/ 振动 500 毫秒
if (navigator.vibrate) {
    navigator.vibrate(500);
} else {
    console.log("Vibrate API 不被支持");
}

// 创建振动和暂停的模式
if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200, 100, 200]);
}

禁止文本粘贴

javascript 复制代码
<input type="text" id="text-input" />
<script>
  const input = document.getElementById('text-input');
  input.addEventListener("paste", function(e){
    e.preventDefault();
    alert("禁止粘贴内容!");
  });
</script>

隐藏 DOM 元素

html 复制代码
<!--属性与 display: none; 类似,会让元素从页面中消失。-->
<p hidden>这个文本是不可见的</p>

使用 inset 简化定位

css 复制代码
/* 原始方法 */
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* 使用 inset 简化 */
div {
  position: absolute;
  inset: 0; 
}

console 调试

javascript 复制代码
//console.table():以表格形式展示数组或对象:
const data = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];
console.table(data);

//console.group() 和 console.groupEnd():将相关的日志进行分组:
console.group('调试日志');
console.log('消息 1');
console.log('消息 2');
console.groupEnd();

//console.time() 和 console.timeEnd():测量代码执行的时间:
console.time('代码运行时间');
// 模拟耗时代码
console.timeEnd('代码运行时间');

//添加样式
console.log('\x1b[36m%s\x1b[0m', '36代表青色,\x1b[0m重置样式');
console.log('\x1b[43m\x1b[31m%s\x1b[0m', '43是黄色背景,31是红色字体');
//(注:\x1b[36m是ANSI转义码,36代表青色,43是黄色背景,31是红色字体,%s用来占位,\x1b[0m重置样式)

//控制台背景
console.log(
'%c样式1 %c样式2',
'background: linear-gradient(45deg, #ff6b6b, #4ecdc4); padding: 5px 10px; border-radius: 3px; color: white;',
'background: linear-gradient(45deg, #fdcb6e, #e17055); padding: 5px 10px; border-radius: 3px;')

//动态Debug
function logWithStyle(type, message) {
const styles = {
error: 'color: red; font-weight: bold; background: #ffe5e5; padding: 2px 5px;',
warn: 'color: orange; background: #fff3e0; padding: 2px 5px;',
success: 'color: green; background: #e8f5e9; padding: 2px 5px;',
debug: 'color: #666; background: #f5f5f5; padding: 2px 5px;'
};
console.log(`%c${type.toUpperCase()} ➤  ${message}`, styles[type]);
}

// 用法:
logWithStyle('error', '这是一个Bug!'); // 红色警告
logWithStyle('success', 'Bug已祭天!'); // 绿色嘚瑟

防止移动端下拉刷新

javascript 复制代码
body {
  overscroll-behavior-y: contain;
}

让网页可编辑

javascript 复制代码
document.body.contentEditable = 'true';

使用 ID 生成全局变量

html 复制代码
<div id="myDiv">Hello</div>

<script>
    console.log(myDiv); // 自动生成全局变量 myDiv
</script>

平滑滚动效果

html 复制代码
html {
    scroll-behavior: smooth;
}

使用 :empty 选择器隐藏空元素

css 复制代码
p:empty {
  display: none;
}

原文链接1

相关推荐
曹天骄几秒前
如何在 TypeScript + ESLint 中正确处理 React 未定义问题
javascript·react.js·typescript
LLM丶星9 分钟前
CSS+JS 堆叠图片动态交互切换
前端·javascript·css
等什么君!22 分钟前
element-plus 的简单应用
前端·javascript·vue.js
一点一木24 分钟前
🚀 2025年03月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
CCChaya-软件技术教师35 分钟前
16-CSS3新增选择器
前端·css·css3
小涵41 分钟前
【AWS】使用CloudFront S3 Lambda打造丝滑低延迟Web体验
前端·云计算·aws·cloud·cdn·s3·cloudfront
蚂蚁在飞-1 小时前
大模型开发框架LangChain GO
开发语言·javascript·人工智能·机器学习
zxg_神说要有光1 小时前
Three.js 小册上线了,我最重要的一部作品
前端·javascript·node.js
大广-全栈开发1 小时前
前端模拟 websocket 请求小工具
前端·websocket·网络协议
爱吃水果和蔬菜丫2 小时前
el-select开启filterable模式,限制输入框输入类型
javascript·vue.js·ecmascript