记录－交流－Web开发知识分享
window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用这种消息传递技术来实现安全的通信。
这项技术称为“跨文档消息传递”，又称为“窗口间消息传递”或者“跨域消息传递”。…
js产生随机数通常是使用 javascript 的Math.random()函数
常用的几种方法：Math.random()表示:结果为0-1之间（包括0,不包括1）；
Math.floor(Math.random()*10+1)表示结果为1-10之间的一个随机数
Math.floor(Math.random()*24)表示结果为0-23间的随机数
1.Math.random();返回0-1之间的随机数，可能为0，但是总是小于1，[0,1)
返回指定范围随机数(m~n)之间的范围的公式为：
Math.random()*(n-m)+m
2.Math.ceil(n);返回大于等于n的最小整数（向上取整）
用Math.ceil(Math.random()*10)时，主要获取1到10的随机整数，取0的几率很小
3.Math.round(n)返回n四舍五入后整数的值
用Math.round(Math.random());可均衡获取0和1的随机整数
用Math.round(Math.random()*10)时，可基本均衡获取0到10的随机整数
4.Math.floor(n)返回小于等于n的最大整数（向下取整）
用Math.floor(Math.random(*10))时，可均衡获取0到9的随机整数
…
js获取自定义属性的两种方法
四种获取属性的方法
首先获取一个元素：var elem = document.getElementById(‘elem’);
1 1、点(获取不到自定义属性)：
2、[] 也可以获取属性 ，有利于进行传参操作。
elem.style[‘background’] = ‘yellow’
1
3、getAttribute():早期获取自定义属性的方法。
var foo = elem.getAttribute(‘ancheng’);//Ancheng
1
同时也能进行设置：
elem.setAttribute(‘ancheng’,‘安成’);
1
4、data-*(现在经常使用的获取自定义属性的方法)
console.log(elem.dataset.user);
1
重点： *号的名字若果有下划线，就转成小驼峰。
console.log( elem.dataset.userName)
1
注意： 可以在js中直接添加自定义属性，但是只能在js中用，因为你还没有加入html中。
elem.myColor = ‘red’;
console.log( elem.myColor );…
这篇文章主要为大家详细介绍了js实现拖拽与碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现拖拽与碰撞检测的具体代码，供大家参考，具体内容如下
拖拽
原理分析
对于拖拽一个div盒子，首先我们需要将鼠标移动到盒子上，然后按住鼠标左键，移动鼠标到目标位置，再松开鼠标，对于这一过程的分析，
显然需要三个鼠标事件：
实现步骤
1、**鼠标按下时：**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离，分别减去盒子距离页面左边界与上边界的值，这样我们
就得到了鼠标距离盒子左边界与上边界的值；
2、**鼠标移动时：**我们重新获取此时鼠标距离页面左边界与上边界的值，再用它们减去步骤一中得到的鼠标距离盒子左边界与上边界的
值，将得到的值重新赋给盒子，这样盒子就能与鼠标保持相对静止，在页面上移动；
3、**松开鼠标时：**将鼠标移动事件清除。
实现代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
const getCookie = (name) => document.cookie.match(`[;\s+]?${name}=([^;]*)`)?.pop();
// 比如cookie如下： a=b; c=d
// 使用
getCookie('c') // d其中match是字符串的原型方法。
str.match(regexp)
如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp
以上，所以完全不必写一个正则，因为正则拼字符串还要使用new RegExp构造方法，然而match内部。已经隐式的判断了。
string原型上search方法同样的实现原理，因为后者指返回索引，类似indexOf，所以性能会好一些。
有点跑题，不妨跑的再远一些。。。
其实string身上的match方法实际是调用了正则原型RegExp[Symbol.match]方法。
const str = 'foo';
str.match(/foo/); // ['foo']
RegExp.prototype[Symbol.match].call(/foo/, str); //['foo']
…
在js代码中，偶尔会碰到函数明明已经定义，却提示xx() is not defined
如下如：
js代码如下：
明明已经执行了一遍了，但是定时器里的就是找不到
一直出现上面的错误提示
解决办法其实很简单，将代码改写为如下形式即可：
完美解决！！快去试试吧。
底层原理目前还不清楚，想起来了再来填坑。
…
iframe代码： json
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<div draggable='true' id="hahaha" class="box">
ddddd
</div>
<div draggable='true' id="hahaha2" class="box">
ddddd
</div>
<script>
/** Iframe code **/
//say you have this div inside … JavaScript 功能强大且灵活，它允许您以任何您喜欢的方式编写代码，并尝试一些非常不寻常的事情，这些事情可能会导致代码中的错误。以下是我学到的关于 JavaScript 编码的 50 件事，你应该知道。
如果您为 JavaScript 使用任何库/框架或编译器，可能会启用“use strict”，但以防万一，请记住将其添加到文件和函数中。如果您不包含它，它将确保您得到会静默发生的错误。…
JavaScript是一种单线程的编程语言，需要通过异步的方式才能获得较高的性能。然而异步编程对于刚开始进行学习的时候往往会使大家产生困扰。
何为同步/异步
举个例子：如果现在你需要完成两件事情，烧水和吃饭。那么你会如何进行时间分配呢？
方法一：首先烧水，然后等待水烧开后再吃饭。…
近期评论