场景或者游戏切入走马灯播放中奖信息或者一些广告

2017-06-08代码片段

html代码：

1
2
3
4
5
6
7
8
9
<div id="list" class="center"> 
    <div class="awardParent"> 
        <!-- <div>181****2031获得一等奖</div> 
        <div>182****2032获得二等奖</div> 
        <div>183****2033获得三等奖</div> 
        <div>184****2034获得四等奖</div> 
        <div>185****2035获得一等奖</div>  -->
    </div> 
</div>

阅读更多

利用input type=file上传文件

2017-06-06代码片段

最近一个项目用到上传文件 用到了input因为平时项目基本没用到上传文件，期间遇到了点问题，就记录下来
html代码：要注意是通过form表单上传并且在input中是通过属性name来上传的所以，属性name不能缺少

1
2
3
4
<form action="http://gift.jac.com.cn/web/upload/picture" method="post" id="iconForm" name="fileForm" enctype="multipart/form-data">
     <input class="btn btn-default center uploadImageInput" name="file" type="file" id="upFile" />       
     <!-- <input type="button" value="上传" accept="image/*" class="upload center" onclick="checkUser();" /> -->
</form>

阅读更多

meta

2017-05-08代码片段

阅读更多

html5技术

2017-04-17工作生活

1.微信关注。(分享裂变，舆论引导力，涨粉)
2.展会活动。(精准传播，专注效果，社会影响力，高度参与，新媒体营销)
3.线下导流。(精准传播，专注效果，人脉辐射力)
4.商城引流。(精准传播，专注效果，粉丝购买力，建立商户数据库促进二次营销，产品促销)
5.线索收集。(精准传播，专注效果)
6.品牌传播。(精准传播，专注效果，数据挖掘和分析)

阅读更多

网址收藏

2017-04-10网址收藏

腾讯 AlloyTeam https://github.com/AlloyTeam

阅读更多

cocos2d-js 拉伸，圆形

2017-02-20cocos2d-js

main.js代码

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
cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(1334,750,1);
    cc.view.resizeWithBrowserSize(true);
    LoaderScene.preload(gameResources, function () {
            var start = new Start();
            cc.director.runScene(start);
    }, this);
};
cc.game.run("gameCanvas");

window.addEventListener('resize',rotateHandler,false);
function rotateHandler(){
    if(!cc || !cc.director || !cc.director.getRunningScene) return;
    var currentScene = cc.director.getRunningScene();
    var resize = currentScene._resize;
    if(typeof resize === 'function'){
        var rate = 1,deg = 0,
            width = document.documentElement.clientWidth,
            height = document.documentElement.clientHeight,
            tempVal = 0;
        if(width<height){
            rate = width/height;
            tempVal = width;
            width = height;
            height = tempVal;
            deg = 90;
            pageIsturned = true;
        }else{
            pageIsturned = false;
        }
        resize.call(currentScene,deg,rate,{
            width:width,
            height:height
        });
    }
}

阅读更多

js解析html标签模板引擎 待调试

2017-02-11代码片段

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var para = {
    span: {
        div:{
            span: [
                {
                   id: "span1",
                   content: "span1"
                },
                {
                   id: "span2",
                   content: "span2"
                },
                {
                   id: "span3",
                   content: "span3"
                }],
            div: {
                img:[
                      {
                         id: "我就是个img",
                         content:"img"
                      }
                ],
                outer: {
                    id: "第三层的div",
                    content: "div"
                }
            },
            p:[{
                id: "我就是个p",
                content: "p"
            }],
            outer: {
                id: "第二层的div",
                content: "div"
            }},
        span: [{
            id: "span0",
            content: "span0"
        }],
        outer: {
            id: "第一层的div",
            content: "div"
        }
    },
    outer: null
}

var contentHtml = "";
var outterTag = "";
function genereateEngine(para,outter,outterTag,pureHtml){

      for(var i in para){
         if(Object.prototype.toString.call(para[i]) === "[object Object]"){

            outterTag = i;
            if(i === "outer"){
                return pureHtml;
            }

            var unitHtml = genereateEngine(para[i],i,outterTag, "");
            var attr = " ";
             for(var j in para[i].outer){
                 if(j !== "content") {
                     attr += j + "='"+ para[i].outer[j] + "' ";
                 }
             }
             attr = attr.substr(0, attr.length - 1);

            unitHtml =   '<' + outterTag + attr+'>' + unitHtml + para[i].outer.content + '</' + outterTag + '>';
            contentHtml = pureHtml + unitHtml;
            pureHtml = pureHtml + unitHtml;
         }
         else if(Object.prototype.toString.call(para[i]) === "[object Array]"){
             var tempoHtml = newUnitModel(i,para[i]);
             pureHtml += tempoHtml;
         }
         else if(para[i] === null){
             console.log("解析完成");
             //console.log(contentHtml);
             return contentHtml;
         }
         else{
             console.log(i);
             console.log("传入的数据非法，解析失败");
         }
      }
}

