表单文本框提示
html代码：1
2
3
4<form name="test" action="" method="post">
<input type="text" required pattern="^\d{11}$" oninput="out(this)" placeholder="请输入11位数字" maxlength="11">
<button type="submit">Check</button>
</form>
html代码：1
2
3
4<form name="test" action="" method="post">
<input type="text" required pattern="^\d{11}$" oninput="out(this)" placeholder="请输入11位数字" maxlength="11">
<button type="submit">Check</button>
</form>
1 | Date.prototype.format = function(template){ |
直接上代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26/*
*@param design Number 设计尺寸 默认640
*@param selectors string dom节点
**/
(function(design, selectors){
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
//缩放比例
var scale = width / design;
var style = '<style type="text/css">\n';
for(var i = 0; i < selectors.length; i++){
style += selectors[i].selector + '{\n'
+ ' -moz-transform-origin: ' + selectors[i].origin + ';\n'
+ ' -webkit-transform-origin: ' + selectors[i].origin + ';\n'
+ ' transform-origin: ' + selectors[i].origin + ';\n'
+ ' -moz-transform: scale(' + scale + ');\n'
+ ' -webkit-transform: scale(' + scale + ');\n'
+ ' transform: scale(' + scale + ');\n'
+ '}\n';
}
style += '</style>\n';
document.open();
document.write(style);
document.close();
})(640, [{"selector": ".popup", "origin": "50% 50% 0"}]);
我们需要通过触摸滑动来操作游戏，所以就需要定义上下左右的手势动作。这就要用到引擎的触摸响应机制，Cocos2d-html5与Cocos2d-x一样，有多点触控 和单点触控。默认情况下是多点触控，要使用单点触控，我们要使用addTargetedDelegate()方法设置代理。
那么如何判断上下左右呢？当然是根据起始触摸点和结束触摸点的坐标变化：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62loadListener : function(){
var listener = cc.EventListener.create({
event : cc.EventListener.TOUCH_ONE_BY_ONE,
target : this,
swallowTouches : true,
onTouchBegan : this.onTouchBegan,
onTouchMoved : this.onTouchMoved,
onTouchEnded : this.onTouchEnded
});
cc.eventManager.addListener(listener, this);
},
onTouchBegan: function (touch, event) {
var self = this.target;
var touchPoint = touch.getLocation();
self.firstX = touchPoint.x;
self.firstY = touchPoint.y;
var locationInNode = self.convertToNodeSpace(touchPoint);
var size = self.getContentSize();
var rect = cc.rect(0, 0, size.width, size.height);
if (!cc.rectContainsPoint(rect, locationInNode)) {
return false;
}
// 触摸处理
// self.onTouchDispose();
return true;
},
onTouchMoved : function (touch, event) {
var self = this.target;
var pos = touch.getLocation();
},
onTouchEnded : function (touch, event) {
var self = this.target;
var touchPoint = touch.getLocation();
var offsetX = self.firstX - touchPoint.x;
var offsetY = self.firstY - touchPoint.y;
self.onTouchDispose(offsetX, offsetY);
// console.log(Math.ceil(self.x), Math.ceil(self.y));
},
onTouchDispose : function(offsetX, offsetY){
if(Math.abs(offsetX) > Math.abs(offsetY)){
if(offsetX > 5){
this.doLeft();
this.doCheckGameOver();
this.setScore(this.score);
}else if(offsetX < -5){
this.doRight();
this.doCheckGameOver();
this.setScore(this.score);
}
}else{
if(offsetY > 5){
this.doDown();
this.doCheckGameOver();
this.setScore(this.score);
}else if(offsetY < -5){
this.doUp();
this.doCheckGameOver();
this.setScore(this.score);
}
}
}
1 | function resourceCallBack(){ |
安装node.js
Node –v 查版本是否成功
安装 express @4 npm install –g express-generator
Express –V 大写
进入工作目录
创建项目 express –e nodejs-demo
进入项目目录 下载依赖库 npm install
启动项目 npm start 或者 node ./bin/www
打开浏览器 localhost：3000
html代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<style>
.dis_none{
display : none;
}
</style>
<body>
<section class='page1'>
<img src="" data-src='./img.png'>
<img src="" data-src='./img.png'>
<img src="" data-src='./img.png'>
</section>
<section class='page2 dis_none'>
<img src="" data-src='./img.png'>
<img src="" data-src='./img.png'>
<img src="" data-src='./img.png'>
</section>
</body>