php之CURL获取跨域信息

发表于 2016-06-03 |

让给一个客户做一个接口转换，提交的数据以前是在本站的域名下，现在要到客户的后台，这就要涉及到跨域的问题，我本站用的JSONP，但是客户那边后台反馈回来的格式是json的，不是jsonp的，没有用函数包裹，无奈就需要使用php中转跨域，后台不会存在跨域问题，然后又搜了搜，用curl请求服务端数据，代码如下：

$arr = array(
        "createDate" => $_GET['createDate'],
        "name" => $_GET['name'],
        "gender" => $_GET['gender'],     //接到的前端数据
    );
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, '链接');
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $arr);
$result = curl_exec($ch);//向服务器发送数据，返回的是服务端返回的数据
$temp=explode(":",$result);
$num=explode("}",$temp[1]);
$fasong = array("status" => $num[0]);
$json_fasong = json_encode($fasong);
echo $_GET['jsonp_callback'] . "(" . $json_fasong . ")";用函数包裹返回给前端
curl_close($ch);

CSS打字机效果

发表于 2016-06-01 |

运用css中的border闪烁来模拟打字机效果，可用性不是很高，适合内容只有一行的字。

阅读全文 »

阮一峰《javascript标准教程》读书笔记

发表于 2016-05-31 |

最近看到阮大神的《javascript标准教程》这本书，其中的内容非常的基础，于是打算过一遍这本书，其中学到的新技巧也会自己记录更新到这里。
PS：阮大神的博文真的是简单易懂，各种术语翻译成大白话真是方便了我等小白。

阅读全文 »

createJS简单抽奖demo

发表于 2016-05-30 |

最近在学createJS, 就做个抽奖来练手，这个createjs库是google研发的，可以做小游戏引擎和H5小动画，感觉性能不错，语法也容易理解，但是google团队在2015年就停止维护了，不知道为啥，国内网上关于这个的教程挺少的，唯一的一个中文网就是按照官网翻译的，而且翻译的还特别生硬，我最近在墙外发现个日本的网站有这个库的教程，非常不错。也一直苦于不知道做H5小动画用哪个框架比较好，之前看过cocos2D，工程量太大了，相比之下，createJS非常的轻便。
另外还备注个求区间随机数的代码：

function selectfrom (lowValue,highValue){
	var choice=highValue-lowValue+1;
	return Math.floor(Math.random()*choice+lowValue);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>	
	<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
	<style>
	</style>
</head>
<body>
	<canvas id="demo" width="1000px" height="400px"></canvas>
	
  <script>
	var stage = new createjs.Stage("demo");
	var container = new createjs.Container();
	var shape = new createjs.Shape();
	var line = new createjs.Shape();
	var text1 = new createjs.Text("手机", "15px Arial", "black");
	var text2 = new createjs.Text("电脑", "15px Arial", "black");
	var text3 = new createjs.Text("汽车", "15px Arial", "black");
	var text4 = new createjs.Text("美女", "15px Arial", "black");
	var tip = new createjs.Text("点击红色区域抽奖", "30px Arial", "green");
	var result = new createjs.Text("", "30px Arial", "red");
	var jiantou = new createjs.Shape();
	var jiangpin = ["手机", "电脑", "汽车", "美女"];
	var num;
	var canClick = true;
	jiantou.graphics.beginFill("green")
		.moveTo(-5,-5).lineTo(5, -5).lineTo(0, 15);
	jiantou.x = 100;
	jiantou.y = 40;
	text1.x = text2.x = -30;
	text1.y = text4.y = -20;	
	text2.y = text3.y = 20;
	text3.x = text4.x = 10;	
	container.x = 100;
	container.y = 100;	
	tip.x = result.x = 200;
	tip.y = 50;
 	result.y = 80;
	shape.graphics.beginFill("red").drawCircle(0,0,50);
	line.graphics.beginStroke("#000").setStrokeStyle(2);
	line.graphics.moveTo(-50,0).lineTo(50,0).moveTo(0, 50).lineTo(0,-50);
	stage.addChild(container, jiantou, tip, result);
	container.addChild(shape, line, text1, text2, text3, text4);
	createjs.Ticker.setFPS(100);	
	createjs.Ticker.addEventListener("tick", stage);	
	stage.addEventListener("mousedown", getNum);
	function getNum(){
		if(canClick){
			canClick = false;
			initCircle();
			num = Math.floor(Math.random()*3+1);		
			var rotateReg = Math.floor(Math.random()*(num*90-(num-1)*90+1)+(num-1)*90) + 360*3;
			console.log(num,jiangpin[num-1], rotateReg);
			rotateCircle(rotateReg);
		}
	}
	function rotateCircle(rotateReg){
		createjs.Tween.get(container)
			.to({rotation:rotateReg}, 5000, createjs.Ease.quadOut).call(setResult);
	}
	function initCircle(){
		container.rotation = 0;
	}
	function setResult(){
		result.text = "恭喜你得到：" + jiangpin[num-1];
		canClick = true;
	}
  </script>             
</body>
</html>

初识jQuery addBack()

发表于 2016-04-28 |

干了前端大半年，今天第一次在stackoverflow上见到了addBack()方法，刚开始还以为是别人定义的方法，后来一搜才知道是jQuery中定义的方法，找了网上的demo，记录下，分享之，下面上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<style>
	 <style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
.left, .right { width: 45%; float: left;}
.right { margin-left:3%; }
    </style>
	</style>
</head>
<body>
	<div class="left">
  <p><strong>Before <code>addBack()</code></strong></p>
  <div class="before-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
<div class="right">
  <p><strong>After <code>addBack()</code></strong></p>
  <div class="after-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
 
<script>
$("div.left, div.right").find("div, div > p").addClass("border");
 
// First Example
$("div.before-addback").find("p").addClass("background");
 
// Second Example
$("div.after-addback").find("p").addBack().addClass("background");
</script>
</body>
</html>

我理解到的意思就是：$(“div.after-addback”)用A表示，通过A找到的p标签$(“div.after-addback”).find(“p”)用B表示，那么$(“div.after-addback”).find(“p”).addBack()返回的对象就是A+B，如果有错的地方，还请指正。

JS设置超过设置的文本长度显示的内容

发表于 2016-04-26 |

当页面上一行字太多，我们需要把超出长度的内容显示为：“内容…”这种形式。如果是字母符号，2个为一个汉字长度,先是获取内容长度：

function getStrChineseLength(str)
{
	if(typeof(str)=="undefined")return str;
	str = str.replace(/[ ]*$/g,"");
	var w = 0;
	for (var i=0; i<str.length; i++) {
	 var c = str.charCodeAt(i);
	 if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
	   w++;
	 }else {
	   w+=2;
	 }
	} 	
	var length = w % 2 == 0 ? (w/2) : (parseInt(w/2)+1) ;
	return length;
}
getStrChineseLength("都还好滴啊会fds...  fse滴啊会独爱");

