黑科技偏门实用的js方法总结

原创 已于 2023-02-08 10:39:30 修改 · 置顶 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2020-09-02 14:54:18 首次发布
本文总结了一系列JavaScript中不常见的实用技巧，包括：使用contains方法判断元素包含关系，获取时间戳，CSS计算属性实现自适应布局，调整鼠标形状，处理Ajax请求中的FormData，监听浏览器缩放事件，事件传参，强制组件重新渲染，以及处理文字溢出，XSS、CSRF和HTTPS的安全问题等。这些技巧涵盖了前端开发中的多个方面，能帮助开发者提高效率和解决问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

黑科技偏门实用的js方法总结

一、contains方法

使用场景：
自定义一个组件，监听每一次点击事件，如果点击到组件以外的区域，则组件隐藏——类似于dialog弹窗的效果
原理：每一次点击，都会有捕获和冒泡的阶段，捕获是从html元素向下到点击元素，冒泡阶段是从点击元素向上到html，在这过程中是否有需要的组件dom
使用语法：

//意思判断B中是否包含A
B.contains(A)
//this.$refs.floatCard组件，e.target点击事件详情
this.$refs.floatCard.contains(e.target)

二、获取时间戳

使用场景：
在做一个纯前端的上传功能，操作腾讯云的存储对象，规定存储的格式，用户ID/时间戳，一个不会重复的路径
JavaScript 获取当前时间戳：
第一种方法：(这种方法只精确到秒)

var timestamp = Date.parse(new Date());

第二种方法：

var timestamp = (new Date()).valueOf();

第三种方法：

var timestamp=new Date().getTime()；

将时间戳转换为日期格式

//第一种
function getLocalTime(nS) {
   
   
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{
   
   1,2}$/,' ');
}
alert(getLocalTime(1293072805));
//结果是2010年12月23日 10:53
//第二种
function getLocalTime(nS) {
   
   
    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
}
alert(getLocalTime(1293072805));
//第三种  格式为：2010-10-20 10:00:00
    function getLocalTime(nS) {
   
   
       return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }
    alert(getLocalTime(1177824835));

三、CSS计算属性

使用场景：
有一个自适应的组件，设置高度，并且当屏幕缩小到太小时还要一定的展示空间
使用语法：

height: calc(100vh - 500px);
min-height: 200px;

四、鼠标形状大全

使用场景：
当鼠标移入不同的显示鼠标形状，如手型，十字
使用语法：

style="cursor:*"

hand是手型
pointer是手型
crosshair是十字型
help是问号
text是移动到文本上的那种效果
wait是等待
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

五、Ajax请求发送的FormData是"[object object]"

是因为processData这个配置，processData的作用是：指定ajax是否将data中的数据进行转化，默认是true，即默认会将data中的数据转化成json字符串，false时，直接将data传输到后台。
去掉processData或者修改为true

六、浏览器的放大缩小事件

自定义组件的时候，绝对定位放大缩小，组件的位置不变看起来就是一个缺陷，在每次对浏览器操作，放大缩小的时候就可以重新去刷新，修改组件的定位

// 放大缩小刷新页面
    var normalWidth = window.innerWidth
    var normalHeight = window.innerHeight
    window.onresize = () => {
   
   
      if (normalWidth !== window.innerWidth || normalHeight !== normalHeight.innerHeight) {
   
   
        this.downloadVisible = false
      }
    }

七、事件传参

@click="tm($event,123)"

// methods
tm:function(e,value){
   
   
    console.log(e);
    console.log(value);
}

八、强制重新渲染

v-for里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新。
this.$forceUpdate()强制刷新

九、文字溢出

width: 90%; // 宽度设置
text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本。
white-space: nowrap; // 段落文本不换行
overflow: hidden;  // 内容超出隐藏

十、event事件中，鼠标到屏幕的距离

限制鼠标的操作

// 计算当前浏览器document.body宽度加body滚动条离左边的宽度 和 
// 浏览器文本所用宽度（包括滚动条隐藏区域）比较
document.body.offsetWidth + document.getElementsByClassName('page-container')[0].scrollLeft > 1340 &&
        document.body.offsetWidth - e.clientX < 60

