2017-04-21

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

2017-04-20

上海辅昊实业有限公司面试题

1.常见浏览器及内核；
答案：IE 火狐谷歌 opera(欧朋) safari（苹果）
内核：
（1）Trident——代表作品有Internet Explorer（IE），是微软开发的一种排版引擎，使用Trident渲染引擎的浏览器包括：IE, 遨游, 世界之窗, Avant, 腾讯TT, Netscape 8, NetCaptor, Sleipnir, GOSURF, GreenBrowser, KKman.
（2）Gecko——Gecko内核代表作品Mozilla， FirefoxGecko是一套开放源代码的，以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的著名浏览器有FirefoxGecko，Netscape6至9；
（3）Webkit——代表作品Safari、Chromewebkit 是一个开源项目。它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，主要代表作品有Safari和Google的浏览器Chrome。
（4）Presto——Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
兼容性标识符
IE —— ms
火狐 —— moz
谷歌 —— webkit
opera —— o
safari —— webkit
2.调去typeof返回可能的数据类型；
string numder boolean obect function undefined。
3.px pt rem em 区别；
px：绝对单位；
pt: (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸);
rem:rem（root em，根em）：是CSS3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容，对于不兼容的浏览器写一个绝对单位的声明就可以了。
em:
(a) 因为“em”就是一个相对值，em的值并不是固定的；
(b) em会继续父级元素的字体大小。
(c)计算公式：1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值，这样的情况下“1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”。

2017-04-20

前端面试题

题目：监狱里有10000瓶酒，根据可靠情报其中有一瓶被放了慢性毒药——（喝一口就会在24小时后身亡）两天后市长要用这一批酒招待中央的人，现在如何用最少的死刑犯试出那瓶毒酒。

var arrs = [];
var num1;
var num2;
//生成10000瓶酒
for (var i=0;i<10000;i++) {
    var objs = {};
    objs.jiu=false;
    arrs.push(objs);
}
//投毒
var num = Math.round(Math.random()*10000);
console.log(num)
arrs[num].jiu=true;
//确定范围
for (var i = 0;i <arrs.length;i=i+100){
    for (var j=i;j<i+100;j++){
        if(arrs[j].jiu == true){
            num1=i;
        }
    }
};
num2=num1;
//精确查找
for(num1;num1<num2+100;num1++){
    if(arrs[num1].jiu == true){
            alert(num1);
        }
}

2017-04-20

AJAX（音乐app）

关于AJAX的常见格式（音乐APP路径）

1.原始AJAX跨域问题解决方法，——利用script标签进行跨域调取数据，

    <script>
			function fun(data){
				console.log(data);
				for(var i=0;i<data.subjects.length;i++){
					console.log(data.subjects[i].title);
				}
			}
</script>
<scriptsrc="https://api.douban.com/v2/movie/in_theaters?callback=fun"></script>

2.调取json（本地文件）

var xmlHttp;
	var oDiv=document.querySelector("div");
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.open("GET","student.json",true);
		xmlHttp.send();
		xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
		      	var txt=xmlHttp.responseText;
			var txtjson=JSON.parse(txt);
			console.log(txtjson.constructor==Array); 
			for (var i=0;i<txtjson.length;i++) {
			  	var div1=document.createElement("div");  /*创建元素*/
				div1.innerHTML="姓名："+txtjson[i].name+"<br>性别："+txtjson[i].sex+"<br>年龄："+txtjson[i].age;
				oDiv.appendChild(div1);  /*追加元素*/
						
					}
				}
			}

3.本地调取XML文件

