create.js小练习1----图层旋转+鼠标事件

发表于 2016-04-11 |

最近总想学点H5小动画之类的框架，在网上搜了很多框架都不知道该从何下手，最后锁定cocos2d-JS和create.js。这两个都看了一下入门知识，前者适合中大型游戏开发，后者适合小型游戏和动画，但是createJS已经停止维护了，但是觉得create还简单些，拿来动画入门还是不错的，遂做点练习来入门，等练熟之后再往高处走，揣测着H5应用的流行趋势，希望自己的选择是正确的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
	
</head>
<body>
	
	<canvas id="demoCanvas" width="500" height="300"></canvas>

	<script>
	var stage, circle; 
	stage = new createjs.Stage("demoCanvas");
	circle = stage.addChild(new createjs.Container());
	circle.x = circle.y = 150;

	for (var i = 0; i < 25; i++) {
		var shape = new createjs.Shape();
		shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360, 100, 50)).drawCircle(0,0,30);
		shape.x = Math.random()*300 - 150;
		shape.y = Math.random()*300 - 150;
		circle.addChild(shape);
	}
	createjs.Ticker.on("tick",tick);
	function tick(){
		circle.rotation += 3;
		var l = circle.getNumChildren();
		for (var i = 0 ;i<l;i++){
			var child = circle.getChildAt(i);
			child.alpha = 0.1;
			var pt = child.globalToLocal(stage.mouseX, stage.mouseY);
			if(child.hitTest(pt.x, pt.y)){
				child.alpha = 1;
			}
		}
		stage.update();
	}
	</script>

</body>
</html>

浅谈jquery关于select框的取值和赋值

发表于 2015-12-18 |

jQuery("#select_id").change(function(){}); // 1.为Select添加事件，当选择其中一项时触发     
var checkValue = jQuery("#select_id").val(); // 2.获取Select选中项的Value  
var checkText = jQuery("#select_id :selected").text(); // 3.获取Select选中项的Text   
var checkIndex = jQuery("#select_id").attr("selectedIndex");// 4.获取Select选中项的索引值,
或者：jQuery("#select_id").get(0).selectedIndex;  
var maxIndex = jQuery("#select_id :last").attr("index");  // 5.获取Select最大的索引值,
或者：jQuery("#select_id :last").get(0).index;