clientX: 1453：clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。随滑动条移动 而变化.
clientY: 213：clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的横向坐标。随滑动条移动 而变化.

layerX: 1253：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
layerY: 102

movementX: 0
movementY: 0

offsetX: 1237：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
offsetY: 31

pageX: 1453：鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
pageY: 213
PageY=clientY+scrollTop-clientTop

screenX: -467：screenX:鼠标在屏幕上的位置,从屏幕左上角开始
screenY: 100

x: 1453
y: 213

十一、在浏览器URL位置输入html代码

data:text/html,<h1>Hello, world!</h1>

原始编辑器

data:text/html, <html contenteditable>

十二、使用innerHTML保存页面内容

var text = document.getElementById('template').innerHTML

十三、字体模糊

color: transparent;
text-shadow: #111 0 0 5px;

十四、多重边框

box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px;
color: black;

十五、随机 Math.random

生成的是0到1的小数

function generateRandomAlphaNum(len) {
   
   
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

十六、修改console样式

var _log = console.log;
console.log = function() {
   
   
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};

十七、两个变量值互换

var a=1,b=2;a=[b,b=a]
最低0.47元/天 解锁文章

200万优质内容无限畅学
99%的程序员都不知道！这些鲜为人知的JavaScript黑科技，让你的代码瞬间起飞！
qq_45750263的博客
07-08 985
本文介绍了JavaScript中两个鲜为人知但强大的高级特性：Proxy和Generator。通过Proxy可以实现自动数据验证和智能缓存系统，提供了比传统验证和缓存更优雅的解决方案。Generator则展示了其在异步流程控制和数据流处理方面的独特优势，能够简化复杂的异步逻辑并优化大数据处理。这些技术虽然相对冷门，但在特定场景下能显著提升代码质量和性能，值得开发者深入学习和应用。
黑科技：JS代码防篡改
04-24
JS代码防篡改，如果修改，代码就不能使用。用于JavaScript代码。
js黑科技
chenxue843400447的博客
08-22 334
(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]
聊聊H5与JS近几年的黑科技
weixin_30588907的博客
05-05 521
聊聊H5与JS近几年的黑科技 自ajax技术的诞生，编程界兴起了一股WEB开发热，facebook，Twitter等众多大佬级企业都在网页应用上大放异彩，这十年我们见证了前端技术的崛起。这期间产生了众多脱离了浏览器的JS和H5开发的黑科技。移动端的react native，cordova，native.js；PC端的Node.js，NW.js；当然还有前端本身的众多框架，vue.js，jquery...
js 黑科技操作
weixin_30861797的博客
02-25 127
.slice(-4) 截取后四位字符串 转载于:https://www.cnblogs.com/geekjsp/p/10434319.html
JavaScript黑科技：简洁有用的一行代码，让你的开发效率飙升！
最新发布
Twinkle_sone的博客
11-30 1230
在这篇技术博客中，我们将向你介绍一些令人惊叹的JavaScript黑科技，这些只需一行代码就能实现的简洁而有用的功能，将极大地提升你的开发效率。无论是优化代码、增加交互性，还是实现复杂的逻辑，这些代码片段将成为你工具箱中的宝贵资源。跟随本文，让我们一起领略这些酷炫的JavaScript技巧吧！
JavaScript字符串String和Array操作的有趣方法
01-19
字符串和数组在程序编写过程中是十分常用的类型，因此程序语言都会将...这些方法可能有些偏门有点奇怪，但有时在效率、可读性、复用性上表现得却更好。重复字符串 常常我们想要把字符串多次打印出来(比如想要个分割
javascript for循环从入门到偏门(效率优化+奇特用法)
01-19
一，for循环的基本写法 代码如下： 代码如下: //例一for(var i=1;i<=10;i++) { alert(i); } 这段代码太简单了，我都不好意思拿出手。代码的执行结果是依次弹出1到10，PS：在早期的IE如IE6中，你把10改成...
Android Studio实用偏门实例代码大全
该压缩包文件“android studio基础实例代码完整可执行代码.zip”意味着提供了直接在Android Studio环境中运行的示例项目，这些项目可能包括各种基础功能和相对偏门但实用的代码实现。 ### 标题知识点 标题中的...
夜息分享偏门SEO.pdf
05-25
- 传统伪原创方法（替换词汇、调整段落）可能无法逃脱搜索引擎的去重策略。理解搜索引擎如何识别重复内容（如指纹提取）有助于创建更高质量、更独特的内容，提高页面排名。 6. **内容与模板的组合**： - 相同内容...
js 很厉害的黑科技
刘荣丹的日志
06-04 957
一、单行写评价组件 //后面的是黑色的五角星 '⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️'.slice(5-rate, 10-rate); //若rate = 1。即slice(4,9) 返回的第五颗亮星和四颗不亮的星星 二、取随机字符串 Math.random().toString(16).substring(2); //13位 Math.random().toString(...
js contains方法实现代码
12-10
为了兼容IE和FF我们不得不用以下方法：  dom contains 方法 by 司徒正美 contains方法 contains方法 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不过火狐支持compareDocumentPosition() 方法，这是W3C制定的方法，标准浏览器都支持，不过实用性性很差，因此没有什么人用，推广不开来。它的使用形式与contains差不多，但返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的： Bits Number Meaning 000000 0 元素一致 000001 1 节点在不同的文档
JavaScript-黑科技
weixin_30564785的博客
08-21 189
单行写一个评级 var rate = 3; "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); 随机字符串 Math.random().toString(16).substring(2) 金钱格式化 //正则表达式实现： var test1 = ‘1234567890‘ var format = test1.replace...
JavaScript黑科技揭秘：掌握这些知识点让开发事半功倍！
青轩桃李能几何，流光欺人忽蹉跎
07-08 398
变量提升（hoisting）是 JavaScript 中的一种行为，它指的是在代码执行之前，JavaScript 引擎会将变量声明（以及函数声明）移动到作用域的顶部。这意味着无论在何处声明变量，它们都会被视为在作用域顶部声明的，并且可以在声明之前使用。变量声明：在作用域内，使用varlet或const声明的变量会被提升到作用域的顶部。例如：// 输出 undefined var myVariable = 10;上述代码中，即使在变量声明之前输出了myVariable，它的值仍然是undefined。
28 个 JavaScript 编程黑科技：还有这种操作！
祈澈菇凉
11-11 423
Javascript 是一门很厉害的语言，我可能学了假的 JavaScript，哈哈，大家还有什么推荐的，欢迎补充。1、单行写一个评级组件"★★★★★☆☆☆☆☆".sli...
JavaScript黑科技：实现一个AST解释器
w2sft的博客
04-17 2230
JavaScript黑科技：直接运行AST（抽象语法树） 实现一个AST解释器 一段JavaScript代码，经过语法分析、语法分析等编译过程之后，会形成一个对应的AST（抽象语法树），形如： AST是一个JSON格式的大字符串，包含有代码相关信息，如：成员表达式调用、参数、标识符、字符串字面量等等。如： {"type":"File","program":{"type":"Program","body":[{"type":"ExpressionStatement","expression"
玩转JavaScript底层黑科技，轻松编写令人惊叹的应用！
你若盛开，清风自来
07-12 521
除了上述示例的对象和函数外，JavaScript 还有许多其他类型的内置对象和函数，你可以进一步学习和探索它们的用法和功能。通过事件队列、宏任务队列和微任务队列的机制，JavaScript 可以在执行过程中管理和调度各种类型的任务，确保它们按照正确的顺序执行，并且避免阻塞。然而，需要注意的是，JavaScript 底层逻辑的实现需要遵循语言规范，并考虑性能和安全等方面的问题。事件队列采用先进先出的顺序，当当前任务执行完毕后，事件循环会检查事件队列，如果有事件待处理，则取出对应回调函数执行。
html在分页功能中如何实现当前页面的页码样式与其他页面不同_通过 Django Pagination 实现简单分页...
weixin_39534395的博客
12-01 177
作者：HelloGitHub-追梦人物当博客上发布的文章越来越多时，通常需要进行分页显示，以免所有的文章都堆积在一个页面，影响用户体验。Django 内置的 Pagination 能够帮助我们实现简单的分页功能，在上一篇教程中我们使用脚本批量生成了几百篇博客文章，正好用于测试分页效果。Paginator 类的常用方法分页功能由 Django 内置的 Paginator 类提供，这个类位于 djan...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值