var xmlHttp;
			var oDiv=document.querySelector("div");
			if(window.XMLHttpRequest){
				xmlHttp=new XMLHttpRequest();
			}else{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlHttp.open("GET","xml.xml",true)
			xmlHttp.send();
			xmlHttp.onreadystatechange=function(){
				if(xmlHttp.status==200 && xmlHttp.readyState==4){
					var Tet=xmlHttp.responseXML;
					oDiv.innerHTML=Tet.getElementsByTagName("name")[0].innerHTML+"的性别是"+
					Tet.getElementsByTagName("sex")[0].innerHTML
					+"的年龄是"+Tet.getElementsByTagName("age")[0].innerHTML;
					
				}
			}

JQuery Ajax方法及格式。

$.ajax({
          type:"post",
          url:url, //必选。规定吧请求发送到那个URL。
          data:data,//可选。映射或字符串值。规定连同请求发送到服务器的数据。
          success:success, //可选，请求成功时执行的回调函数。
          datatype:dataType//可选。规定预期的服务器响应的数据类型。默认执行职能判断(xml,json,script 或html)
        });
   srccess(data,textStatus,jqXHR)//请求成功时执行的回调函数。。
    async:false//同步 
   true//异步 默认为异步
    cache:false,//(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面

APIcloud Ajax格式和用法（以官方文档为准）

api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    data: {
        values: {
            name: 'haha'
        },
        files: {
            file: 'fs://a.gif'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});

官网文件路径

技术干货：关于音乐的API；
（亲测有用，但是请勿滥用，

数据请求过多是，回引起官方的注意，所以不要害了大家。
仅仅只是为了学习Ajax，请勿商业用途，版权归原博客所有。
）
最有用的音乐搜索引擎；搜索出来的结果不是很好，但是能用。——网易云音乐。
Tex:要搜索的关键字；
Limit：返回的数据条数；
url：Ajax返回的路径；
type：不可更改否则报错（本人测试的）但是type的参数是有的如下：
歌曲 1
专辑 10
歌手 100
歌单 1000
用户 1002
mv 1004
歌词 1006
主播电台 1009
；

$.ajax({
url: “http://s.music.163.com/search/get/“,
dataType: “jsonp”,
data: {
‘type’: 1,
‘s’: tex,
‘limit’: 20
},
jsonp: “callback”,
cache: false,
success: function(data) {
console.log(data)
}
｝）
2.歌曲信息
1Full request URI: http://music.163.com/api/song/detail/?id=28377211&ids=%5B28377211%5D
URL：
GET http://music.163.com/api/song/detail/
必要参数：
id：歌曲ID
ids：不知道干什么用的，用[]括起来的歌曲ID

3.歌手专辑
1Full request URI: http://music.163.com/api/artist/albums/166009?id=166009&offset=0&total=true&limit=5
URL：
GET http://music.163.com/api/artist/albums/歌手ID
必要参数：
limit：获取的数量(不知道为什么这个必须加上）

4.专辑信息
1Full request URI: http://music.163.com/api/album/2457012?ext=true&id=2457012&offset=0&total=true&limit=10
URL：
GET http://music.163.com/api/album/专辑ID

5.歌单
1Full request URI: http://music.163.com/api/playlist/detail?id=37880978&updateTime=-1
URL：
GET http://music.163.com/api/playlist/detail
必要参数：
id：歌单ID

6.歌词
1Full request URI: http://music.163.com/api/song/lyric?os=pc&id=93920&lv=-1&kv=-1&tv=-1
URL：
GET http://music.163.com/api/song/lyric
必要参数：
id：歌曲ID
lv：值为-1，我猜测应该是判断是否搜索lyric格式
kv：值为-1，这个值貌似并不影响结果，意义不明
tv：值为-1，是否搜索tlyric格式

7.MV
1Full request URI: http://music.163.com/api/mv/detail?id=319104&type=mp4
URL：
GET http://music.163.com/api/mv/detail
必要参数：
id：mvid
type：值为mp4，视频格式，不清楚还有没有别的格式。

** 一系列音乐API （本人测试大部分有用）

$.ajax({
url:"http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=1&offset=0&size=20",
                    dataType: "jsonp",
                    jsonp: "callback",
                    cache: false,
                    success: function(data) {
					console.log(data)
}
)}

1）搜索建议
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.search.catalogSug&format=json&query=%E5%B0%8F%E8%8B%B9%E6%9E%9C
搜索建议：只有歌名
http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.suggestion&query=%E5%B0%8F%E8%8B%B9%E6%9E%9C&format=json&from=ios&version=2.1.1
2）搜索结果
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.search.common&format=json&query=%E5%B0%8F%E8%8B%B9%E6%9E%9C&page_no=1&page_size=30
3）
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.getList&format=jsonℴ=1&offset=0&limit=5
4）新歌榜
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=1&offset=0&size=50
5）热歌榜
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=2&offset=0&size=50 注意这个和上边的区别，type=1
6）Billboard
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=8&offset=0&size=507）Hito中文榜
7）Hito中文榜
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=18&offset=0&size=50
8）KTV热歌榜
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=6&offset=0&size=50
9）电台列表
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.radio.getCategoryList&format=json
10）获取某个电台下的歌曲列表
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.radio.getChannelSong&format=json&pn=0&rn=10&channelname=public_tuijian_ktv
11）获取songid的歌曲信息
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.song.getInfos&format=json&songid=8059247&ts=1408284347323&e=JoN56kTXnnbEpd9MVczkYJCSx%2FE1mkLx%2BPMIkTcOEu4%3D&nw=2&ucf=1&res=1
12）获取登陆用户的喜爱歌曲列表，其中bduss参数用来标示唯一的用户
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.favorite.getFavoriteSong&format=json&pn=0&rn=50&bduss=UlXZ1dWbm9icDBrMm13aFcwZ282ejlTM1dyS1NEd2JPWXpQcDgyT0w0Vn5SUmhVQVFBQUFBJCQAAAAAAAAAAAEAAAB0L~cOeHl3MDQzNzM1AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH-48FN~uPBTd
13)歌手列表
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.get72HotArtist&format=jsonℴ=1&offset=0&limit=50
14）歌手简介，tinguid为歌手id
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.getinfo&format=json&tinguid=7994
15）歌手歌曲列表，tinguid为歌手id
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.getSongList&format=jsonℴ=2&tinguid=7994&offset=0&limits=50
16）新碟上架
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.plaza.getRecommendAlbum&format=json&offset=0&limit=50
17）专辑信息
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.album.getAlbumInfo&format=json&album_id=122314357
18）新歌速递
http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.plaza.getNewSongs&format=json&limit=50

2017-02-09

地图插件代码——腾讯地图

腾讯地图在网页上的应用

过程十分简就是把div放在相应的地方设置相应的id就行了。
代码如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>腾讯地图</title>  
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=AMZBZ-NBWAR-SCKWS-WSFQU-TZ4R6-YWBEV"></script>  
<script>  
    var init = function() {  
        var map_center = new soso.maps.LatLng(39.90927537429095,116.39838695526123);  
        var map = new soso.maps.Map(document.getElementById("container"), {  
            center : map_center,  
            zoom : 14,  
            panControl : true,  
            zoomControl : true,  
            zoomControlOptions : {  
                style : soso.maps.ZoomControlStyle.SMALL  
            }  
        });  
  
        var marker = new soso.maps.Marker( {  
            map : map,  
            position : map_center  
        });  
  
        var infoWin = new soso.maps.InfoWindow( {  
            map : map  
        });  
  
        soso.maps.event.addListener(  
                marker,  
                'click',  
                function(evt) {  
                    infoWin.open();  
                    infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">这里是天安门</div>');  
                    infoWin.setPosition(evt.latLng);  
                });  
          
     }  
</script>  
    </head>  
    <body onload="init()">  
        <div style="width: 603px; height: 300px; padding-top: 80px; padding-left: 80px;" id="container"></div>  
    </body>  
</html>

效果如下：
最终效果

2017-02-08

关于hexo上添加评论功能

Hexo是使用node.js技术开发的一个纯静态博客系统，Hexo默认使用的评论插件是Disqus，Disqus上用的全是”非死不可“或者推特等国外的社交网站，不符合我天朝国情特此推出本教程。使用步骤如下：

更改_config.yml文件（config中文意思为配置）
这里我们运用一个插件叫“多说”（是一个专业的评论插件）在_config.yml中添加多说的配置：
1
duoshuo_shortname: 你站点的short_name
我的博客地址是https://webapple.github.io/我博客地址的short_name（二级域名）就是webapple.github.io.git（我在这里就转了好久才弄好，我把short_name当成了多说的网址，根据hexo各种框架的差异，此处有可能是“多说”注册时的二级域名，本人建议注册“多说时将二级域名设置为和博客主页相同的二级域名）
我用HBuilder改配置的图片

修改themes\landscape\layout_partial\article.ejs模板
把

<% if (!index && post.comments && config.disqus_shortname){ %>
 <section id="comments">
   <div id="disqus_thread">
     <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
   </div>
 </section>
 <% } %>

改为

<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

3.然后提交到github上就行了(在主页上没有显示，在博客的单页面上显示）。

$ hexo g

$ hexo d

最终效果

2017-01-15

一个前端小白的技术分享（JS最初级）。

前言：只适合新手观看（高手的话也可以批评指正QQ：2205553696）

正文

前端自我感觉分为三个部分1.html 2.css 3.JS.其中最慢的就要算JS了（也谈不上难，就是有点逻辑而已）

html部分

以后补充。

js鼠标移入移出部分。
鼠标移入事件onmouseover=””，用法就不说了，不会了去查w3c。
值得注意的是 onmouseover=””这个事件在子元素上也会触发，这个东西就很操蛋了，
解决方法改用onmouseenter,就可以了。事件效果和 onmouseover=””一样，就是不会再子元素上出发了。
同理 onmouseout=””鼠标移出，用onmouseleave代替。
变量类型。
a) parseInt(); 从字符串中提取数字；
b) NaN; not a number（不是数字类型）;
c) NaN 和任何数计算都是NaN;
d) NaN 不与任何值相等，包括它自身；要比较需要使用方法isNaN();
e) 显性类型转换：
i. parseInt()/ parseFloat();
ii. NaN 的意义和检测：