限制之后显示的文本内容：

function getStrChineseLen(str,len)
{
	if(typeof(str)=="undefined")return str;
	var w = 0;
	str = str.replace(/[ ]*$/g,"");
	if(getStrChineseLength(str)>len){
		for (var i=0; i<str.length; i++) {
			 var c = str.charCodeAt(i);
			 if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
			   w++;
			 }else {
			   w+=2;
			 }
			 if(parseInt((w+1)/2)>len){
				return str.substring(0,i-1)+"...";
				break;
			 }
		 
		} 
	}
	return str;
};

js时间格式化

发表于 2016-04-26 |

时间格式化

阅读全文 »

JS模拟鼠标点击坐标

发表于 2016-04-26 |

今天一个单子的需求是这样，要模拟鼠标点击坐标，于是百度了下如何实现，看到有个帖子给出了方法，于是实验了下，可以实现，又百度了下关于其的解释，这里写出来记录下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#div1{
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: red;
		color:white;
		text-align: center;
    	line-height: 200px;

	}
	#div2{
		position: absolute;
		left: 300px;
		width: 200px;
		height: 200px;
		background-color: blue;
		color:white;
	    text-align: center;
    	line-height: 200px;

	}

	</style>
</head>
<body>
	<div id="div1">区域1</div>
	<div id="div2">区域2</div>
  <script>
	function imitateClick(oElement, iClientX, iClientY) {  	//定义模拟点击事件
        var oEvent;  
        
        oEvent = document.createEvent("MouseEvents");  
        oEvent.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0,   
                                iClientX, iClientY/*, false, false, false, false, 0, null*/);   
        oElement.dispatchEvent(oEvent);          
    }  
    
    var div1 = document.getElementById('div1');	//区域1
    var div2 = document.getElementById('div2');	//区域2
    div1.onclick = function(event) {  //区域1点击方法	
        alert("点击区域1 (" + event.clientX + "," + event.clientY + ")");  
    }; 
    div2.onclick = function(event) {  //区域2点击方法
        alert("点击区域2 (" + event.clientX + "," + event.clientY + ")");  
    }; 
    
    imitateClick(div1, 100, 100);  //触发模拟点击div1（100,100）的坐标
  </script>
            
       
</body>
</html>

这个网站里介绍了关于他的解释，然后发现这个网站关于web介绍的挺全的，可以作为前端学习的一个工具网站：https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent

判断图片是否存在，不存在就显示默认图片

发表于 2016-04-12 |

利用image对象的onerror事件来判断，如果图片不存在，就更换image对象的src为默认图片的URL。

阅读全文 »

createjs第二课----转换坐标+碰撞事件

发表于 2016-04-11 |

createjs转换坐标+碰撞事件

阅读全文 »