- 博客(72)
- 收藏
- 关注
RSS订阅原创 canvas基础--圆
绘制圆与绘制矩形的步骤基本一样：以一个小案例示范吧：```var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext('2d');// 前两个参数为圆心的坐标，第三个参数：半径，第四个：开始角度，第五个：圆结束角度//，第六个参数：是否逆时针(true为逆时针，fa
2018-05-23 11:24:19
235
原创 canvas基础--文字和渐变
### 一、绘制文字###### 1.绘制实心文字```//老规矩，获取元素 var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext("2d");//开始路径 context.beginPath();//设置字体：样式(斜体)、大小(单位是
2018-05-23 11:24:08
660
原创 canvas基础--矩形
上回我们了解了线条，由线→面，今天我们来说**矩形**画矩形之前呢，我们先思考如何才能画一个矩形？很简单，就是四条线段凑到一起，围成一个面，那么我们在写的时候是不是真的要画四条直线呢？当然不要---确定初始位置，改变终点位置，三次就好。备注：一下我们画图形，都是按照顺时针画的哟。还是按照我们之前学画直线的方法：获取元素myCanvas调用方法:getContext("2
2018-05-23 11:23:54
402
原创 Canvas--简易写字板
###### 相信canvas大家都听说过，今天我们就来用canvas写个简易画板。###### **首先**，我们得在body的内部写个canvas标签```//注意:这里要给canvas标签一个边框，以便我们看到画布这里写提示版本信息：您的浏览器版本太低，点击下载最新版本```###### 标签部分已经完成了。接下来就是js部分了：#
2018-05-23 11:23:41
250
原创 原生仿写Jquery
```// 参数分三种情况：// 1. 字符串：选择器// 2. function：ready方法// 3. 原生对象：原生对象转JQ对象function JQ(arg){// 用来放原生对象的数组this.elements = [];switch (typeof arg){case "string":// 通过getEle获取的有两种情况： id是一个
2018-05-23 11:23:27
269
原创 前台与PHP与Mysql
三者之间的联系：前台获取数据库里面的数据，提交数据到数据库，都要通过php(就是我们说的后台)，php充当桥梁。下面就以简单的“订餐”来介绍三者之间具体要做什么事。一、前台1、前台，通俗来说就是展示给用户看的页面，那么我们在写页面的时候就要考虑到，我们要展示什么，在页面的展示位置以及数据从哪来。今天要说的这个小例子就是：我们先利用Ajax向后台发送请求，后台执行连接数据库操作，将获
2018-05-23 11:23:05
646
原创 Ajax专题
备注:下面的小练习仅供参考。Ajax是能够在不刷新页面的情况下，让网页局部更新的技术。使用Ajax请求数据分为三步：1.创建对象var xhr = new XMLHttpRequest();2.发送请求xhr.open("GET","hot.json(这里写与后台文件的路径)"，true)；3.等待响应，每次网络请求的状态代表都会调用这个方法
2018-05-23 11:22:44
176
原创 判断用户名是否重复的注册
还是用的小黄人和模拟表单提交，以避免刷新页面。因为之前已经介绍过注册的方法，这里就直接上代码。需要注意的只有一点，就是我们用了两次定义XMLHttpRequest()对象(就是两套)。注意仔细看哦。前台代码：varbtn=document.getElementById("btn");varmyname=document.getElementById("m
2018-05-23 11:22:15
9700
原创 jquery Ajax的使用
备注：首先声明一下，这里的$.ajax的使用还不能实现跨域。什么是jquery Ajax 呢？其实就是对XMLHttpRequest()对象的封装，最基本的方法就是ajax();其参数是一组对象.固定的写法：上述的data:{word:"abc"},word 代表变量名，后面为变量的值，那我们在后天接受数据的时候，就要写$_POST['word']。su
2018-05-23 11:20:41
124
原创 简易版弹幕(PHP——xhr实现)
1.首先外面分析实现弹幕在页面上出现需要哪些步骤：①需要有个文本框供我们输入内容，然后有个按钮，点击发送我们输入的内容到后台（这里我们就模拟表单提交数据，使用formdata对象）。注意：formdata括号里面的第一个参数“Word”是自己随意定义的变量，第二个参数是要提交的数据。这里的word是我们写好的一个input输入框。完成了这一步，数据提交就完成了，
2018-05-23 11:20:01
1416
原创 callback函数实现快递查询
php部分：$kuaidi= array();$kuaidi['1000'] = array('info'=>"王小三的快递",'status'=>"配送中");$kuaidi['1001'] = array('info'=>"王三的快递",'status'=>"配送中");$kuaidi['1002'] = array('info'=>"张三的快递",'s
2018-05-08 16:16:14
565
原创 用XMLHttpRequest()对象实现注册页面
一、在PHP文件中这样写：// print_r($_FILES);//注意：这句一般要注释掉，不然结果报错//首先上传头像，上传不成功，注册失败if(!empty($_FILES['pic']['name'])){$result = move_uploaded_file($_FILES['pic']['tmp_name'],$_FILES['pic']['name']);}
2018-05-08 16:15:46
390
原创 cookie和localStorage
一、cookie首先，我们随意获取一个元素（用js的方式）：var btn = document.getElementsByTagName('input')[0];再者：判断条件，以确定存储了数据if(getCookie("count")){//把存储的值展示到元素的value值之上。btn.value = getCookie("count");
2018-05-08 16:14:57
162
原创 PHP基础
一、下列所有的操作都必须包括在里面，不推荐这种标签写法。1、变量的声明：$变量名；例如：$name;2、变量的赋值：$name = "haha";$app = 5;.....很多种类型的值，与javascript相同。3、输出变量(到浏览器页面)：echo $变量名；例如：echo $name；4、创建新的数组：$数组名 = array();例如：$arr = ar
2018-05-08 16:14:16
152
原创 PHP里那些函数
一、这里的函数用法与javascript一样，只是写法不一样而已。注意：函数可以定义若干个形参，形参可以设定默认值，但是具有默认值的形参要排在无默认值的后面。function myfunc($param2,$param="luxp"){ echo $param."hello world";//点"."表示拼接}//输出结果
2018-05-08 16:13:33
140
原创 PHP文件上传
文件上传就要用到form表单：注意form的enctype属性，属性值为：multipart/form-data,才能完成上传，格式如下：上传文件执行步骤如下：1、先判定提交的数据是否为空，在不为空的情况下，再执行上传操作：if(!empty($_FILES['upload'])){//下图语句.........}
2018-05-08 16:13:13
105
原创 简单的网页计数器
实现美刷新一次，计数器加1： $fp = fopen("count.txt","a+");$data = fgets($fp);$data = empty($data)?0:$data;fclose($fp);$data++;$fp = fopen("count.txt","w");fwrite($fp,$data);fclose($fp);e
2018-05-08 16:12:40
2429
原创 canvas高级--图形变换
### 一、图形变换：旋转、位移、缩放##### 1.旋转：rotate(Math.PI/i);* 角度自定；* 必须要用Math.PI去设置角度，不能给数字* 旋转之后实际上是将坐标系旋转了，一定要注意！！！##### 2.位移：translate(x,y);* 位置自定；（也可以超出画布的大小，但是看不到图就不怪我了）* 位移之后实际上也就是将坐标系的原点改变了。一
2018-05-08 15:56:54
298
原创 正则表达式
正则表达式定义：正则，就是某种规则、要求 正则属性：设置条件，如：是匹配一个还是匹配多个 创建正则的两种方法：1、直接量/字面量,g代表多次匹配，就是匹配到所有符合条件的 /这里写自己要查找的内容/，如下： /flower/ var reg1 = /flower/g;2、对象var reg2 = new RegExp("flow
2018-04-02 10:45:02
124
原创 不用js,照样能计数
备注：纯粹是掘金里面看来的。仅供欣赏。。。计数器动态的计算商品的数量，我们经常会借用js来实现；我想告诉css也能实现这个效果，他比js用起来简单多了1.counter-reset: 属性创建或者重置一个或多个计数器；2.counter-increment: 属性递增一个或多个计数器值；3.content: 与:befor
2018-04-02 10:44:33
113
原创 webpack的配置及使用
webpack webpack:是近的一加载器兼打包工具，它能把各种资源，例如J (含J X)、 coffee、样式(含less/sass)、图片等都作为模块来使用和处理。一、全局安装webpack：```npm install webpack -g ```二、编写webpack.config.js配置文件```// CommonJS //导出模块//
2018-04-02 10:44:04
161
原创 jQuery版的购物车
注意引入jquery.js文件：百度搜索jquery,点击进入找到jquery-3.2.1.min.js,引入自己的文件中。// 六个触发事件地方// 全选 单选 删除 删除所有 加 减// 全选$("#selectAll").click(function(){$(".checkt").prop("checked", this.check
2018-04-02 10:43:17
752
原创 开启jquery之旅
什么是jquery呢？在笔者理解看来，jquery就是利用封装好的js文件，用更少的代码实现复杂的功能，其本质上就是另一种形式的原生javascript.一、在使用jquery之前，我们需要注意以下几点：1、注意：通过JQ获取到的元素是JQ对象，通过元素的document.getXXX获取到的元素是原生对象。2、 ！！！原生对象不能调用JQ的方法和属性。3、！！！J
2018-04-02 10:42:52
270
原创 滚轮事件
varscrollFunc=function(e) {e=e|| window.event;if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件if (e.wheelDelta>0) { //当滑轮向上滚动时alert("滑轮向上滚动");}if (e.wheelDeltaalert("滑轮向下滚动");}
2018-04-02 10:42:20
290
原创 事件捕获和冒泡
简单获取三个嵌套的元素用来举例：① 事件捕获-事件传递的顺序-从父级到子级② 事件冒泡-事件处理的顺序-从子级到父级var box = document.getElementsByClassName('box')[0]; //父var item = document.getElementsByClassName('item')[0]; //儿子va
2018-04-02 10:41:52
97
原创 事件绑定
事件绑定：又称（事件委托、事件代理），就是另外一种绑定事件的方法，而且可以绑定多个事件。主要是为了解决：同一类型的事件，后者会覆盖前者的问题；例如：var redDiv = document.getElementById('redDiv');redDiv.onclick = function(){console.log(1);}redDiv.onclick
2018-04-02 10:41:34
165
原创 干货：常见的网页上的瀑布流
三种写法：1.最简单的(用ul来限定)：css部分：ul{margin: 0 10px;padding: 0;list-style: none;width: 200px;border:1px solid purple;float: left;}ul li{background: grey;margin-bottom: 10px;font-size: 50px;tex
2018-04-02 10:41:13
570
原创 移动端事件
移动端事件：①onclick: 移动端也可以使用onclick事件，但是查阅资料上说会有300ms的延迟，究竟是不是有待考究。②ontouchstart： 相当于PC端的onmousedown，详细可参照先前写的文档--“事件”。下同③ontouchend: 相当于PC端的onmouseup.④ontouchmove： 等价于PC的 onmousemove。注
2018-04-02 10:40:43
194
原创 BOM
BOM:浏览器对象模型BOM，提供了访问浏览器的接口。这些功能大多和网页内容无关，多年来，由于缺乏规范导致BOM中的不同方法在不同浏览器中的实现有所差异，直到html5，才将BOM的主要方面纳入规范。BOM常用的特性包括：一、window对象window对象在浏览器中具有双重角色：它既是ECMAscript规定的全局global对象，又是javascript访问浏览
2018-02-26 16:54:55
122
原创 干货:仿写某培训公司官网移入移出效果
CSS部分：.item{float: left;width: 200px;height: 200px;background-color: red;margin: 2px;perspective: 1000px;overflow: hidden;}.item div{width: 200px;height: 200px;background-color: blue;transform
2018-02-26 16:53:29
112
原创 回调和递归
回调：定义：把函数当做参数传递到另一个函数内部去调用，就叫回调。应用场景：用于导航栏，当我们点击链接是才开始加载资源，避免同时加载多个资源，占用大量空间造成卡顿。举例：function request(fn){//这里的fn就相当于showCar、showWomenconsole.log("发送网络请求");setTimeout(function()
2018-02-26 16:53:06
3792
原创 单击和双击
在body内部写一个div，然后给其设置样式，js部分代码如下：var redDiv = document.getElementById("redDiv");var timer;//单击就是我们一直以来用的最熟练的onclick.redDiv.onclick = function(){clearTimeout(timer);timer = setT
2018-02-26 16:52:37
393
原创 干货：实现拖拽效果
备注：加粗字段就是实现元素跟随鼠标移动的事件。var redDiv = document.getElementById('redDiv');var box = document.getElementsByClassName('box')[0];var body = document.getElementsByTagName('body')[0];redDiv.onm
2018-02-26 16:52:12
412
原创 键盘事件对象(keyCode)
键盘事件对象：即每一个按键。值得注意的是：我们在按键的时候，keydown 支持特殊按键，但是不区分大小写，而keypress不支持特殊按键，但是区分大小写。获取事件对象：document.onkeydown = function(ev){// 获取事件对象，可以使用window.event,注意：在火狐获取不到console.log(window.event);
2018-02-26 16:51:53
2742
原创 事件（鼠标、键盘、表单）
鼠标事件：redDiv.onclick = function(){console.log("click点击事件");}out和over会在鼠标从父级移入子级元素的时候触发enter和leave会在鼠标移入或移出父子级整体的时候才会触发redDiv.onmouseout = function(){console.log("out鼠标移出");
2018-02-26 16:49:33
223
原创 闭包及其应用场景
在说闭包之前，我们先来了解一下变量的作用域。局部变量，是在函数内部声明，局部变量不可以在函数外部使用。本质原因：函数在被调用的时候会入栈，并且分配空间，函数内部的变量都是在这块空间内部声明的。当函数运行完毕之后就会出栈，系统回收空间，函数内部的变量所占的空间也会被收回，所以不能在函数外部使用函数内部定义的变量。闭包：通俗来说，函数里面套函数就可以形成闭包。闭包里面使用局部变量和函数参数的时
2018-02-26 16:49:15
1092
原创 传说中的DOM
DOM对象：// 获取节点.var redDiv = document.getElementsByTagName('div')[0];// 创建标签类型节点var span = document.createElement("span");// span.innerText = "2016年8月8号";// 创建文本类型的节点
2018-02-26 16:48:54
98
原创 干货：碰撞检测
看代码就好，就不多解释了。。。。。说明：（写两个小球，背景色分别为黑色和红色，都相对于其父级绝对定位），以下是js部分的代码。var red = document.getElementsByClassName('red')[0];var black = document.getElementsByClassName('black')[0];var box = doc
2018-02-26 16:48:29
101
原创 干货：数组方法的仿写
这里提到一个新的知识点：Array.prototype.*; 只要是数组都能调用Array.prototype.*里面的方法/属性,下面用实例说明：Array.prototype.uName = "都是数组";Array.prototype.sum = function(){// console.log("这是新加的函数",this);var sum = 0
2018-02-02 19:37:37
222
原创 数组和字符串的对象和常用方法
1.数组对象： arr.length；2.数组方法：push(元素1，元素2，...);//即在数组的尾部添加元素,括号内为元素1，元素2,.....里面可以添加任意多个元素pop();//在数组的尾部弹出元素.注意：弹出元素的时候，括号内不能添加参数shift();//在数组的头部弹出元素unshift(
2018-02-02 19:36:58
200
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人