├── readme.md
├── 1.jpg
├── 1.png
├── 2.png
├── 3.png
├── 4.png
├── 5.png
├── up.png
├── 5_1.png
├── down.png
├── left.png
├── taild.png
├── taill.png
├── tailr.png
├── tailu.png
├── demo1_requirejs.html
├── Snake.html
└── js
└── tools.js
/readme.md:
--------------------------------------------------------------------------------
1 | 版本2.0
2 |
3 | 修改地图bug
--------------------------------------------------------------------------------
/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/1.jpg
--------------------------------------------------------------------------------
/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/1.png
--------------------------------------------------------------------------------
/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/2.png
--------------------------------------------------------------------------------
/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/3.png
--------------------------------------------------------------------------------
/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/4.png
--------------------------------------------------------------------------------
/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/5.png
--------------------------------------------------------------------------------
/up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/up.png
--------------------------------------------------------------------------------
/5_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/5_1.png
--------------------------------------------------------------------------------
/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/down.png
--------------------------------------------------------------------------------
/left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/left.png
--------------------------------------------------------------------------------
/taild.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/taild.png
--------------------------------------------------------------------------------
/taill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/taill.png
--------------------------------------------------------------------------------
/tailr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/tailr.png
--------------------------------------------------------------------------------
/tailu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhoujie12345/h5_test/HEAD/tailu.png
--------------------------------------------------------------------------------
/demo1_requirejs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Snake.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 贪吃蛇
6 |
21 |
22 |
23 |
24 | 得分：
25 |
26 |
27 |
28 |
398 |
399 |
--------------------------------------------------------------------------------
/js/tools.js:
--------------------------------------------------------------------------------
1 | // 根据传递的参数选择器内容，返回查找到的页面DOM元素
2 | // 参数：
3 | // selector:选择器，可取以下值
4 | // #id
5 | // .className
6 | // tagName
7 | // context:查找元素的上下文，即 DOM 元素对象，默认为 document
8 | function $(selector, context){
9 | context = context || document;
10 | if (selector.indexOf("#") === 0) // 根据id查找元素
11 | return document.getElementById(selector.slice(1));
12 | if (selector.indexOf(".") === 0) // 根据类名查找元素
13 | return getByClassName(selector.slice(1), context);
14 | // return context.getElementsByClassName(selector.slice(1));
15 | return context.getElementsByTagName(selector); // 根据元素名查找
16 | }
17 |
18 | // 解决 getElementsByClassName 兼容问题
19 | function getByClassName(className, context) {
20 | context = context || document;
21 | if (document.getElementsByClassName) // 浏览器支持使用 getElementsByClassName
22 | return context.getElementsByClassName(className);
23 |
24 | /* 不支持使用 getElementsByClassName */
25 | // 保存查找到的元素的数组
26 | var result = [];
27 | // 查找 context 后代的所有元素
28 | var allTags = context.getElementsByTagName("*");
29 | // 遍历所有的元素
30 | for(var i = 0, len = allTags.length; i < len; i++) {
31 | // 获取当前遍历元素使用的所有 class 类名
32 | var classNames = allTags[i].className.split(" ");
33 | // 遍历当前元素的所有类名，和待查找的类名比较
34 | for (var j = 0, l = classNames.length; j < l; j++) {
35 | if (classNames[j] == className) { // 当前所在遍历的元素是要查找出来的其中一个
36 | result.push(allTags[i]);
37 | break;
38 | }
39 | }
40 | }
41 | // 返回查找结果
42 | return result;
43 | }
44 |
45 | // 返回指定element元素的CSS属性attr的属性值
46 | // css($("#inner"), "top", "50px");
47 | // css($("#inner"), "left", "200px");
48 | // css($("#inner"), {top:"50px", left:"200px"});
49 | function css(element, attr, value) {
50 | if (typeof attr === "object") { // 设置element元素各CSS属性值
51 | for (var prop in attr) {
52 | element.style[prop] = attr[prop];
53 | }
54 | } else if (typeof attr === "string" && typeof value !== "undefined"){ // 设置element元素attr对应属性的属性值
55 | element.style[attr] = value;
56 | } else { // 获取element元素CSS属性值
57 | return window.getComputedStyle
58 | ? getComputedStyle(element)[attr]
59 | : element.currentStyle[attr];
60 | }
61 | }
62 |
63 | // 获取指定元素在文档中的绝对定位，返回定位坐标对象
64 | // 该对象有 top 与 left 两个属性
65 | // 也可用于设置元素在文档中的绝对定位，传递定位坐标对象
66 | // element: 指定DOM元素
67 | // coordinates:设置的定位坐标对象，包含top与left两个属性
68 | function offset(element, coordinates) {
69 | var _top = 0,
70 | _left = 0,
71 | current = typeof coordinates === "undefined"
72 | ? element
73 | : element.offsetParent; // 待求解文档绝对定位元素
74 | // 循环求解元素在文档中绝对定位
75 | while (current !== null) {
76 | _top += current.offsetTop;
77 | _left += current.offsetLeft;
78 | current = current.offsetParent;
79 | }
80 |
81 | if (typeof coordinates === "undefined") // 获取元素在文档中绝对定位
82 | return {
83 | top:_top,
84 | left:_left
85 | };
86 | else // 设置元素在文档中绝对定位
87 | css(element, {
88 | top:coordinates.top - _top+"px",
89 | left:coordinates.left - _left+"px"
90 | });
91 | }
92 |
93 | // 获取指定元素在其有定位父元素中绝对定位位置
94 | function position(element){
95 | return {
96 | top : element.offsetTop,
97 | left : element.offsetLeft
98 | };
99 | }
100 |
101 | // 注册指定元素的事件监听
102 | // 事件冒泡
103 | /*function on(element, type, callback) {
104 | if (element.addEventListener) { // 支持使用 addEventListener方法
105 | // if (type.slice(0, 2) === "on")
106 | if (type.indexOf("on") === 0)
107 | type = type.slice(2);
108 | element.addEventListener(type, callback, false);
109 | } else { // 不支持，则使用 attachEvent
110 | if (type.indexOf("on") !== 0)
111 | type = "on" + type;
112 | element.attachEvent(type, callback);
113 | }
114 | }*/
115 |
116 | /* 简易事件委派版本 */
117 | // on($("#box"), "click", ".test", function(){
118 | // console.log(this);
119 | // })
120 | function on(element, type, selector, callback) {
121 | var _callback;
122 | if (typeof selector === "string") {
123 | _callback = function(e){
124 | e = e || event;
125 | var src = e.target || e.srcElement;
126 | console.log("target:" , src);
127 | var __callback = callback.bind(src);
128 | if (selector.indexOf(".") === 0) {
129 | var classNames = src.className.split(" ");
130 | var index = inArray(selector.slice(1), classNames);
131 | if (index !== -1) {
132 | __callback(e);
133 | }
134 | } else if (src.nodeName.toLowerCase() === selector.toLowerCase()) {
135 | __callback(e);
136 | }
137 | };
138 | } else if (typeof selector === "function") {
139 | _callback = selector;
140 | }
141 |
142 | if (element.addEventListener) { // 支持使用 addEventListener方法
143 | if (type.indexOf("on") === 0)
144 | type = type.slice(2);
145 | element.addEventListener(type, _callback, false);
146 | } else { // 不支持，则使用 attachEvent
147 | if (type.indexOf("on") !== 0)
148 | type = "on" + type;
149 | element.attachEvent(type, _callback);
150 | }
151 | }
152 |
153 | // 解除指定元素绑定的事件监听
154 | function off(element, type, callback) {
155 | if (element.removeEventListener) { // 支持使用 removeEventListener方法
156 | if (type.indexOf("on") === 0)
157 | type = type.slice(2);
158 | element.removeEventListener(type, callback, false);
159 | }else { // 不支持，则使用 detachEvent
160 | if (type.indexOf("on") !== 0)
161 | type = "on" + type;
162 | element.detachEvent(type, callback);
163 | }
164 | }
165 |
166 | // 保存/读取cookie信息
167 | // key: cookie名称
168 | // value: cookie值，可选，不为 undefined 则表示设置 cookie
169 | // options: 可选，保存 cookie 时的配置参数
170 | // options = {
171 | // expires:7, // 失效时间，如果是数字，则表示指定天数后失效，可以取数字或 Date 对象
172 | // path:"/", // 路径
173 | // domain:"", // 域名
174 | // secure:true // 是否安全链接
175 | // }
176 | function cookie(key, value, options) {
177 | if (typeof value === "undefined"){ // 读取cookie
178 | // 将所有 cookie 保存到数组中，每个元素的格式如：key=value
179 | var cookies = document.cookie.split("; ");
180 | // 遍历数组中的每个 cookie 字符串结构
181 | for (var i = 0, len = cookies.length; i < len; i++) {
182 | // 以 = 号分隔字符串，返回数组中第一个元素为 cookie名，第二个元素为 cookie 值
183 | var cookie = cookies[i].split("=");
184 | // 判断当前cookie名与待查找的cookie名称是否一致
185 | if (key === decodeURIComponent(cookie.shift()))
186 | return decodeURIComponent(cookie.join("="));
187 | }
188 |
189 | // 找不到 cookie，则返回 null
190 | return null;
191 | }
192 |
193 | // 保存 cookie
194 | var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);
195 | // 是否有其它设置，比如失效时间
196 | options = options || {};
197 | // 失效时间
198 | if (typeof options.expires !== "undefined") {
199 | if (typeof options.expires === "number") { // 失效时间是数字时间
200 | var date = new Date()
201 | date.setDate(date.getDate() + options.expires);
202 | cookie += ";expires=" + date.toUTCString();
203 | } else if (typeof options.expires === "object") {
204 | cookie += ";expires=" + options.expires.toUTCString();
205 | }
206 | }
207 |
208 | // 路径
209 | if (options.path)
210 | cookie += ";path=" + options.path;
211 | // 域名
212 | if (options.domain)
213 | cookie += ";domain=" + options.domain;
214 | // 安全链接
215 | if (options.secure)
216 | cookie += ";secure";
217 |
218 | // 保存 cookie
219 | document.cookie = cookie;
220 | }
221 |
222 | // 删除 cookie
223 | function removeCookie(key, options) {
224 | options = options || {};
225 | // 删除时，将 cookie 失效时间设置为当前时间之前某一刻
226 | options.expires = -1;
227 | // 覆盖保存 cookie 即实现删除
228 | cookie(key, "", options);
229 | }
230 |
231 | // 查找指定value在数组array中的下标
232 | function inArray(value, array) {
233 | if (Array.prototype.indexOf) // 支持 indexOf 方法使用
234 | return array.indexOf(value);
235 |
236 | for (var i = 0, len = array.length; i < len; i++) {
237 | if (value === array[i])
238 | return i;
239 | }
240 |
241 | return -1;
242 | }
243 |
244 | // 去掉字符串前后空白
245 | function trim(str) {
246 | if (String.prototype.trim) // 支持使用字符串对象的 trim 方法
247 | return str.trim();
248 |
249 | var reg = /^\s+|\s+$/g;
250 | return str.replace(reg, "");
251 | }
252 |
253 | // 运动框架
254 | // 参数说明：
255 | // element:
256 | // options:
257 | // speed:
258 | // fn: 运动结束后要执行的函数，可选
259 | function animate(element, options, speed, fn) {
260 | // 先取消在 element 元素上之前已有的运动动画计时器
261 | clearInterval(element.timer);
262 |
263 | // 求解运动各属性初始值
264 | var start = {}, orgion = {};
265 | for (var attr in options) {
266 | start[attr] = parseFloat(css(element, attr));
267 | orgion[attr] = options[attr] - start[attr];
268 | }
269 |
270 | // 记录开始运动前一刻时间毫秒值
271 | var startTime = +new Date(); // Date.now()
272 |
273 | // 启动计时器，开始实现运动动画效果
274 | element.timer = setInterval(function(){
275 | // 计算运动经过的时长（毫秒）
276 | var elapsed = Math.min(+new Date() - startTime, speed);
277 | // 为每个运动属性计算当前运动值
278 | for (var attr in options) {
279 | var result = elapsed * orgion[attr] / speed + start[attr];
280 | // 设置元素对应 attr CSS属性值
281 | element.style[attr] = result + (attr === "opacity" ? "" : "px");
282 | if (attr === "opacity")
283 | element.style.filter = "alpha(opacity="+(result*100)+")";
284 | }
285 | // 判断是否运动结束
286 | if (elapsed === speed){
287 | clearInterval(element.timer);
288 | // 运动执行结束，判断是否有继续要执行的函数，有，则调用执行
289 | fn && fn();
290 | }
291 | }, 1000/60);
292 | }
293 |
294 | // 淡入
295 | function fadeIn(element, speed, fn) {
296 | element.style.opacity = 0;
297 | element.style.display = "block";
298 |
299 | animate(element, {opacity:1}, speed, fn);
300 | }
301 |
302 | // 淡出
303 | function fadeOut(element, speed, fn) {
304 | animate(element, {opacity:0}, speed, function(){
305 | element.style.display = "none";
306 | fn && fn();
307 | })
308 | }
309 |
310 | // 封装ajax操作函数
311 | // 参数 options 为可配置项内容
312 | // options = {
313 | // type : "get|post", // 请求方式，默认为 get
314 | // url : "http://xxx", // URL
315 | // async : true, // 是否异步，默认为异步
316 | // data : {username:""}, // 需要向服务器提交的数据
317 | // dataType : "text|json", // 预期从服务器返回的数据格式
318 | // headers : {"name":"value"}, // 额外设置的请求头
319 | // success : function(respData){}, // 请求成功时执行的函数
320 | // error : function(errMsg){}, // 请求失败时执行的函数
321 | // complete : function(xhr){} // 不论成功/失败都会执行的函数
322 | // }
323 | function ajax(options) {
324 | options = options || {};
325 | // 判断是否有连接的URL
326 | var url = options.url;
327 | if (!url) // 如果没有连接的URL，则结束函数执行
328 | return;
329 |
330 | // 创建核心对象
331 | var xhr;
332 | if (window.XMLHttpRequest)
333 | xhr = new XMLHttpRequest();
334 | else
335 | xhr = new ActiveXObject("Microsoft.XMLHTTP");
336 | // 设置请求方式
337 | var method = options.type || "get";
338 | // 设置是否异步
339 | var async = (typeof options.async === "boolean") ? options.async : true;
340 | // 判断是否有向服务器传递参数
341 | var param = null; // 保存查询字符串的变量
342 | if (options.data) { // 有传递参数
343 | var array = []; // 保存键值对结构的数组
344 | for (var attr in options.data) {
345 | array.push(attr + "=" + options.data[attr]); // ["key=value", "key=value"]
346 | }
347 | param = array.join("&"); // key=value&key=value&key=value
348 | }
349 | // 如果是 get 请求，则将查询字符串连接在 URL 后
350 | if (method === "get" && param){
351 | url += "?" + param;
352 | param = null;
353 | }
354 | // 建立连接
355 | xhr.open(method, url, async);
356 | // post传递参数时，设置请求头 Content-Type
357 | if (method === "post"){
358 | // 设置请求头信息
359 | xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
360 | }
361 | // 其它额外设置的请求头
362 | if (options.headers) {
363 | for (var attr in options.headers) {
364 | xhr.setRequestHeader(attr, options.headers[attr]);
365 | }
366 | }
367 | // 发送请求
368 | xhr.send(param);
369 | // 处理响应
370 | xhr.onreadystatechange = function(){
371 | if (xhr.readyState === 4) {
372 | // 无论成功或失败都会执行的函数
373 | options.complete && options.complete(xhr);
374 |
375 | if (xhr.status === 200) { // 成功
376 | var data = xhr.responseText;
377 | // 判断配置中预期从服务器返回的数据类型
378 | // 如果是 json，则调用 JSON.parse() 解析
379 | if (options.dataType === "json")
380 | data = JSON.parse(data);
381 | // 处理响应数据逻辑
382 | options.success && options.success(data);
383 | } else { // 失败
384 | options.error && options.error(xhr.statusText);
385 | }
386 | }
387 | }
388 | }
389 |
390 | // 使用 Promise 对象实现ajax异步操作
391 | function get(_url) {
392 | return new Promise(function(resolve, reject){
393 | ajax({
394 | url : _url,
395 | type : "get",
396 | dataType : "json",
397 | success : function(data){
398 | resolve(data);
399 | },
400 | error : function(errorMsg){
401 | reject(errorMsg);
402 | }
403 | });
404 | });
405 | }
--------------------------------------------------------------------------------