AdiHuang

Posted 2016-09-27Note

(function($) {

  // funName 是控件名称
  $.fn.funName = function(options) {

    // 设置默认值
    var defaults = {
      choose: 'red',
      out: '#000'
    }

    // 如果options有的话就用options，或者使用default参数
    var options = $.extend(defaults, options);

    // 遍历 return 链式操作
    return this.each(function() { // 这里的this是jQuery对象

      var $this = $(this); // 这里的this是当前循环的dom

      // 例当前dom和同级其它dom分别添加颜色属性
      $this.css('color', options.choose).siblings().css('color', options.out);

    });

  }

})(jQuery);

$(function() {
  // 调用
  $('#demo').funName({'choose':'green', 'out':'#f00'});
});

Posted 2016-08-16Note

fastclick.js插件使用简单说明

资源下载：fastclick.js

为什么存在延迟？

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？因为它想看看你是不是要进行双击（double tap）操作。

引入插件步骤

1.在HTML页面中添加

<script type='application/javascript' src='/path/to/fastclick.js'></script>

注：必须在页面所有Element之前加载脚本文件先实例化fastclick

2.在JS中添加fastclick的身体，推荐以下做法：

if ('addEventListener' in document) {  
  document.addEventListener('DOMContentLoaded', function() {  
    FastClick.attach(document.body);  
  }, false);  
}

如果你使用了JQuery，那么JS引入就可以改用下面的写法：

$(function() {  
  FastClick.attach(document.body);  
});

如果你使用Browserify或者其他CommonJS-style 系统,当你调用require('fastclick')时，FastClick.attach事件会被返回，加载FastClick最简单的方式就是下面的方法了：

var attachFastClick = require('fastclick');  
attachFastClick(document.body);

Posted 2016-07-23Note

php发出http(post,get)请求

web service model很多时候需要使用别的web service来建造自己的web service，这就需要到使用服务器端进行请求http操作，post或者get请求。

/**
 * PHP发送请求获取数据
 * @param  [type] $url       [description]
 * @param  [type] $post_data [description]
 * @return [type] $result    [description]
 */
function send_post($url, $post_data) {
  $postdata = http_build_query($post_data);
  $options = array(
    'http' => array(
    'method' => 'POST',//or GET
    'header' => 'Content-type:application/x-www-form-urlencoded',
    'content' => $postdata,
    'timeout' => 15 * 60 // 超时时间（单位:s）
    )
  );
  $context = stream_context_create($options);
  $result = file_get_contents($url, false, $context);
  return $result;
}

以上是发送请求的函数，具体操作如下：

//使用方法
$post_data = array(
  'username' => 'stclair2201',
  'password' => 'handan'
);
$result=send_post('http://localhost/ServiceProvider/index.php/Index/getService', $post_data);

Posted 2016-07-18Note

mac下 navicat 如何连接本地 mysql（mamp pro 服务器）

打开mac 下的 navicat
建立相应的连接，点击设置连接属性。
点击advanced
use socket ,打勾。输入/Applications/MAMP/tmp/mysql/mysql.sock

Posted 2016-06-20Note

php提取文字并去除html标记，超出省略号表示

function cutArticle($data) {
  $data=strip_tags($data);//去除html标记
  $pattern = "/&[a-zA-Z]+;/";//去除特殊符号
  $data=preg_replace($pattern,'',$data);
  $data = mb_strimwidth($data,0,150,'....','UTF-8');
  return $data;
}

Posted 2016-03-26Note

zepto判断左右滑动

var startPosition, endPosition, deltaX, deltaY, moveLength;
        $(".content").bind('touchstart', function(e){
            var touch = e.touches[0];
            startPosition = {
                x: touch.pageX,
                y: touch.pageY
            }
        }) .bind('touchmove', function(e){
            var touch = e.touches[0];
            endPosition = {
                x: touch.pageX,
                y: touch.pageY
            };

            deltaX = endPosition.x - startPosition.x;
            deltaY = endPosition.y - startPosition.y;
            moveLength = Math.sqrt(Math.pow(Math.abs(deltaX), 2) + Math.pow(Math.abs(deltaY), 2));
        }).bind('touchend', function(e){
            if(deltaX < 0) { // 向左划动
                console.log("向左划动");
            } else if (deltaX > 0) { // 向右划动
                console.log("向右划动");
            }
        });

