js

用JS实现的贪吃蛇游戏

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-04-03 10:38:58
需要用到html、css、javascript 和 DOM 这些知识点就可以了。主要是js，其他只是一些基本的知识。js貌似也不是很难。但是问题就在这里，即使知识点都会了，但是还是无法综合运用把东西做出来 游戏界面 先把整个游戏界面做出来： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> *{padding: 0; margin: 0;} .title{text-align: center; margin: 10px 0;} #main{width: 800px; height: 600px; border:1px solid red; margin: 0 auto;} #main .left{width: 600px; height: 600px; float: left; position: relative;} /*随机的食物通过position了定位的，所以父标签要加上position: relative*/ #main .right{width: 200px; height: 100%; float: left; border-left: 1px solid red; box-sizing: border-box; text-align:

js 绑定的键盘事件

由 纵饮孤独 提交于 2020-04-03 08:21:33
在全局绑定键盘事件 　　document.onkeydown = function(event){ //在全局中绑定按下事件 　　　　var e = event || window.e; 　　　　var keyCode = e.keyCode || e.which; 　　　　switch(keyCode){ 　　　　case 27: 　　　　　　alert(111); 　　　　　　break;　　　　 　　}　　 } 真记不住键码值，记录一下，脑子不提好使，记不住。 来源： https://www.cnblogs.com/chenyudi/p/11187218.html

js点击变色，在点击还原

由 那年仲夏 提交于 2020-04-03 07:14:31
方法1： html： <li class="active twonav"> <label class="jpg rgb" href="#Navsola" role="tab" data-toggle="pill" >单张</label > </li> <li class="twonav"> <label class="sole rgb" href="#Navshrine" role="tab" data-toggle="pill" >图库</label > </li> css .jpg { color: #ffffff; float: left; width: 36px; height: 21px; border: 1px solid #656565; font-size: 12px; padding: 2px 5px; background-color: #656565; border-radius: 4px; } .sole { color: #4d4d4d; width: 36px; height: 21px; border: 1px solid #656565; float: left; font-size: 12px; padding: 2px 5px; background-color: #ffffff; border-radius: 4px; } js $

JS内置对象和Math对象

由 情到浓时终转凉″ 提交于 2020-04-02 23:43:30
Math对象 <script> // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); // 一个属性 圆周率 console.log(Math.max(1, 99, 3)); // 99 console.log(Math.max(-1, -10)); // -1 console.log(Math.max(1, 99, 'pink老师')); // NaN console.log(Math.max()); // -Infinity </script> 自己封装对象 <script> // 利用对象封装自己的数学对象 里面有 PI 最大值和最小值 var myMath = { PI: 3.141592653, max: function() { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; }, min: function() { var min = arguments[0]; for (var i = 1; i < arguments.length; i++) { if

JS作用域

由 主宰稳场 提交于 2020-04-02 23:29:25
<script> // 1.JavaScript作用域 ： 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突 // 2. js的作用域（es6）之前 ： 全局作用域 局部作用域 // 3. 全局作用域： 整个script标签 或者是一个单独的js文件 var num = 10; var num = 30; console.log(num); // 4. 局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用 function fn() { // 局部作用域 var num = 20; console.log(num); } fn(); </script> <script> // 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量 // 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用 // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量 var num = 10; // num就是一个全局变量 console.log(num); function fn() { console.log(num); } fn(); // console.log(aru); // 2. 局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量 // 注意：

Vue和js冲突解决

由 泄露秘密 提交于 2020-04-02 21:23:32
问题描述： Vue不允许js直接操作他的dom对象中的属性， 解决：通过js直接操作Vue还没赋值时的元素。即原先我们是直接把我们想要的值赋值给标签，现在我们需要先把值赋值给Vue,然后通过Vue再把值赋值给标签，这样，就避免了直接操作dom元素 代码： 第一步：在外面创建一个变量，并把值赋值给Vue 第二步：把返回来的值赋值给Vue的info,同时赋值给myModel(一定要赋值，因为我们要操作里面的元素，如果不赋值，会报空指针异常) 第三步：把我们想要改变的值赋值给myModel即可， 来源： https://www.cnblogs.com/xiaofengshan/p/12622883.html

常用js个人汇总

由 旧巷老猫 提交于 2020-04-02 09:30:26
//px转换为rem (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); // 页面刷新 回到顶部 $('html ,body').animate({ scrollTop:-10},300); // 头部导航 悬浮 $(window)

Beego 学习笔记7：JS分页

由 大憨熊 提交于 2020-04-02 07:31:01
JS分页 1> JS分页，业务逻辑 (1) 分页采用的是一个叫jquery.pagination.js的一个jquery插件 (2) 需要jquery的支持，此项目中使用到的是jquery-2.1.1.min.js (3) 分页需要的参数有:记录总数，每页显示个数，页码 (4) 添加搜索的条件，作为查询使用 2> 编写新的model，命名为data.go.其代码如下: package models import ( "fmt" "github.com/astaxie/beego/orm" _ "github.com/go-sql-driver/mysql" ) // 用户 type User struct{ Id int64 `orm:"auto"` Name string `orm:"size(100)"` Nickname string `orm:"size(100)"` Pwd string `orm:"size(100)"` Email string `orm:"size(100)"` Sex string `orm:"size(2)"` Roleid string `orm:"size(100)"` Status int64 Phone string `orm:"size(16)"` } //根据用户数据总个数 func GetRecordNum(search

js导出Excel表格

由 北慕城南 提交于 2020-04-02 05:39:11
js导出Excel表格 　　直接上代码： 　　红色部分：如果表格数据中有“ 1/1 ”这样的值，会在导出的Excel中转化为日期“ 1月1日 ”，所以才加上了红色那两句。如果返回值中没有这样的格式，红色部分可以不写。 1 //Excel下载 2 function base64(content) { 3 return window.btoa(unescape(encodeURIComponent(content))); 4 } 5 function exportOffice(dom, tableID, fName) { 6 var type = 'excel'; 7 var table = document.getElementById(tableID); 8 var excelContent = table.innerHTML; 9 var ddd="<td style=\"mso-number-format:'\\@';\">"; 10 var result=((excelContent).toString()).replace(/<td(.*?)>/g,ddd); 11 console.log(result); 12 var excelFile = "<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn

JS原生实现表单序列化

由 岁酱吖の 提交于 2020-04-01 14:12:05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单序列化</title> </head> <body> <fieldset> <legend>表单</legend> <form> <div> MM:<input type="radio" name="name" value="mm"></br> GG:<input type="radio" name="name" value="gg"></br> </div> <div> ping<input type="checkbox" name="ping" value="ping"> pang<input type="checkbox" name="pang" value="pang"> qi<input type="checkbox" name="qiu" value="qiu"></br> </div> <div> <textarea rows="8" cols="15"></textarea></br> </div> <div> <select name="fruits"> <option value="apple">apple</option> <option value="orange">orange</option> <option
订阅 js