-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
73 lines (73 loc) · 12.6 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[axios的日常使用]]></title>
<url>%2F2017%2F08%2F21%2Faxios%E7%9A%84%E6%97%A5%E5%B8%B8%E4%BD%BF%E7%94%A8%2F</url>
<content type="text"><![CDATA[axios-demos这是关于axios的一般使用demo的相关依赖 bootstrap.css（为了美观）、vue.min.js和axios.min.js axios的相关使用： axios.get(url[, config]).then(res).catch(error) axios.post(url[, data[, config]]).then(res).catch(error) axios({url,data/params,config}).then(res).catch(error)具体使用可参考源码（也比较简单）axios的全局拦截器（可以进行一些loading处理）：12345678910axios.interceptors.request.use( config => { console.log('request init.') //loading... return config})axios.interceptors.response.use( response => { console.log('response init.') //loading... return response})]]></content>
<categories>
<category>vue.js</category>
<category>javascript</category>
</categories>
<tags>
<tag>vue.js</tag>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[用js写原生ajax]]></title>
<url>%2F2017%2F07%2F11%2F%E7%94%A8js%E5%86%99%E5%8E%9F%E7%94%9Fajax%2F</url>
<content type="text"><![CDATA[新建XMLHttpRequest对象： var request = new XMLHttpRequest(); 状态发生变化时，回调函数： XMLHttpRequest().readyState的五种状态:0 － （未初始化）还没有调用send()方法1 － （载入）已调用send()方法，正在发送请求2 － （载入完成）send()方法执行完成，已经接收到全部响应内容3 － （交互）正在解析响应内容4 － （完成）响应内容解析完成，可以在客户端调用了 html:1<textarea id="response-text"></textarea> js:12345678910111213141516171819202122232425262728293031323334function success(text) { var textarea = document.getElementById('response-text'); textarea.value = text;}function fail(code) { var textarea = document.getElementById('response-text'); textarea.value = 'Error code: ' + code;}request.onreadystatechange = function() { if (request.readyState === 4) { // 成功完成 console.log(request.readyState); // 判断响应结果: if (request.status === 200) { // 成功，通过responseText拿到响应的文本: console.log(request.responseText); return success(request.responseText); } else { // 失败，根据响应码判断失败原因: console.log(request.responseText); return fail(request.status); } } else { // HTTP请求还在继续... console.log(request.readyState); }}// 发送请求:request.open('GET', './data.json');request.send();alert('请求已发送，请等待响应...');]]></content>
<categories>
<category>ajax</category>
</categories>
<tags>
<tag>ajax</tag>
</tags>
</entry>
<entry>
<title><![CDATA[前端面试 --- 基础笔试]]></title>
<url>%2F2017%2F07%2F10%2F%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%20---%E5%9F%BA%E7%A1%80%E7%AC%94%E8%AF%95%2F</url>
<content type="text"><![CDATA[1. css的选择器有哪些，优先级是怎么样的？参考答案：1.通用选择器、2.标签选择器、3.id选择器、4.class选择器、5.组合选择器、6.属性选择器优先级：1.同类型、同级别的选择器，后者由于前者、2.id>类样式>标签>* 2. 用纯css画一个底部为10px三角形。 1234567#trangle-up{ width:0; height:0; border-left:5px solid transparent; //transparent透明的 border-right:5px solid transparent; border-bottom:10px solid red;} 3. 写一个布局，左边为100px，右边的宽度自适应。html:1234<div id="box"> <div class="left"></div> <div class="right"></div></div> js:1234567891011121314#box{ display: flex;}.left{ width:80px; height: 100px; background: red; flex:0 0 100px;}.right{ height: 100px; background: blue; flex: 1;} 4. 用js实现一个千位分割函数，传入一个num，返回一个千位分隔的字符串。（例：1000 — 1,000）1234567891011121314151617181920function thouSplit(num){ var str = String(num); var arr = []; len = str.length/3; if(typeof(num) == 'number'){ for(var i=0; i<len; i++){ item = parseInt(num%1000); num = num/1000; arr.push(item); } arr = arr.reverse(); return arr.join(','); } else{ console.log('this is not a number'); return; }}thouSplit(1234567890); 5. 用js写一个函数，传入参数n，返回n个随机整数，整数的范围是[2,32],随机数不含重复数字。12345678910111213141516171819202122232425//产生随机数function random(n){ var arr = []; var endArr = []; for(var i=0; i<n; i++){ var item = Math.floor(Math.random()*30 + 2); if(isIncluded(item, arr)){ arr.push(item); }else{ i--; } } console.log(arr); return arr;}//判断是否出现重复function isIncluded(element,arr){ for(var i=0; i<arr.length; i++){ if(arr[i] == element){ return false; } } return true;}random(10); 6. 用js写ajax。123456789101112131415161718192021222324252627282930313233343536function success(text) { var textarea = document.getElementById('response-text'); textarea.value = text;}function fail(code) { var textarea = document.getElementById('response-text'); textarea.value = 'Error code: ' + code;}var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象request.onreadystatechange = function () { // 状态发生变化时，函数被回调 if (request.readyState === 4) { // 成功完成 console.log(request.readyState); // 判断响应结果: if (request.status === 200) { // 成功，通过responseText拿到响应的文本: console.log(request.responseText); return success(request.responseText); } else { // 失败，根据响应码判断失败原因: console.log(request.responseText); return fail(request.status); } } else { // HTTP请求还在继续... console.log(request.readyState); }}// 发送请求:request.open('GET', './data.json');request.send();alert('请求已发送，请等待响应...');]]></content>
<categories>
<category>html5</category>
<category>javascript</category>
</categories>
<tags>
<tag>javascript</tag>
<tag>html5</tag>
</tags>
</entry>
<entry>
<title><![CDATA[chapter01---渲染并展示三维对象2]]></title>
<url>%2F2017%2F06%2F26%2Fchapter01-%E6%B8%B2%E6%9F%93%E5%B9%B6%E5%B1%95%E7%A4%BA%E4%B8%89%E7%BB%B4%E5%AF%B9%E8%B1%A12%2F</url>
<content type="text"><![CDATA[使用动画扩展场景引入requestAnimationFrame()方法 其实我们可以通过setInterval()方法指定函数每隔一个间隔调用一次函数，但是setInterval()方法并无法跟显示器的重画同步。这会导致较高的cpu使用率。所以这里我们使用requestAnimationFrame()方法取代setInterval()。1234567891011121314151617var step = 0;function renderScene() { stats.update(); // 转动方块 cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; // 弹跳小球 step += 0.04; sphere.position.x = 20 + ( 10 * (Math.cos(step))); sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step))); requestAnimationFrame(renderScene); renderer.render(scene, camera);}$('#WebGL-output').append(renderer.domElement);renderScene() 这里我们可以使用一个小的辅助库stats.j，这也是Three.js的作者创建的，它的主要效果是可以在一个小图片显示每秒显示的帧数（FPS）。html:123<script type="text/javascript" src="js/stats.js"></script><div id="Stats-output"></div> js:1234567891011var stats = initStats();function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $('#Stats-output').append(stats.domElement); return stats;} 显示每秒帧数： 最后效果如下：]]></content>
<categories>
<category>three.js</category>
</categories>
<tags>
<tag>three.js</tag>
</tags>
</entry>
<entry>
<title><![CDATA[chapter01:渲染并展示三维对象1]]></title>
<url>%2F2017%2F06%2F26%2Fchapter01---%E6%B8%B2%E6%9F%93%E5%B9%B6%E5%B1%95%E7%A4%BA%E4%B8%89%E7%BB%B4%E5%AF%B9%E8%B1%A11%2F</url>
<content type="text"><![CDATA[首先我们要做的效果具体如下： 那我们应该怎么去使用three.js来做出这种效果呢？ 现在我们要创建的一个场景scene,也就是我们日常说到的容器，添加几个物体和相机。 创建基本的页面框架123456789101112131415161718<head> <meta charset="UTF-8"> <title>Example01-01</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/three.js"></script> <style> body{margin: 0;overflow: hidden;} </style></head><body> <div id="WebGL-output"> </div> <script type="text/javascript"> $(function () { }) </script></body> 渲染并展示三维对象html:12<div id="WebGL-output"></div> js:1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<script type="text/javascript"> $(function () { //scene场景 var scene = new THREE.Scene(); //camera var camera = new THREE.PerspectiveCamera(45, window.innerWidth/innerHeight, 0.1, 1000); //randerer var renderer = new THREE.WebGLRenderer(); //设置renderer的背景颜色：0xEEEEEE, 和尺寸 renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth, window.innerHeight); //axes坐标轴 var axes = new THREE.AxisHelper(20); scene.add(axes); //定义平面的尺寸 var planeGeometry = new THREE.PlaneGeometry(60, 20); //创建基本材质 var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc }) //plane平面 var plane = new THREE.Mesh(planeGeometry, planeMaterial); //围绕x轴旋转90deg plane.rotation.x = -0.5*Math.PI; //position定位 plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; scene.add(plane); //cube方块 var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; scene.add(cube); //sphere球体 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x77ffff, wireframe: true }); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; scene.add(sphere); camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); $('#WebGL-output').append(renderer.domElement); renderer.render(scene, camera); })</script> 添加材质、灯光和阴影 在Three.js里添加新材质和灯光非常简单，做法和前面说道的一样。我们首先在场景里添加一个新的光源（在上一段的js添加） 123var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);scene.add(spotLight); 通过SpotLight()方法创建一个光源，并从 spotLight.position.set(-40, 60, -10)的位置照射我们的场景 在前一段的js里，我们使用的是基础材质MeshBasicMaterial()，它不会对光源产生反应，只能以指定的颜色渲染物体，那么我们不得不改变plane、sphere和cube的材质了，这里使用的是MeshLamberMaterial() 渲染效果如下： 现在我们需要添加阴影。生成阴影很简单 12345renderer.shadowMapEnabled = true;renderer.shadowMapEnabled = true;plane.receiveShadow = true;sphere.castShadow = true;spotLight.castShadow = true; 再把小球和方块的网格线去掉 12var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff}); 那就好了：]]></content>
<categories>
<category>three.js</category>
</categories>
<tags>
<tag>three.js</tag>
</tags>
</entry>
<entry>
<title><![CDATA[浅谈hexo部署个人blog]]></title>
<url>%2F2017%2F06%2F25%2F%E6%B5%85%E8%B0%88hexo%E9%83%A8%E7%BD%B2%E4%B8%AA%E4%BA%BAblog%2F</url>
<content type="text"><![CDATA[这个暂时先不写了，有时间再写]]></content>
<categories>
<category>hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
</search>