- 博客(89)
- 收藏
- 关注
RSS订阅原创 回调函数（简单易懂）
因为今天又遇到新的回调函数的形式callback && callback()；所以搜了一下回调函数，发现真的好多人写得好复杂啊，看得我昏昏欲睡还是看不懂，还有看到有的人说是 主函数执行完再去执行回调函数，我顿时无语，直接看下面普通函数与回调函数的区别你就懂了普通函数与回调函数的区别：对普通函数的调用：调用程序发出对普通函数的调用后，程序执行立即转向被调用函数执行，直到被调用函数执行完毕后，再返回调用程序继续执行。从发出调用的程序的角度看，这个过程为“调用–>等待被调用函数执行
2021-07-17 12:03:30
6964
2
原创 JS和JQ获取对象的区别
1、如何获取对象JS getElementId(‘id’)JQ $(’#id’)2、获取到的对象的形式JS获取到的是DOM对象【object htmlDivElement】JQ获取到的是 DOM对象包装成的对象 【object object】3、之间如何转化JS对象 转成JQ对象var v=document.getElementById(“v”); //DOM对象var v=v=v=(v); //jQuery对象转换后，就可以任意使用jQuery的方法了JQ转成JS对象两种转换方式将
2021-07-02 16:01:37
261
原创 前端模板引擎(jQuery模板)jsrender入门
1、模板用处预先定义一些固定格式的HTML标签，勿需依赖DOM和JQuery2、使用流程引入JS定义模板准备显示JSON数据对象获取模板，将模板与数据相结合利用Html输出3、简单的例子基本变量需要使用冒号 “:” 作为标识，一般是简单对象的某个属性。比如传入一个简单对象data//定义模板<script type="text/x-jsrender" id="j-specCard"> <table> <tr> <t
2021-07-02 15:00:04
384
原创 PHP中文显示乱码
PHP中文显示乱码显示乱码的话 是编码出现问题将在这过程当中涉及到编码的 都将类型设置为相同即可数据库 右键对应的表 设计表即可看到前端页面meta这行<html lang="zh-CN"><head> <meta charset="utf-8">PHP连接数据库的时候 加入这句mysqli_query($conn, "set names ‘utf8’ ");...
2021-06-28 01:10:32
119
原创 配置虚拟主机
1、我们一般访问网站的时候 都是www./而不是localhost:/www而且一台虚拟主机不只一个站点配置虚拟主机即可解决这个问题需要涉及到两个文件apache 目录下httpd.conf由于后期对虚拟主机的配置操作非常常见，所以我们一般将虚拟主机的配置单独放到一个配置文件中，然后在主配置文件中引入，避免破坏主配置文件中的其他配置。具体的操作方式就是在主配置文件 httpd.conf 的 505 行取消注释：Include conf/extra/httpd-vhosts.conf 配置的作
2021-06-28 00:58:07
159
原创 访问php页面显示源码解决方法
这种情况是因为apache处理不了php文件，因此直接显示源码在apache httpd.conf文件里面添加php页面处理模块直接ctrl+f 查询找到LoadModule区域 然后在列表下面添加LoadModule php7_module C:/Develop/php/php7apache2_4.dll添加.php扩展名解析即可在 节点中添加 .php 扩展名解析支持AddType application/x‐httpd‐php .php...
2021-06-27 22:19:52
6218
2
原创 删除中间数据之后，如何让ID重新排序（补足前面的）
比如1-10 你删除了234 之后 想让5-10的ID变成2-7我一开始是手动删除再在navicat里面删除的，没补齐，我以为是这样操作引起的，所以我用命令行delete form form_name where id=‘ID’;发现这样删除之后也没办法自动重新排序查了挺多的，目前来说的话是不可以的当然也有一种极端的方法，可以删除5以及后面的数据，然后设置从2开始自动递增右键表 —设计表----选项—选择自动递增（一开始自己是说直接改那个自动递增的，但是发现是不可以的，得将5以及后面的数据删
2021-06-19 23:51:05
3526
1
原创 Sublime下载安装以及插件配置
我又回来啦因为WebStorm不能编辑PHP代码所以从WebStorm换编辑软件为Sublime Text之前安装还是有点麻烦的，现在麻烦都被解除得差不多了，不得不说社会一直在进步，得与时俱进呀。废话不多说直接上Sublime3下载1.百度搜索Sublime3 download,选择进入下载页面2.我选择下载Win64位安装程序3、安装非常简单 傻瓜式安装，选择自己要安装的目录即可插件配置要有那些高亮 或者代码提示的话1、Preferences-看看有没有Package Cont
2021-05-17 03:47:05
652
原创 canvas学习day3——flappy_bird扑扇的小鸟1绘制背景图
flappy_bird通过鼠标的点击来控制小鸟躲避管道涉及知识混入式继承构造函数涉及问题1、绘图鸟 朝向无线刷新的管道 随机出现 无线刷新 随机高度背景图2、事件点击鼠标 控制鸟的飞行高度小鸟碰撞到管道则结束游戏...
2021-05-06 09:42:00
706
原创 canvas学习day3——加载图片loadImage函数，理解回调函数
回调函数回调函数理解你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件1 2 3 按顺序排列， 先使用1 3 然后再回头去用2 在这里2就是回调函数简单的一句话：被传入的、后又被调用的函数就称为回调函数。最常见使用回调函数是
2021-05-02 02:59:37
1303
原创 canvas学习day3——监听者模式
监听者模式：适用于两个对象之间的消息沟通。观察者模式属于行为型模式。它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。<body> <script> // 监听者 var jianTingZhe = { // 听众列表 listeners: { birdOver:
2021-04-29 04:40:20
92
原创 canvas学习day3——工厂模式
工厂模式（Factory Pattern）是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。<script> function Person( name, age ) { this.name = name; this.age = age; } // 工厂 // 工厂模式相当于省去new关键字 function g
2021-04-29 04:30:44
93
原创 canvas学习day3——判断点，鼠标点击是否在指定路径中
ctx.isPointInPath( 要判断的点x轴坐标，要判断的点y轴坐标 )1、获取ctx对象2、增加监听事件3、ctx.isPointInPath<body> <canvas id="cvs"></canvas> <script> var cvs = document.querySelector( '#cvs' ); var ctx = cvs.getContext( '2d' );
2021-04-29 04:19:57
657
原创 canvas学习day3——四种调用方式
1、函数调用 == window2、方法调用 == 宿主3、构造器 == 实例对象4、上下文（间接调用） == 自由指定
2021-04-29 04:16:04
105
原创 canvas学习day2——绘制一个旋转矩形
效果图其实就是利用定时器每隔一段时间擦除、绘制，非常简单，也可以直接用CSS3rotate 让其旋转。源码如下：setInterval( function() { // 清除上一次的矩形 ctx.clearRect( -50, -50, cvs.width, cvs.height ); // 旋转坐标系 ctx.rotate( Math.PI / 180 * 4 ); // 绘
2021-04-29 04:13:42
691
原创 canvas学习day2——平移、旋转、缩放
平移坐标轴：ctx.translate( x轴平移量，y轴平移量 )备注：已绘制的图形不会受到影响，平移会累加。效果图源码 ctx.fillRect( 10, 10, 50, 50 ); // 平移坐标轴之后，按照同样的坐标绘制一个填充矩形 ctx.translate( 100, 100 ); ctx.fillRect( 10, 10, 50, 50 ); // 再平移坐标轴，再按照同样的坐标绘制一个填充矩形
2021-04-29 03:53:11
130
原创 canvas学习day2——状态的保存与回滚
状态保存ctx.save();：把当前的状态(绘制环境的所有属性)copy一份进行保存。状态回滚ctx.restore();：把最近保存的一次状态作为当前状态。效果图源码<body> <canvas id="cvs" width="500" height="500"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx
2021-04-29 03:45:04
336
原创 canvas学习day2——对象版帧动画，小人原地行走踏步，drawimage，根据按键控制小人走动，三目运算符
前面就简单的介绍过了，其实就是涉及到几个知识点1、定时器2、drawimage函数3、在画第二章图片之前擦除第一张图片即可4、CSS精灵技术 也称雪碧技术效果图 有点慢 将就着看 随便找几张图片 and gif软件制作即可根据按键控制小人走动在原本的基础上1、绑定键盘监听事件，通过按下对应的键来改变小人行走的方向。2、定时器——每隔一段事件执行清除画布、绘制图像、改变当前帧的值，更新小人位置，下面是需要涉及到的知识具体思路为生成实例、清除画布、绘制图像、改变当前帧的值，更新小人位置
2021-04-28 04:19:47
568
原创 canvas学习day2——帧动画,小人物原地行走
帧动画效果图人在走动的录像思路1、CSS精灵技术相关讲解2、drawImage函数 第一种，三参数版本： * 把图像绘制到指定的坐标。 * */ // 必须要在img图像下载完毕之后使用 /*img.onload = function() { ctx.drawImage( img, 10, 10 ); }*/ /* * 第二种，五参数版本：
2021-04-27 04:15:50
226
原创 canvas学习day2——在圆上画一点
效果图只要找到这个点就可以了 非常简单。求这个点的坐标： x = 圆心x + r * Math.cos( angleToRadian( pointAngle ) ) y = 圆心y + r * Math.sin( angleToRadian( pointAngle ) )
2021-04-26 04:08:47
266
原创 canvas学习day2——绘制文字，饼图升级
绘制文字效果图非常简单，就是给固定文字填充或者描边而已var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); /* * 设置文字的属性 * ctx.font = 和css语法一样。 * 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。 * 注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
2021-04-26 04:06:16
281
原创 canvas学习day2——饼图，混入式繼承
饼图角度和弧度的关系效果图首先需要理解两个问题1、下一个扇形的起始角度，是当前扇形的结束角度，这个结束角度 = 上一个扇形的结束角度 + 当前数值所对应的角度2、某个数据所对应的扇形的角度this.data数值所存数组，num的话是总和，知道初始角度和结束角度，就可以画出对应的弧，再用foreach进行遍历，依次画出所有部分即可知道初始角度和结束角度，画出对应在饼图中所占的区域<body> <canvas id="cvs" width="500" height
2021-04-26 03:43:18
78
原创 canvas学习day2——构造函数，canvas内容转换为base64编码图片，画弧，角度与弧度的关系
构造函数// 构造函数 function Person( name, age ) { this.name = name; this.age = age; } // 说出自己的名字 Person.prototype.sayName = function() { console.log( this.name ); } var xiaofan
2021-04-26 00:02:35
131
原创 canvas学习day1——等比缩放折线图，数组的map方法
等比缩放折线图非常简单，就是乘以一定的比例Math.max.apply 数组当中取最大值var data = [ 100, 200, 400, 600, 1200, 1800, 1000, 500, 20 ]; // 求数据缩放的比例 var ratioX = coordMaxX / data.length; var ratioY = coordMaxY / Math.max.apply( null, data ); // 根据比例，
2021-04-25 07:54:35
201
原创 canvas学习day1——简易折线图，foreach的用法,数据可视化
在指定位置画多个点效果图1、坐标轴前面说过了2、点点的话其实就是一个放小的正方形，利用ctx.fillRect( 30, 170, 50, 50 );函数，四个参数分别为X Y点坐标，高度，宽度，所以这里只要找到X Y的坐标即可，这里前一章分析坐标轴原点的时候就分析过了，不再分析3、折线非常简单，第一个点连接第二个，第二个连接第三个，用foreach函数遍历即可foreach的用法也常见用于前端页面的渲染var points = [ [ 10, 10 ], [ 40, 20 ], [ 50
2021-04-25 04:01:48
230
1
原创 canvas学习day1——setLineDash虚线渐变矩形，绘制坐标轴
setLineDash虚线渐变矩形ctx.setLineDash( [ 4, 2, 1 ] );设置曲线，这个函数里面的参数依次是 实线 空白 实线 空白的宽度，依次循环效果图<body> <canvas id="cvs"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d')
2021-04-24 03:06:14
422
原创 canvas学习day1——让矩形运动起来，构造函数的作用
让矩形运动起来非常简单，其实就是画一个矩形然后擦除，再画一个位移变动的矩形，不断重复即可。这里可以直接把绘制方法 改成 直接调用绘制矩形的JS API<body> <canvas id="cvs" width="500" height="500"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getCont
2021-04-23 04:12:22
268
原创 canvas学习day1——填充与描边顺序问题，内置画矩形的API，清除画布
4-22 冲3000填充与描边顺序问题描边的时候，会占用原图形的一部分( 线宽的一半 )。所以，日常开发中，为了让线宽符合要求，最好先填充，再描边，防止填充时覆盖掉线宽的一半。内置画矩形的APIJS有提供画矩形的API，所以直接调用即可<body> <canvas id="cvs" width="500" height="500"></canvas> <script> var cvs = document.getEle
2021-04-22 22:52:30
121
原创 canvas学习day1——封装绘制矩形函数，非零环绕原则，绘制中空矩阵
为了方便绘制，会将常用的函数进行封装，后续直接传参调用即可。ctx.closePath();会将起点和终点连接起来ctx.lineWidth = lineWidth;线条的粗度<body> <canvas id="cvs"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d');
2021-04-22 04:20:11
229
原创 canvas学习day1——简介，使用领域，基本绘图，入门绘制一个正方形
简介HTML5 提供的一个用于展示绘图效果的标签，canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.canvas 的宽高不要使用 CSS 来设置, 会有拉伸的问题. 应该直接使用属性设置.使用领域游戏可视化数据(重点)banner 广告模拟仿真基本绘图获得 canvas 对象.调用 getContext 方法, 提供字符串参数 ‘2d’.该方法返回 CanvasRenderingContext2D 类型的对象. 该对
2021-04-22 03:47:47
191
3
原创 项目开发流程简介
1、需求分析分析项目针对哪些业务，需要什么功能2、原型设计根据需求分析的结果规划应用程序的原型，可以理解为“打草稿”3、UI 设计将“草稿”转换为设计稿，并提供相应的产物（设计稿、静态页面）。4、技术选型根据业务场景分别选择对应的技术栈5、数据库设计根据需求设计数据库6、项目架构设计俗称搭架构，其中具体的操作主要就是制定项目规范约束、创建基本的项目结构、编写基础的公共模块代码和组织代码。7、业务迭代开发开发者的日常，基于项目架构（条条框框）下完成各项业务功能。8、集中测试将所有
2021-04-22 03:19:57
295
原创 PHP利用session/cookie实现猜数字
session逻辑问题跟cookie也差不多的，所以这里只附上cookie的代码效果图逻辑1、首先判断用户是否之前有登录过产生过随机数，如果有的话，就不再产生随机数。之后用户输入一个数字之后提交，后台判断是大还是小，然后输出对应的错误信息，太大了或者太小了，然后猜的cookie次数也++，放在用户的硬盘当中html页面<h1>猜数字游戏</h1> <p>Hi，我已经准备了一个0~100的数字，你需要在仅有的10机会之内猜对它。</p> <
2021-04-21 03:11:41
367
原创 PHP连接数据库并查询数据
建立与数据库服务器之间的连接$connection = mysqli_connect('127.0.0.1', 'root', 'password', 'mysql');2、 修改数据库连接字符集为 utf8mysqli_set_charset($connection, 'utf8');3、判断连接是否成功，如果失败则直接跳出程序if (!$connection) { // 连接数据库失败 exit('1');}4、查询并判断，mysqli_query数据库会返回一个结果集.
2021-04-20 17:52:36
1117
原创 PHP连接Wamp数据库
1、下载安装Wamp数据库2、启动3、连接函数$connection = mysqli_connect('127.0.0.1', 'root', 'password', 'mysql');4个参数分别为 IP地址，数据库用户名，数据库密码，数据库名称（这里mysql是wamp数据库里面本来就有的一个数据库），127.0.0.1为回环IP地址，也就是本机IPWamp默认用户名为root默认密码为空可以依次点击有下表Wamp小图标，选择Mysql，选择控制台，然后直接回车即可进入Mysql 然
2021-04-20 03:14:17
624
原创 call和apply的区别
call的第一个参数将会是function改变上下文后指向的对象第二个参数开始可以接收任意个参数，这些参数将会作为function的参数传入functionapply()与call方法的使用基本一致，但是只接收两个参数，其中第二个参数必须是一个数组或者类数组，这也是这两个方法很重要的一个区别两个方法该如何选择？根据你要传入的参数来做选择，不需要传参或者只有1个参数的时候，用call，当要传入多个对象时，用apply。如果需要传入的参数已经是一个数组或者类数组了，就用apply，如果还是单
2021-04-20 01:21:31
394
原创 前端兼容性问题5——css的兼容性问题、浏览器前缀
1.背景半透明标准下：opacity: 0.2;非标准下：filter:alpha(opacity=30);2.清除浮动 1.标准下： .clearfix :: after { content"."; display: block; height: 0; visibility: hidden; clear: both; } 2.ie6,7,8 .clearfix { *zoom: 1; } 浏览器前缀-webkit- Google C
2021-04-19 19:51:08
124
原创 前端兼容性问题4——js关于事件的兼容性
6.滚动事件a>滚动事件：onscroll在标准浏览器下：window.onscroll或document.onscrollie6,7,8,认为document没有onscroll事件，使用尽量windowb>垂直方向滚动条滚动过的距离顶部的距离 ：scrollTop火狐下获取页面scrollTop的距离：document.documentEelement.scrollTop （谷歌不支持）谷歌和ie：document.body.scrollTopvar scrollT = doc
2021-04-19 19:44:08
118
原创 前端兼容性问题3——js关于事件的兼容性
事件对象事件对象： 当触发事件的时候会产生一个事件对象event ,这个事件对象中包含与这个事件有关的所有信息a>ie和谷歌，在全局window下面，可以直接打印event相关的信息,输出是未定义（在没有事件发生的时候）, 有事件发生的时候会打印出关于这个事件的所有信息b>火狐只支持以事件处理函数的第一个参数的形式,而ie6,7,8不支持以事件函数的第一个参数的形式，但不会报错var oBox = document.getElementById('box'); oBox.onclic
2021-04-19 18:56:11
163
原创 前端兼容性问题2——节点操作，获取子节点
a> 获取子节点的方法： obj.childNodes标准浏览器： childNodes 获取到的的内容包括空白节点和元素节点非标准浏览器下： 只包含元素节点解决方法：使用 children 获取子元素；空白节点就是一个节点 但是里面没有任何东西元素节点就是里面有东西空白节点（nodeType=1：表示是元素节点，即标签。如：div、p、input…）2属性节点 3文本节点var oUl = document.getElementById('oul'); var aLi =
2021-04-19 03:25:35
251
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人