Posted 2016-03-25Note

jquery天时分秒倒计时

html

<div class="get-rt-time" data-time="2100-11-11 20:20:20"></div>
<div class="get-rt-time" data-time="2015-11-11 20:20:20"></div>

$(function(){
  $.fn.funTime=function(msg){
    var data="";
    var _DOM=null;
    var funDom = function(dom){
      _DOM=dom;
      data=$(dom).attr("data-time");
      data = data.replace(/-/g,"/");
      data = Math.round((new Date(data)).getTime()/1000);
      var domTHML = '<em class="myday"></em><em class="split">天</em>'+
        '<em class="myhour"></em><em class="split">时</em>'+
        '<em class="mymin"></em><em class="split">分</em>'+
        '<em class="mysec"></em><em class="split">秒</em>';
      $(_DOM).append(domTHML);
      funMsg(msg);
    };
    var funMsg = function(msg){
      var	range  	= data-Math.round((new Date()).getTime()/1000),
        secday = 86400, sechour = 3600,
        days 	= parseInt(range/secday),
        hours	= parseInt((range%secday)/sechour),
        min		= parseInt(((range%secday)%sechour)/60),
        sec		= ((range%secday)%sechour)%60;
      if(hours < 10)
        hours = "0" + hours;
      if(min < 10)
        min = "0" + min;
      if(sec < 10)
        sec = "0" + sec;
      if(hours>0||min>0||sec>0){
        $(_DOM).find(".myday").html(days);
        $(_DOM).find(".myhour").html(hours);
        $(_DOM).find(".mymin").html(min);
        $(_DOM).find(".mysec").html(sec);
      }else{
        $(_DOM).hide();
        $(_DOM).after(msg);
      }
    };
    setInterval( funMsg,1000 );

    return this.each(function(){
      var $this = $(this);
      funDom($this);
    });
  }

  //应用
  $(".get-rt-time").each(function(){
    var msg='<div class="mask_end"><span>活动结束</span></div>';
    $(this).funTime(msg);
  });
});

Posted 2016-03-25Note

jquery倒计时页面跳转

$(function(){
  funTimeout(); //应用倒计时
})
//倒计时
var strTime = 10; //设置时间
var strTimeBox = $(".time-box"); //数字容器
function funTimeout() {
  strTimeBox.html(strTime); //显示数字
  strTime--;
  if (strTime == 0) {
    window.opener = null;
    window.location.href = "http://www.baidu.com/";
  }
  else {
    setTimeout("show()", 1000);
  }
}

Posted 2016-03-25Note

checkbox 全选反选

//checkbox全选反选
function funCheckbox(){
  var intListAll, intListChecked;
  $(document).on("click","input[name='all']",function(){
    if($(this).is(":checked")){
      $("input[name='all']").prop("checked",true);
      $("input[name='list']").prop("checked",true);
    }else {
      $("input[name='all']").prop("checked",false);
      $("input[name='list']").prop("checked",false);
    }
  })
  intListAll = $("input[name='list']").length;//获取列表的个数
  $(document).on("click","input[name='list']",function(){
    intListChecked = $("input[name='list']:checked").length;
    if(intListChecked == intListAll){
      $("input[name='all']").prop("checked",true);
    }else {
      $("input[name='all']").prop("checked",false);
    }
  })
}

Posted 2016-03-25Note

监听textarea的值的变化"propertychange"

js示例

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)"></textarea>

jquery示例

function funTestarea(){
  var $testarea = $(".textarea textarea");
  var $b = $(".textarea b");
  $testarea.on("input propertychange",function(){
    var $this = $(this);
    var strNum = $.trim($this.val()).length;
    if(strNum>100){
      $(this).val($(this).val().substr(0,100));
    }else {
      $b.text(strNum);
    }
  });
}

为什么存在延迟？

引入插件步骤

Tags