意义：not a number;
检测：isNaN();
f) 隐式类型转换：
i. “==” ,就是隐式转换，它会先把两边的东西转成一样的类型，然后再进行比较；
ii. 减法、乘法、除法也会进行自发的隐式转换；只有加号不可以；

数组排序。
a) 数组的length属性可以赋值；可以用length=0清空数组；

b) 添加与删除元素：

 i.      push() 和 pop() – 尾部添、删

ii.      unshift() 和 shift() – 头部添、删

c) 排序：

i.      sort():让sort排序数字，使用比较函数;

d) 转换类：

   i.      concat() : 连接两个数组，生成一个新数组；

  ii.      join(分隔符): 用分隔符组合数组元素，生成一个字符串；

iii.      split(分隔符)： 和join相反，把字符串切成数组；

e) 万能方法splice():

   i.      参数：splice(开始位置，长度，新元素，新元素...)；

  ii.      作用：先从开始位置删除一定长度的元素，再在指定位置开始插入一些元素；

iii.      可以用于从中间插入、中间删除、以及任意位置替换；

Quick Start

Create a new post

Run server

Generate static files

Deploy to remote sites

关于AJAX的常见格式（音乐APP路径）

腾讯地图在网页上的应用

前言：只适合新手观看（高手的话也可以批评指正QQ：2205553696）

正文

前端自我感觉分为三个部分1.html 2.css 3.JS.其中最慢的就要算JS了（也谈不上难，就是有点逻辑而已）

html部分

以后补充。

js鼠标移入移出部分。

值得注意的是 onmouseover=””这个事件在子元素上也会触发，这个东西就很操蛋了，

同理 onmouseout=””鼠标移出，用onmouseleave代替。

变量类型。

数组排序。

a) 数组的length属性可以赋值；可以用length=0清空数组；