FlexSlider插件的详细设置参数

Flexslider具有以下特性:

支持滑动和淡入淡出效果。

支持水平、垂直方向滑动。

支持键盘方向键控制。

支持触控滑动。

支持图文混排,支持各种html元素。

自适应屏幕尺寸。

可控制滑动单元个数。

更多选项设置和回调函数。

HTML
在head部分载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件

然后在body中加入以下HTML代码:

使用了.flexslider来包括所有需要滚动的内容元素,然后使用<ul class=”slides”>这个class非常关键,内部的滚动内容都是针对.slides的,然后在<li>内部加入任意  html元素,包括图片和文字。

jQuery

调用Flexslider插件非常简单,使用如下代码:

然后预览网页效果,一个内容切换效果就完成了,当然想要更多个性化设置,flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

Flexslider选项设置

 

js合并单元格

GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)

 

gcj_encrypt中最后的
return {‘lat’ : wgsLat + d.lat,’lon’ : wgsLon + d.lon};
似乎需要替换为
return {‘lat’ : parseFloat(wgsLat) + parseFloat(d.lat), ‘lon’ : parseFloat(wgsLon) + parseFloat(d.lon) };以避免字符串拼接.

gps转换谷歌地图接口:http://ipao.150643.com/aaa.php?a=36.71713&b=119.10078

谷歌定位接口:http://www.google.cn/maps/api/geocode/json?latlng=36.717650500549,119.10667902067&sensor=true

 

 

 

JS实现当前栏目高亮

 

使用highlight.js高亮你的代码

在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮。

于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉。

开始了正式的捣鼓。

在捣鼓之前去别的网站看了看。这里贴上简书的效果:

