Fork me on GitHub

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H：最小化窗口

Ctrl+B：显示/隐藏侧边栏

Ctrl+”+/-“：放大/缩小界面

文件操作

more >>

展开全文 >>

three.js开发指南 笔记

准备

1
2
3
4
5
6
7
8
9
10
11
12
13
1、准备
-Three.js自身也提供了在线场景编辑器，访问地址为http://threejs.org/editor。使用该编辑器，可以用图形化方法创建Three.js场景。


-Three.js 开发指南示例代码
https://github.com/josdirksen/learning-threejs

-禁用Firefox和Chrome的安全性检测
	如果你使用的是Chrome浏览器，有种方式可以禁用安全性设置，这样就可以在没有Web服务器的情况下查看示例。需要注意的是，应尽量避免用下面的方法访问真正的网站，因为这样做会使浏览器向各种恶意代码敞开大门。用下面的命令可以启动Chrome浏览器同时禁用所有安全特性。
    对于Windows操作系统：chrome.exe --disable-web-security
    对于Linux操作系统：gogle-chrome --disable-web-security
    对于Mac OS操作系统：open -a "Google Chrome" --args --disable-web-security
通过这种方式启动Chrome浏览器就可以直接运行本地文件系统中的示例。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example - Baseic skeleton</title>
    <script src="./js/three.js"></script>
    <script src="./js/TrackballControls.js"></script>
    <!-- 主要用于检测动画运行时的帧数。在动画运行时，该库可以在一个图片中显示画面每秒传输帧数 -->
    <script src="./js/Stats.js"></script>
    <!-- 实时调整动画参数 -->
    <script src="./js/dat.gui.js"></script>
    <script src="./js/util.js"></script>

</head>
<body>
    <div id="webgl-output"></div>

    <script>
        // 
        var camera, renderer, scene;
        function init() {
            
            // 初始化状态栏
            var stats = initStats()
            // 创建一个场景，该场景将包含所有元素，例如对象、相机和灯光。
            scene = new THREE.Scene();

            // 创建一个摄像头，它定义了我们要看的地方
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            // 创建渲染并设置大小
            renderer = new THREE.WebGLRenderer();
            // 将场景的背景颜色设置为接近黑色
            renderer.setClearColor(new THREE.Color(0x000000));
            // 设置场景的大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true

            // 创建了坐标轴（axes）对象并设置轴线的粗细值为20
            var axes = new THREE.AxesHelper(20);
            //  在屏幕上显示轴
            scene.add(axes);

            // 创建平面 宽60 高20
            var planeGeometry = new THREE.PlaneGeometry(60, 20);
            // 创建材质对象来设置平面的外观
            var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            })

            // 将大小和外观组合进Mesh对象并赋值给平面变量
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true
            // 旋转并定位平面
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.set(15, 0, 0);

            // 将平面添加到场景中
            scene.add(plane);

            // 创建一个立方体
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            // 为立方体添加材质
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xFF0000,
            });

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true
            // 定位立方体
            cube.position.set(-4, 3, 0);

            // 将立方体添加到场景中
            scene.add(cube);

            // 创建一个球体
            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
            var sphereMaterial = new THREE.MeshLambertMaterial({
                color: 0x7777ff,
            });

            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.castShadow = true
            // 定位球体
            sphere.position.set(20, 4, 2);

            // 将球体添加到场景中
            scene.add(sphere);

            // 将相机定位并指向场景中心
            camera.position.set(-30, 40, 30);
            // 摄像机将决定哪些东西会被渲染到场景中。在这段代码中，我们使用x、y、z的位置属性来设置摄像机的位置。
            // 为了确保所要渲染的物体能够被摄像机拍摄到，我们使用lookAt方法指向场景的中心，默认状态下摄像机是指向（0，0，0）位置的
            camera.lookAt(scene.position);


            // 为阴影添加聚光灯
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40, 40, -15);
            spotLight.castShadow = true;
            spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
            spotLight.shadow.camera.far = 130;
            spotLight.shadow.camera.near = 40;
            scene.add(spotLight);


            // 添加微妙的环境照明
            var ambientLight = new THREE.AmbientLight(0x353535);
            scene.add(ambientLight);

            // 将渲染器的输出添加到html元素
            document.getElementById("webgl-output").appendChild(renderer.domElement);

            // 渲染场景
            renderer.render(scene, camera);
            //初始化控制器
            var trackballControls = initTrackballControls(camera, renderer)
            var clock = new THREE.Clock()

            // 定义属性，默认值
            var controls = new function() {
                this.rotationSpeed = 0.02 // 立方体旋转速度
                this.bouncingSpeed = 0.02 // 球体弹跳速度
            }
            console.log('controls:', controls, dat);
            // 需要将这个JavaScript对象传递给data.GUI对象，并设置这两个属性的取值范围
            var gui = new dat.GUI()
            gui.add(controls, 'rotationSpeed', 0, 0.5)
            gui.add(controls, 'bouncingSpeed', 0, 0.5)


            renderScene()
            
            // 动画
            var step = 0;
            function renderScene() {
                stats.update()
                // TrackballControl.js库也需要在render函数渲染完一帧后更新
                trackballControls.update(clock.getDelta())

                cube.rotation.x += controls.rotationSpeed
                cube.rotation.y += controls.rotationSpeed
                cube.rotation.z += controls.rotationSpeed
                // cos 函数返回一个数值的余弦值
                step += controls.bouncingSpeed
                sphere.position.x = 20 + 10*(Math.cos(step))
                sphere.position.y = 2 + 10*Math.abs(Math.sin(step))
                
                requestAnimationFrame(renderScene)
                renderer.render(scene, camera);
            }
        }

        window.addEventListener('resize', onResize, false)
        function onResize() {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }
        // 初始化
        init()

       </script>
