敲敲打打
0%

发表于 更新于 分类于

MDN - Element: wheel event;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function zoom(event) {
  // 缩放的时候 event.ctrlKey 为 true, 否则认为是滚动
  if (!event.ctrlKey) {
    return;
  }
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector('div');
el.onwheel = zoom;

Example

通过触摸板双指缩放，或者按住 Ctrl 滚动滚轮

发表于 更新于 分类于

parseInt(string, radix)有2个参数，第一个string是传入的数值，第二个radix是传入数值的进制，参数radix可以忽略，默认为10，各种进制的数转换为 十进制整数（如果不是整数，向下取整）。

radix的取值范围是2~36，如果radix为1或radix>36 ，转换结果将是NaN，如果radix为0或其它值将被忽略，radix默认为 10 。

1
2
3
4
5
6
7
8
9
10
11
parseInt(0, 1);
// NaN

parseInt('z', 36);
// 35

parseInt('Z', 36);
// 35

parseInt('z', 37);
// NaN
阅读全文 »

发表于 更新于 分类于

导出为excel

  • 将原始数据渲染为 table 标签
  • 导出
1
2
3
4
5
6
7
8
var html = document.querySelecor('#export-table').outerHTML;
// 实例化一个 Blob 对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
var blob = new Blob([html], { type: 'application/vnd.ms-excel' });
var a = document.querySelecor('#export-btn');
// 利用 URL.createObjectURL() 方法为a元素生成 blob URL
a.href = URL.createObjectURL(blob);
// 设置文件名，目前只有 Chrome 和 FireFox 支持此属性
a.download = "导出.xls";

发表于 更新于 分类于

在网页上点击一个音视频的链接之后，有两种表现，一种是直接浏览器内播放，一种是下载文件。造成这两种现象的原因是服务端响应头中Content-Disposition的不同。

在HTTP场景中，第一个参数或者是inline（默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示），或者是attachment（意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框，将filename的值预填为下载后的文件名，假如它存在的话）。

1
2
3
Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

发表于 更新于 分类于

以Chrome为例，在网页下载文件的时候，一般情况下都是点击一个链接，然后浏览器底部就会出现一条下载的任务。
但是有些产品的页面为了用户有更完整的体验，会在页面内实现一个实时的进度条。具体做法就是利用XMLHttpRequest对象的onprogress回调来实现。

完整代码如下：

阅读全文 »

发表于 更新于 分类于

最近在复习JS知识，看到继承的时候，回去翻了一下《高级JavaScript程序设计》，顺便整理了一下书中的知识点，方便自己理解。

  • 基于原型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function Parent() {
        this.name = 'tom';
    }

    Parent.prototype.sayName = function() {
        return this.name;
    }

    function Child() {
        this.name = 'jack';
    }

    Child.prototype = new Parent();

    var child = new Child();

    child.sayName() // jack
    • 父类里面的引用类型的属性会被子类的实例修改，影响到其他子类实例
    • 子类实例化的时候无法向父类传递参数
阅读全文 »

发表于 更新于

七种数据类型

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol
  • Object

Object 为引用类型，其余为原始类型。

包装对象

原始类型没有属性和方法。
但是我们经常会这么写：

1
2
3
4
5
var n = 123;
n.toString(); // "123"

var str = '123';
str.split(''); // ["1", "2", "3"]

三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的 “包装对象”。

原始类型的值，可以自动当作包装对象调用，即调用各种包装对象的属性和方法。这时，JavaScript 引擎会自动将原始类型的值转为包装对象实例，在使用后立刻销毁实例。