// 返回一类元素
function newUnitModel(tag, content){
    var sameCatalog = "";

    for(var i=0; i<content.length; i++) {
        var attr = " ";

        for(var j in content[i]){
            if(j !== "content") {
                attr += j + "='"+ content[i][j] + "' ";
            }
        }
        attr = attr.substr(0, attr.length - 1);
        sameCatalog += ("<" + tag + attr + ">" + content[i].content + "</" + tag + ">");
    }
    return sameCatalog;
}
var result = genereateEngine(para,"","","");
console.log(result)

阅读更多

手机端各种奇葩问题记录

2017-02-09网址收藏

mobileHack

这里收集了许多移动端上遇到的各种坑与相对解决方案

阅读更多

requestAnimationFrame.js

2017-02-09代码片段

问题：在我们自己构建计时器时，每每会发现计时器不准确，但并不是没有解决方法的。
解决方法：用到setInterval()和setTimeout()的地方将如下代码插件引入

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
// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon

// MIT license

if (!Date.now)
    Date.now = function() { return new Date().getTime(); };

(function() {
    'use strict';
    
    var vendors = ['webkit', 'moz'];
    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
        var vp = vendors[i];
        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
                                   || window[vp+'CancelRequestAnimationFrame']);
    }
    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function(callback) {
            var now = Date.now();
            var nextTime = Math.max(lastTime + 16, now);
            return setTimeout(function() { callback(lastTime = nextTime); },
                              nextTime - now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());

阅读更多

cocos2d-js新版本的loading模块

2017-02-09cocos2d-js

下面是cocos2d-js的加载模块
js代码:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
(function() {
    var createStyle = function() {
        return ".Loading{position:absolute;margin:-30px -60px;padding:0;top:50%;left:50%}" 
        + ".Loading ul{margin:0;padding:0;}" 
        + ".Loading span{color:#FFF;text-align:center;display:block;}" 
        + ".Loading li{list-style:none;float:left;border-radius:15px;width:15px;height:15px;background:#FFF;margin:5px 0 0 10px}" 
        + ".Loading li .ball,.Loading li .unball{background-color:#2187e7;background-image:-moz-linear-gradient(90deg,#2187e7 25%,#a0eaff);background-image:-webkit-linear-gradient(90deg,#2187e7 25%,#a0eaff);width:15px;height:15px;border-radius:50px}" 
        + ".Loading li .ball{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:showDot 1s linear forwards;-moz-animation:showDot 1s linear forwards;-webkit-animation:showDot 1s linear forwards}" 
        + ".Loading li .unball{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);animation:hideDot 1s linear forwards;-moz-animation:hideDot 1s linear forwards;-webkit-animation:hideDot 1s linear forwards}" 
        + "@keyframes showDot{0%{transform:scale(0,0)}100%{transform:scale(1,1)}}" 
        + "@-moz-keyframes showDot{0%{-moz-transform:scale(0,0)}100%{-moz-transform:scale(1,1)}}" 
        + "@-webkit-keyframes showDot{0%{-webkit-transform:scale(0,0)}100%{-webkit-transform:scale(1,1)}}" 
        + "@keyframes hideDot{0%{transform:scale(1,1)}100%{transform:scale(0,0)}}" 
        + "@-moz-keyframes hideDot{0%{-moz-transform:scale(1,1)}100%{-moz-transform:scale(0,0)}}" 
        + "@-webkit-keyframes hideDot{0%{-webkit-transform:scale(1,1)}100%{-webkit-transform:scale(0,0)}}"
    };
    var createDom = function(id, num) {
        id = id || "Loading";
        num = num || 5;
        var i, item;
        var div = document.createElement("div");
        div.className = "Loading";
        div.id = id;
        var bar = document.createElement("ul");
        var list = [];
        for (i = 0; i < num; i++) {
            item = document.createElement("li");
            list.push({ball: document.createElement("div"),halo: null});
            item.appendChild(list[list.length - 1].ball);
            bar.appendChild(item)
        }
        var span = document.createElement("span");
        span.innerHTML = "Loading";
        div.appendChild(bar);
        div.appendChild(span);
        document.body.appendChild(div);
        return list
    };
    var startAnimation = function(list, callback) {
        var index = 0;
        var direction = true;
        var time = 300;
        var animation = function() {
            setTimeout(function() {
                if (callback && !callback()) {
                    return
                }
                var item = list[index];
                if (direction) {
                    item.ball.className = "ball"
                } else {
                    item.ball.className = "unball"
                }
                index++;
                if (index >= list.length) {
                    direction = !direction;
                    index = 0;
                    time = 1000
                } else {
                    time = 300
                }
                animation()
            }, time)
        };
        animation()
    };
    (function() {
        var bgColor = document.body.style.background;
        document.body.style.background = "#000";
        var style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = createStyle();
        document.head.appendChild(style);
        var list = createDom();
        startAnimation(list, function() {
            var div = document.getElementById("Loading");
            if (!div) {
                document.body.style.background = bgColor
            }
            return !!div
        })
    })()
})();

阅读更多