</body>
</html>

-threejs

-控制器库TrackballControls.js。
	-有了它便可以利用鼠标任意移动摄像机，以便从不同角度观察场景

在代码中，首先定义了场景（scene）、摄像机（camera）和渲染器（renderer）对象。
	1、场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有THREE.Scene对象，那么Three.js就无法渲染任何物体，在第2章还会对THREE.Scene进行详细介绍。示例中所要渲染的方块和球体稍后将会添加到场景对象中。
	
	2、还定义了摄像机对象，摄像机决定了能够在场景看到什么。
		你还会进一步了解摄像机对象能够接受的参数。
    3、我们定义了渲染器对象
		该对象会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子。最后WebGLRenderer将会使用电脑显卡来渲染场景。

-dat.GUI

	在创建类似三维场景和动画时，我们需要尝试很多次才能够确定最合适的速度和颜色。如果有一个GUI（可视化图形界面）允许我们在运行期间修改这些属性，那么事情就会变得很简单。幸运的是，这样的GUI是存在的

three.js基础知识

more >>

展开全文 >>

如何理解Promise

Promise 是一个对象，可以产生一个值或者它会返回一个没有产生值的原因。解决了回调地狱

1
2
3
4
5
1、同步的代码（最高）

2、微任务的异步代码（次高）.then()的优先级高于setTimeOut

3、宏任务的异步代码（最低）

手写一个promise

more >>

展开全文 >>

Audio API

HTML的

more >>

展开全文 >>

文件下载方式

文件下载方式

  1. get方式下载

    window.location.href = URL

    window.open(URL)

  2. post方式

  • form表单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var formObj = document.createElement('form');
              formObj.action = downloadURL;//设置下载路径
              formObj.method = method;//设置请求方式
    		 //formObj.enctype = 'multipart/form-data' 设置Content-Type
              formObj.style.display = 'none';//样式隐藏
              var addFormItem = (formObj,formItemName,formItemValue) => {
                let formItem = document.createElement('input');
                formItem.name = formItemName; // 传参的字段名
                formItem.value = formItemValue; // 传参的值
                formObj.appendChild(formItem)
              }
              addFormItem(formObj,'token',localStorage.getItem('accessToken'))//设置token参数
    		 //设置其他参数
              for(let data_key in data){
                addFormItem(formObj,data_key,data[data_key])
              }
        
              document.body.appendChild(formObj);//加入document
              formObj.submit();//触发submit事件
              document.body.removeChild(formObj);//移除dom
more >>

展开全文 >>

js/jquery获取其他窗口的元素

js/jquery获取其他窗口的元素

1、获取 iframe 中的元素

1
2
3
4
5
//获取iframe页面中的document
let doc = window.frames['Iframe name 属性'].document;
let doc = document.getElementById('Iframe 的id').contentDocument;
//然后就可通过doc对象获取其中的元素了
【注意，需要在 onload事件中使用】

2、获取父级窗口元素

more >>

展开全文 >>

页面元素的全屏

页面元素的全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//1、全屏

function fullScreen(ele){
     const target = document.getElementById(ele);
     if(target.RequestFullScreen){
         target.RequestFullScreen();
      }
      //兼容火狐
      if(target.mozRequestFullScreen){
        target.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(target.webkitRequestFullScreen){
        target.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if(target.msRequestFullscreen){
        target.msRequestFullscreen();
      }
}

//2、退出全屏
function exitFullScreen(){
     const target = document;
     if(target.exitFullScreen){
        target.exitFullscreen()
      }
      //兼容火狐
      if(target.mozCancelFullScreen){
        target.mozCancelFullScreen()
      }
      //兼容谷歌等
      if(target.webkitExitFullscreen){
        target.webkitExitFullscreen()
      }
      //兼容IE
      if(target.msExitFullscreen){
        target.msExitFullscreen()
      }
}
more >>

展开全文 >>

js编码解码

  1. 编码 encodeURI和encodeURIComponent

    它们都是编码URL，唯一区别就是编码的字符范围了：

    encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&*()=:/,;?+’

    encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()’

    所以encodeURIComponent比encodeURI编码的范围更大。

    当你要编码整个URL，使用这个URL，那么用encodeURI。

    当你要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

  2. 解码 decodeURI()和decodeURIComponent()函数

    • decodeURIComponent()定义和用法：decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    • decodeURI()定义和用法：decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码。

3、btoa(),atob()

btoa() 方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。。atob()方法进行解码

4、unescape(),escape()

对字符串进行编解码。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。