其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去。于是去看了看document,发现是这样的:

  1. <pre class=“hljs javascript”><code class=“javascript”><span class=“hljs-function”><span class=“hljs-keyword”>functionspan>  <span class=“hljs-title”>getPersonInfospan>(<span class=“hljs-params”>name,age,sexspan>span>{
  2.     <span class=“hljs-built_in”>consolespan>.log(name age sex);
  3. }
  4. <span class=“hljs-comment”>//要是我这样传,name就成了18,age成了王二了。span>
  5. getPersonInfo(<span class=“hljs-string”>\’18\’span>,<span class=“hljs-string”>\’王二\’span>,<span class=“hljs-string”>\’男\’span>);
  6. <span class=“hljs-comment”>//所以可以这样写span>
  7. <span class=“hljs-function”><span class=“hljs-keyword”>functionspan> <span class=“hljs-title”>getPersonInfospan>(<span class=“hljs-params”>argsspan>)span>{
  8.     <span class=“hljs-built_in”>consolespan>.log(args.name args.age args.sex);
  9. }
  10. getPersonInfo({name:<span class=“hljs-string”>\’王二\’span>,age<span class=“hljs-string”>\’18\’span>,sex:<span class=“hljs-string”>\’男\’span>});code>pre>

hljs??绝对就是这货了。于是找到了我们的主角:highlight.js。

highlight.js官网

highlightjs的用法可以直接在官网里look

这里我主要写下自己在使用过程中踩到些什么坑,以及最终的解决办法。

1.心急吃不了热豆腐,万事开头最是难

根据官网的doc,只需要三行代码就可以使用了,非常方便,自己写了个小demo测试了一下。还是很有效果的。

  1. <link href=“http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css” rel=“stylesheet”>
  2. <script src=“http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js”>script>
  3. <script >hljs.initHighlightingOnLoad();script>

这里使用了bootstarp提供的cdn,可以直接通过上面的连接来访问cdn,选择需要的版本。就是那么简单。

这个配色也不是很好看。想要好看的配色可以直接在官网中参考。https://highlightjs.org/static/demo/

2.好用就要应用到实际开发中去

如此简单就可以应用非常的开心,于是应用到了项目中去。

结果遇到了大麻烦….

项目中使用了require.js来加载js,整个应用用的又是angular的框架。

如果直接这样写明显不符合规范,于是将代码变通一下,使用require.js来加载highlight.js。

在require.config中增加highlight的路径配置
  1. ‘highlight’:’http://cdn.bootcss.com/highlight.js/8.0/highlight.min’,
在require的回调函数中执行hljs.initHighlightingOnLoad();
  1. require(loadList, function ($, angular) {
  2.         $(function () {
  3.             angular.bootstrap(document, [‘blogApp’]);
  4.         });
  5.         hljs.initHighlightingOnLoad();
  6.     });
css还是通过link,也可以使用less的@import加载,因为项目用了less,所以我选择了@import
  1. @import “/lib/highlight/styles/tomorrow-night-eighties.css”;

然后在html页面写一个code测试:

  1. <body>
  2.         <div ng-include=“\’template/header.html\'”>div>
  3.         <div>
  4.             <pre>
  5.                 <code class=“lang-javascript”>
  6.         function init(){
  7.             $scope.req.getArticle();
  8.             $(\’pre code\’).each(function(i, block) {
  9.                 hljs.highlightBlock(block);
  10.             });
  11.         }
  12.                 code>
  13.             pre>
  14.         div>
  15.         <div class=“content” ui-view>div>
  16.         <footer>cloud blog by@ermu footer>
  17.     body>

然后打开浏览器一看:

灰常完美。

但是当使用了ng-bind-html,来显示从后台返回的文档时:

代码完全不高亮了。仔细想想,

hljs.initHighlightingOnLoad();不就是onload的时候执行渲染么,也就是说,在此之后改变document都不会在执行了。所以很显然这样并不能高亮从接口取会来的文档的代码。google了一下,有一个叫angular-highlightjs 的东西,尝试了使用,但一直报错,官网上也没有什么说明文档幸好代码托管到了github上面,于是去上面看了看,发现使用说明和官网一样短,issues上也没有人问这个问题,于是我问了一下,希望有人能解答:问题地址我想highlight.js一定有提供对应的方法,在加载完成之后还可以执行一次,但无奈api文档是英文的,看得比较吃力,决定还是想别的法子。最终解决问题的方法是接口返回使用highlight.js编译好的html,因为后端使用的是node,于是在cnode论坛上搜了一下,发现marked已经解决了这个问题。只需要在marked的配置中添加highlight项即可(要先npm install highlight.js):

  1. var marked = require(\’marked\’);
  2. var highlight = require(\’highlight.js\’);
  3. marked.setOptions({
  4.     renderer: new marked.Renderer(),
  5.     gfm: true,
  6.     tables: true,
  7.     breaks: false,
  8.     pedantic: false,
  9.     sanitize: false,
  10.     smartLists: true,
  11.     smartypants: false,
  12.     highlight: function (code) {
  13.     return highlight.highlightAuto(code).value;
  14.   }
  15. });

返回的文档已经添加了对应的class。

  1. <pre>
  2. <code class=“lang-js”>
  3. <span class=“hljs-keyword”>varspan> math = (<span class=“hljs-string”>\’math\’span>) ;  
  4. <span class=“hljs-keyword”>exportspan>.increment = <span class=“hljs-function”><span class=“hljs-keyword”>functionspan>(<span class=“hljs-params”>valspan>span>{  
  5.     <span class=“hljs-keyword”>returnspan> math.add(val,<span class=“hljs-number”>1span>)  
  6. }
  7. code>  
  8. pre>↵  

 

js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中。

js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

详解:

有两种方式使<input type=”checkbox” />中的复选框被选中。

方法一:直接在HTML行间中添加checked属性。   eg:<input type=”checkbox” checked />

方法二:使用javascript使input对象的checked=”true”;  eg: document.getElementsByTagName(‘input’)[0].checked=’true’;

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.     <meta charset=“UTF-8”>
  5.     <title>全选</title>
  6. <script>
  7. window.onload = function(){
  8.     var aInput = document.getElementsByTagName(‘input’);
  9.     var oInput = aInput[0];
  10.     var a = 0;
  11.     var b = 0;
  12.     aInput[0].onclick = function(){
  13.         for (var i = 0; i < aInput.length; i++) {
  14.             if(aInput[0].checked == true){
  15.                 aInput[i].checked = true;
  16.             }else{
  17.                 aInput[i].checked = false;
  18.             }
  19.         }
  20.     };
  21.     for (var i = 1; i < aInput.length; i++) {
  22.         aInput[i].onclick = function(){
  23.             a = 0;
  24.             b = 0;
  25.             for (var i = 1; i < aInput.length; i++) {
  26.                 if (aInput[i].checked == false) {
  27.                     a++;
  28.                 }else {
  29.                     b++;
  30.                 }
  31.             }
  32.             if(a>0){
  33.                 oInput.checked = false;
  34.             }else if(b==aInput.length-1){
  35.                 oInput.checked = true;
  36.             };
  37.         };
  38.     }
  39. };
  40. </script>
  41. </head>
  42. <body>
  43. <p><input type=“checkbox” name=“” />全选</p>
  44. <input type=“checkbox” name=“” /><br />
  45. <input type=“checkbox” name=“” /><br />
  46. <input type=“checkbox” name=“” /><br />
  47. <input type=“checkbox” name=“” /><br />
  48. <input type=“checkbox” name=“” /><br />
  49. <input type=“checkbox” name=“” /><br />
  50. <input type=“checkbox” name=“” /><br />
  51. <input type=“checkbox” name=“” /><br />
  52. <input type=“checkbox” name=“” /><br />
  53. <input type=“checkbox” name=“” /><br />
  54. <input type=“checkbox” name=“” /><br />
  55. </body>
  56. </html>

 

正则验证邮箱

 

JS中的!=、== 、!==、===的用法和区别。

== 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。

        === 和 !== 只有在相同类型下,才会比较其值。

js验证电子邮箱的正则表达式使用

 

target事件委托

 

target 事件属性

Event 对象
定义和用法
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
语法

实例
下面的例子可获得触发事件的元素:

TIY

target event

获得触发事件的元素(IE 浏览器不支持)。

Event 对象

事件对象-抓不到的美女

 

事件对象

 

JS事件函数里面都有一个参数(ev)?

因为ev是事件的参数啊!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包 含着ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。
  所以好多事件函数都是这样写:


mydiv.onclick = function(ev){
if(!ev){ev = window.event;} //这句也可以简写成:ev=window.event||ev;
alert(ev.pageX+”,”+ev.pageY);
}

javascript 中的console.log有什么作用

主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。

相比alert他的优点是:

他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富,你可以在控制台输入:console,然后就可看到:

Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}

它有网页的各种提示。

事件 行为 结构