jQuery("#select_id").get(0).selectedIndex = 1; // 1.设置Select索引值为1的项选中  
jQuery("#select_id").val(4);  // 2.设置Select的Value值为4的项选中
$("#select_id").attr("value","Normal“);
$("#select_id").get(0).value = value;
//根据select的显示值来为select设值
var count=$("#select_id").get(0).options.length;
for(var i=0;i<count;i++){
if($("#select_id").get(0).options[i].text == text)  
{
$("#select_id").get(0).options[i].selected = true;          
break;  
}  
}


jQuery("#select_id").append("<option value='新增'>新增option</option>"); // 1.为Select追加一个Option(下拉项)   
jQuery("#select_id").prepend("<option value='请选择'>请选择</option>"); // 2.为Select插入一个Option(第一个位置)  
jQuery("#select_id").get(0).remove(1);  // 3.删除Select中索引值为1的Option(第二个)  
jQuery("#select_id :last").remove();  // 4.删除Select中索引值最大Option(最后一个)   
jQuery("#select_id [value='3']").remove(); // 5.删除Select中Value='3'的Option   
jQuery("#select_id").empty();   // 6.清空下拉列表

$(function(){})里面不能声明定义函数

发表于 2015-12-18 |

关于JS变量作用域的使用

阅读全文 »

jQuery获取和设置disabled属性、背景图片路径

发表于 2015-12-11 |

之前对于这个独特的disabled属性获取和设置很混乱，今天项目中用到了，用attr不能实现，于是多次试验得出：
获取disabled属性用prop

1	$("#basic_key").prop("disabled")

以上会返回true或false.

然后设置disabled是attr，重点是后面的一个参数不加引号：

1 2	$("#basic_key").attr("disabled",'false') //false加引号是错误的~！ $("#basic_key").attr("disabled",false) //不加引号才正确

另外，背景图片路径的获取是：

1	$(".mcht_tdcode").css("background-image")

设置图片路径是：

1	$(".mcht_tdcode").css("background-image","url(template/images/p9.jpg)");

background-attachment:fixed应用

发表于 2015-12-07 |

设置为fixed属性，背景相对于屏幕窗口固定，然后如果有一张全屏的图片，再来一张全屏的图片，就可以看到与平时滚动屏幕不同的切换图片。代码
CSS部分：

html, body,.content{
	height: 100%;
}
h2, body { margin: 0;}
.fixed-bg { 
	position: relative;
	background-size: cover;
	background-attachment: fixed;
	height: 100%;
	background-position: center center;
}
.bg-1 { 
	 background-image: url("images/cd-background-1.jpg");
}
.container { 
	padding: 23% 1%;
   	background-color: #C7ABAB; 
   	height: 100%;
}
.bg-2 { 
	background-image: url("images/cd-background-2.jpg");
}

HTML部分：

<div class="main content">
	<div class="fixed-bg bg-1">
		<h2>此处是图片</h2>
	</div>
	<div class="fixed-bg bg-2">
		<h2>又一张图片</h2>
	</div>
</div>

由此可以想到：如果图片之间加上内容，就会是比较新鲜的滚动方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	html, body,.content{
		height: 100%;
	}
	h2, body { margin: 0;}
	.fixed-bg { 
		position: relative;
		background-size: cover;
		background-attachment: fixed;
		height: 100%;
		 background-position: center center;
	}
	.bg-1 { 
		 background-image: url("images/cd-background-1.jpg");
	}
	.container { padding: 23% 1%;
   	 	background-color: #C7ABAB; 
   	 	height: 100%;}
	.bg-2 { 
		 background-image: url("images/cd-background-2.jpg");
	}

	</style>
</head>
<body>
	<div class="main content">
		<div class="fixed-bg bg-1">
			<h2>此处是图片</h2>
		</div>
		<div class="scrolling-bg"> 
			<div class="container">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>
			</div>
		</div>
		<div class="fixed-bg bg-2">
			<h2>又一张图片</h2>
		</div>
		<div class="scrolling-bg"> 
			<div class="container">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>
			</div>
		</div>
	</div>
</body>
</html>

Enter键提交表单

发表于 2015-12-03 |

input type=”submit”在360浏览器上不能提交用了这个

1	<input type="button" class="btn btn_green btn_active btn_block btn_lg reg" value="注册">

$(".input").keydown(function(e){	//class为input的最后一个
	var e = e || event,	//event是兼容IE浏览器
	 keycode = e.which || e.keyCode;		//e.keyCode是兼容IE浏览器，e.which是获取按键编码
	 if (keycode==13) {
	 $(".reg").trigger("click");	如果input上设置了点击事件，就要注释掉这句，不然会重复提交两次
	
	 }
});

简易表单验证

发表于 2015-12-03 |

本来是用的其他网站扒下来的验证，结果因为JS压缩问题无法实现，于是就在他的基础上，自己做了简易验证，代码来一波:

1
2

<input type="text" id="login_merchant_id" class="input input_white" name="key_uni" placeholder="请输入商户ID"  autocomplete="off"  onkeypress="return handleEnter(this, event)">
<span id="login_merchant_id_span" class="input_tips">请输入6位的商户ID</span>

span是提示信息，html里就给他写好，然后给个.input_tips{display: none;}
然后下面blur触发验证

$("#login_merchant_id").blur(function(e){
	var val = $("#login_merchant_id").val();
	if(val.length !=6){
		$("#login_merchant_id").next().css("display","block");
	}
	else{
		$("#login_merchant_id").next().css("display","none");
	}
});

搞定

今天遇到的i++问题之记录

发表于 2015-12-02 |

今天逛贴吧看到的，与自己预想的不同，于是在群里求解后方得知答案，遂记录之。代码来袭。

function a(){
    var i=1;
    i++;
    alert(i); //2
}
var c = a();
c();

function a(){
    var i=1;
    alert(i++); //1
}
var c = a();
c();

之所以是1是因为alert(i++)这句的过程是先取后加，取得是加之前的值。

function a(){
    var i=1;
    alert(i++); //1
    alert(i);   //2	加了之后就是2了
}
var c = a();
c();

所以alert(i++)这句话的过程是这样的第一步：继承自上一句i=1 。第二步：弹！这时弹得值为1 第三步：i=i+1 这时的i就是2了。所以下面那一句的alert(i)也就是2了

AngularJS ng-app的自动加载

发表于 2015-09-30 |

今天练习AngularJS遇到了这个问题，ng-app=“值”，便无法实现，遂百度找到了答案，共享之。。

ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=””来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。如果想要实现自动加载，那么就不能让ng-app带有属性值。

<html>
        <body ng-app>
                <div>div1:{{1+3*2}}</div>
                <script src="angular.js"></script>
        </body>
</html>

1、不含ng-app，无法自动加载，这个比较好理解。

<html>
        <body>
                <div>div1:{{1+3*2}}</div>
                <script src="angular.js"></script>
        </body>
</html>

2、含有2个ng-app，那么只会自动加载第一个，这个也好理解。

<html>
        <body>
                <div ng-app>div1:{{1+3*2}}</div>
                <div ng-app>div2:{{1+3*2}}</div>
                <script src="angular.js"></script>
        </body>
</html>

3、ng-app带有属性，不能自动加载

<html>
        <body>
                <div ng-app="app1">div1:{{1+3*2}}</div>
                <script src="angular.js"></script>
        </body>
</html>

4、不带属性的在前，带属性的在后。ng-app标记的模块可以自动加载

<html>
        <body>
                <div ng-app>div1:{{1+3*2}}</div>
                <div ng-app="app1">div1:{{1+3*2}}</div>
                <script src="angular.js"></script>
        </body>
</html>

5、带属性的在前，不带属性的在后。ng-app标记的模块不能自动加载

<html>
        <body>
                <div ng-app="app1">div1:{{1+3*2}}</div>
                <div ng-app>div1:{{1+3*2}}</div>
                <script src="angular.js"></script>
        </body>
</html>